jquery实现左右轮播图

最新推荐文章于 2020-08-18 18:26:27 发布

weixin_30500663

最新推荐文章于 2020-08-18 18:26:27 发布

阅读量135

点赞数

原文链接：http://www.cnblogs.com/firstflying/p/8567561.html

版权

jquery实现左右无缝轮播图

最终显示效果：

HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jquery无缝轮播图片</title>
        <script src="js/jquery-1.11.3.js"></script>
        <script src="js/carousel2.js"></script>
        <link rel="stylesheet" href="css/carousel2.css" />
    </head>
    <body>
        <div class="banner">
            <!--轮播图片-->
            <ul class="img">
                <li>
                    <a href="#"><img src="img/carousel1.jpg" alt="第1张图片"></a>
                </li>
                <li>
                    <a href="#"><img src="img/carousel2.jpg" alt="第2张图片"></a>
                </li>
                <li>
                    <a href="#"><img src="img/carousel3.jpg" alt="第3张图片"></a>
                </li>
                <li>
                    <a href="#"><img src="img/carousel4.jpg" alt="第4张图片"></a>
                </li>
                <li>
                    <a href="#"><img src="img/carousel5.jpg" alt="第5张图片"></a>
                </li>
            </ul>
            
            <!--追加小圆点的位置-->
            <ul class="num"></ul>
            
            <!--左右按钮-->
            <div class="btn">
                <span class="prev"><</span>
                <span class="next">></span>
            </div>
        </div>
    </body>
</html>

CSS3代码：

* {
    margin: 0;
    padding: 0;
}

.img,.num {
    list-style: none;
}

.banner {
    width: 1026px;
    height: 496px;
    border: 2px solid #ccc;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}

.img {
    position: absolute;
    top: 0;
    left: 0
}

.img li {
    float: left;
}
.num {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    font-size: 0;
}

.num li {
    width: 10px;
    height: 10px;
    background: rgba(0, 0, 0, 0.5);
    display: block;
    border-radius: 100%;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
}

.btn {
    display: none;
}

.btn span {
    display: block;
    width: 50px;
    height: 100px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 40px;
    line-height: 100px;
    text-align: center;
    cursor: pointer;
}

.btn .prev {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -50px;
}

.btn .next {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -50px;
}

.num .active {
    background-color: #fff;
}

javaScript代码：

 $(function() {    
    var i = 0;  
    var timer = null;  
    
    //创建圆点
    for(var j = 0; j < $('.img li').length; j++) { 
        $('.num').append('<li></li>')  
    }  
    //给第一个圆点添加样式
    $('.num li').first().addClass('active'); 
        
    //复制第一张图片
    var firstimg = $('.img li').first().clone(); 
      
    //将第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度
    $('.img').append(firstimg).width($('.img li').length * ($('.img img').width())); 
          
    // 下一个按钮
    $('.next').click(function() {   
        i++;   
        if(i == $('.img li').length) {    
            i = 1; //这里不是i=0
                
            //保证无缝轮播，设置left值
            $('.img').css({
                left: 0
            }); 
               
        };  
         
        // i需要乘以图片像素
        $('.img').stop().animate({
            left: -i * 1026
        }, 300);   
        
        //设置小圆点指示
        if(i == $('.img li').length - 1) {  
            $('.num li').eq(0).addClass('active').siblings().removeClass('active');   
        } 
        else {    
            $('.num li').eq(i).addClass('active').siblings().removeClass('active');   
        }       
    })     
    
       // 上一个按钮
       $('.prev').click(function() {   
        i--;   
        if(i == -1) {    
            i = $('.img li').length - 2;    
            $('.img').css({
                left: -($('.img li').length - 1) * 1026
            });   
        }   
        $('.img').stop().animate({
            left: -i * 1026
        }, 300);   
        $('.num li').eq(i).addClass('active').siblings().removeClass('active');  
    })     
    
    //设置按钮的显示和隐藏
       $('.banner').hover(function() {   
        $('.btn').show();  
    }, function() {   
        $('.btn').hide();  
    })    
    
    //鼠标划入圆点
       $('.num li').mouseover(function() {   
        var _index = $(this).index();   
        $('.img').stop().animate({
            left: -_index * 1026
        }, 150);   
        $('.num li').eq(_index).addClass('active').siblings().removeClass('active');  
    })     
    
    //定时器自动播放
       timer = setInterval(function() {   
        i++;   
        if(i == $('.img li').length) {    
            i = 1;    
            $('.img').css({
                left: 0
            });   
        };     
        $('.img').stop().animate({
            left: -i * 1026
        }, 300);   
        if(i == $('.img li').length - 1) {    
            $('.num li').eq(0).addClass('active').siblings().removeClass('active');   
        } else {    
            $('.num li').eq(i).addClass('active').siblings().removeClass('active');   
        }  
    }, 1000)     
    
    //鼠标移入，暂停自动播放，移出，开始自动播放
       $('.banner').hover(function() {   
        clearInterval(timer);  
    }, function() {   
        timer = setInterval(function() {   
            i++;   
            if(i == $('.img li').length) {    
                i = 1;    
                $('.img').css({
                    left: 0
                });   
            };     
            $('.img').stop().animate({
                left: -i * 1026
            }, 300);   
            if(i == $('.img li').length - 1) {    
                $('.num li').eq(0).addClass('active').siblings().removeClass('active');   
            } else {    
                $('.num li').eq(i).addClass('active').siblings().removeClass('active');   
            }  
        }, 2000)  
    })   
})