京东呼吸灯(轮播图)
Posted shanlu0000
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了京东呼吸灯(轮播图)相关的知识,希望对你有一定的参考价值。
布局:
div.slider > ul + div.arrow
ul > ll(*8)> a > img
div.arrow > span.arrow-left + span.arrow-right
案例分析:
当左箭头一点击,上一张图片渐渐的显示,其他图片渐渐的隐藏
当右箭头一点击,下一张图片渐渐的显示,其他图片渐渐的隐藏
关键代码
$(function() var count=0; $(".arrow-left").click(function() count--; if(count<0) count=7; $(.slider li).eq(count)。fadeIn().siblings().fadeOut(); ) $(".arrow-right").click(function() count++; if(count > 7) count=0; $(".slider li").eq(count).fadeIn().siblings().fadeOut(); ) )
完整代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>京东商城</title> <style> * margin: 0; padding: 0; list-style: none; .slider height: 340px; width: 790px; margin: 100px auto; position: relative; .slider li position: absolute; display: none; .slider li:first-child display: block; .arrow display: none; .slider:hover .arrow display: block; .arrow-left, .arrow-right font-family: "SimSun", "宋体"; width: 30px; height: 60px; background-color: rgba(0, 0, 0, 0.1); position: absolute; top: 50%; margin-top: -30px; cursor: pointer; text-align: center; line-height: 60px; color: #fff; font-weight: 700; font-size: 30px; .arrow-left:hover, .arrow-right:hover background-color: rgba(0, 0, 0, .5); .arrow-left left: 0; .arrow-right right: 0; </style> </head> <body> <div class="slider"> <ul> <li><a href="#"><img src="images/1.jpg" alt=""></a></li> <li><a href="#"><img src="images/2.jpg" alt=""></a></li> <li><a href="#"><img src="images/3.jpg" alt=""></a></li> <li><a href="#"><img src="images/4.jpg" alt=""></a></li> <li><a href="#"><img src="images/5.jpg" alt=""></a></li> <li><a href="#"><img src="images/6.jpg" alt=""></a></li> <li><a href="#"><img src="images/7.jpg" alt=""></a></li> <li><a href="#"><img src="images/8.jpg" alt=""></a></li> </ul> <!--箭头--> <div class="arrow"> <span class="arrow-left"><</span> <span class="arrow-right">></span> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $(function () var count = 0; $(".arrow-right").click(function () count++; //if(count == $(".slider li").length) if (count>7) count = 0; console.log(count); //让count渐渐的显示,其他兄弟渐渐的隐藏 $(".slider li").eq(count).fadeIn().siblings().fadeOut(); ); $(".arrow-left").click(function () count--; //if(count == -1) if (count<0) //count = $(".slider li").length - 1; count=7; console.log(count); //让count渐渐的显示,其他兄弟渐渐的隐藏 $(".slider li").eq(count).fadeIn().siblings().fadeOut(); ) ); </script> </body> </html>
以上是关于京东呼吸灯(轮播图)的主要内容,如果未能解决你的问题,请参考以下文章