最简单的轮播
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了最简单的轮播相关的知识，希望对你有一定的参考价值。
从 作者：饥人谷_范悦 那看到的 链接：[www.jianshu.com/p/5c7c427eb557](http://www.jianshu.com/p/5c7c427eb557)
个人缩减了下，如下：
-------------------------------------------------
css：
*{
padding:0;
margin:0;
}
li{
list-style:none;
float:left;
}
.content{
width:600px;
height:270px;
margin:100px auto;
}
.content-box{
width:480px;
height:270px;
margin:0 auto;
position:relative;
overflow:hidden;
}
ul{
width:2400px;
overflow:hidden;
position:absolute;
left: -480px;
}
li img{
width:480px;
height: 270px;
}
------------------------------------
html：
<div class="content"> <div class="content-box"> <ul> <li></li>//图3 <li></li>//图1 <li></li>//图2 <li></li>//图3 <li></li>//图1 </ul> </div> </div>
js:
--------------------------------------------
//此处记得引入jquery cdn：<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
var n=2;//由于第一张图是实际是最后1张，是用于从最后一张到第一张过度用，所以n=2，从第二张图开始
$(document).ready(function () {//计时器，用于自动轮播
var timer=setInterval(function () {
tonext();
console.log(n);
},1000)
}
)
//从左向右运动的函数，每次调用向右前进一张图片距离，当到达第四张（也就是给观众看的第三张），则left跳回第一张（也就是和它一样的那张，不过排在开头），由于两张图片一样，可以达到无法察觉的效果
function tonext() {
$(‘ul‘).animate({left:-480*n+"px"},function () {
n++;
if(n==4){$(‘ul‘).css({left:0});n=1}
})
}
以上是关于最简单的轮播的主要内容，如果未能解决你的问题，请参考以下文章