用jquery实现简单的轮播

作者: jnunp | 来源:发表于2016-10-14 10:26 被阅读720次

用js原生实现轮播图
用jquery实现简单的轮播
项目-轮播图
用 jQuery 做个轮播
用jQuery实现轮播
jquery简单实现无缝轮播
纯vue实现轮播，超简单
Jquery和纯JS实现轮播图--淡入淡出切换式
jquery代码实现爱奇艺轮播图效果
jquery css js的轮播

还是先贴代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <style>
        *{margin: 0;padding: 0}
        #slider{width: 800px;height: 450px;display:block;margin: 0 auto;margin-top: 100px;border:1px solid #ddd;overflow: hidden;position: relative;}
        #slider li{display: block;float: left;}
        #slider li img{width: 800px;height: 450px;}
        #slider button.up{position: absolute;top: 50%;z-index: 9;left: 20px;width: 50px;height: 50px;text-align: center;}
        #slider button.down{position: absolute;top: 50%;z-index: 9;right: 20px;width: 50px;height: 50px;text-align: center;}
    </style>
</head>
<body>
    <div id="slider">
        <ul>
            <li><a href=""><img src="img/1.jpg" alt="" /></a></li>
            <li><a href=""><img src="img/2.jpg" alt="" /></a></li>
            <li><a href=""><img src="img/3.jpg" alt="" /></a></li>
        </ul>
        <button class="up">向上</button>
        <button class="down">向下</button>
    </div>
<script>
    
// Decode slider QQ:970220385
var sliderWidth = $("#slider li").width();
var sliderSize = $("#slider li").size();
var sliderUl = $("#slider ul")
sliderUl.width(sliderWidth*sliderSize);
var timer
function time(){
    timer=setInterval(function(){
        slider();
    },3000);
}
var i = 0
function slider(){
    if (i>=sliderSize-1) {
        i = 0
    } else {
        i ++
    }
    sliderUl.stop().animate({marginLeft: -sliderWidth*i}, 500);
};
    
time()
$("button.up").click(function(event) {
    if( i !== 0){
        sliderUl.stop().animate({marginLeft: -(i-1)*sliderWidth}, 500);
        i --
    }else{
        i = sliderSize-1
        sliderUl.stop().animate({marginLeft: -i*sliderWidth}, 500);
    };
    
    clearInterval(timer)
    time();
});
$("button.down").click(function(event) {
    slider();
    clearInterval(timer)
    time(); 
});

</script>
</body>
</html>

大概思路

实现思路差不多就是先建立一个定时器

对变量 i 进行每3s一次+1
然后获取页面中需要滚动的图片数量
利用margin-left乘以 i 配合animate进行动画滚动。
判断i的数值是否大于图片滚动的数量，如果大于将变量赋值0
左右按钮直接利用slider（）方法先强行执行一次动画并且i++
这时候大家会发现一个小bug，就是当你不停地点左右的时候就会出现滚动误差，所以这里我们用clearInterval(timer)方法去暂停一下原来的事件，再执行time（）