jQuery的循环轮播图：很赞很高级
效果图在上面
小demo的坑：
图一共是5张，但是如果用计时器往左偏移的话，偏移到一定程度的时候，偏移位会归零，归零的瞬间会变图，
突然切换的图片会显得很生硬，所以再图片末尾再加上前2张图片，让滚动更流畅。
用到的主要技巧就是，计时器的技巧，还有就是jq的siblings()获取非当前的这个方法在触摸图层会很重要。
fadeTo方法也是非常重要的，传递2个参数，第一个是时间，第二个就是透明度，透明度我们选择了0.5，然后
ul的背景是黑色的，所以呈现出来的就是类似于黑色蒙版的东西。
源码附带：
<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>无限循环滚动轮播</title>
<script src="jquery-3.0.0.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
/* 图片一张是590 */
width: 1180px;
height: 470px;
border: 1px solid black;
margin: 100px auto;
overflow: hidden;
}
ul{
/* ul要存放7张图片，所以宽度要乘五 */
width:4130px;
height: 470px;
list-style: none;
background: black;
}
li{
float: left;
}
</style><!-- 思路 -->
<!-- 准备一个div -->
<div>
<!-- div作为外面最大的容器 -->
<!-- 图片放在ul中跟随移动 -->
<ul>
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
</ul>
</div>
<script>
var off=0;
var timer;
//jq代码让图片轮播
$(function(){
//设置变量获取偏移
//调用自动播放的方法
autoplay();
//监听鼠标
listen();
});
/*将计时器方法单独定义*/
function autoplay(){
timer=setInterval(function(){
//进入定时器让off自减，向左走
off+=-1;
//判断,如果经过5张以后循环
if(off<=-2950){
off=0;
}
//获取ul
$('ul').css({
'marginLeft':off
});
},10);
}
function listen(){
$('li').hover(function(){
//移入
//移入之后给非当前选中的添加蒙版
//移入停止滚动
clearInterval(timer);
//fadeto方法，设置动画透明度.ul背景是黑色的，li透明就是黑色朦胧感觉
$(this).siblings().fadeTo(100,0.5);
//选中当前要去除自身的蒙版
$(this).fadeTo(100,1);
},function(){
//移出
//继续滚动，调用方法
autoplay();
// 去除所有的蒙版
$('li').fadeTo(100,1);
})
}
</script>
大家好，已经很久没有给大家发布文章了，因为最近在学习很多新东西，已经保存到自己的印象笔记，所以后续会持续给大家