仿造天猫、京东、凡客等，轮播图的开发（jQuery）
2017-05-22 本文已影响232人
被时光移动的城
轮播图思路：
1、轮播图布局
2、定时器实现轮播效果
3、指示器的鼠标移入（mouseenter）、移出（mouseleave）事件
轮播图中的问题及解决办法：
1、轮播图中指示器小圆点的实现。
--> css3 border-radius属性
2、当鼠标停在指示器上，获取当前序号 。
--> index()
3、鼠标在指示器上快速滑动，轮播出现白屏现象。
--> 鼠标移入指示器停止Interval定时器，开启一个setTimeout定时器，如鼠标在指示器停留时间超过200ms，则图片指示器进行切换（同时关闭切换时的淡入淡出动画，防止堆积），否则鼠标移出指示器时关闭这个TImeout的定时器，然后开启Interval定时器。
运行效果图：
轮播图.gif
代码（本文使用的jQuery版本是1.11.3，在低版本IE及W3C浏览器中效果相同）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#lb{
width: 1200px;
height: 535px;
margin: 50px auto;
border: 2px black solid;
position: relative;
overflow: hidden;
}
#lb img{
display: 'none';
}
#lb ul{
position: absolute;
right: 46%;
top: 500px;
}
*#lb ul li{
display: block;
background: #DDDDDD;
float: left;
width: 12px;
height: 12px;
margin-left: 8px;
list-style:none;
border-radius: 50%;
}
</style>
<script type="text/javascript" src="jquery.min.js"> </script>
<script type="text/javascript">
$(function(){
var i=0;
// 轮播定时器
var inTimer = setInterval(inRun,2000);
var outTimer;
//图片及小圆点切换的方法
function inRun(){
i++;
i = (i==7)?0:i;
//图片切换
$("#lb img").eq(i).fadeIn(500).siblings('img').fadeOut(500);
//小圆点切换
$("#lb ul li").eq(i).css({'background':'#A10000'}).siblings('li').css({'background':'#DDDDDD'});
}
//鼠标移入小圆点
$("#lb ul li").mouseenter(function(){
//获取对象
var liThis = $(this);
//清除轮播动画
clearInterval(inTimer);
//开启定时器，防止快速选择小圆点
outTimer = setTimeout(function(){
i = liThis.index();
//通过小圆点切换，停止关闭淡入淡出动画
$("#lb img").eq(i).stop().fadeIn(500).siblings('img').stop().fadeOut(500);
//小圆点切换
$("#lb ul li").eq(i).css({'background':'#A10000'}).siblings('li').css({'background':'#DDDDDD'});
},200);
});
// 鼠标移出小圆点事件
$("#lb ul li").mouseleave(function(){
//清除掉防止图片快速切换
clearTimeout(outTimer);
//鼠标移出小圆点时开启图片轮播定时器
inTimer = setInterval(inRun,2000);
});
})
</script>
<body>
<div id="lb">
<ul>
<li style="background: #A10000;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
下载：https://github.com/wangwei66666/FKSlideShow
如有问题欢迎交流。
如转载请注明出处，谢谢！
