无缝轮播

最新推荐文章于 2024-09-21 15:07:21 发布

sunlizhen

最新推荐文章于 2024-09-21 15:07:21 发布

阅读量231

点赞数

CC 4.0 BY-SA版权

分类专栏： JS类 jquery 文章标签： js jq

本文链接：https://blog.youkuaiyun.com/sunlizhen/article/details/78727404

JS类同时被 2 个专栏收录

202 篇文章

订阅专栏

jquery

13 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        .bg{background: #FFF;}
        *{margin: 0;padding: 0;}
        ol,ul{list-style: none;}

        #play{width: 800px;height:532px;position: relative;overflow: hidden;}
        #play #ul{position: absolute;}
        #play #ul li{float: left;}
        #play #ul li img{width: 800px; height:532px;}
        #play #ol{width:100px;position: absolute;top:500px;left:360px;}
        #play #ol li{width: 15px;height: 15px;border-radius: 50%;float: left;margin: 3px;border:1px solid red;}
        #play #prev{ display:none;border:none;position: absolute;top:250px;width:30px;font-size: 40px;left:15px;background:rgba(0,0,0,0.5)}
        #play #next{ display:none;border:none;position: absolute;top:250px;width:30px;font-size: 40px;right:15px;background:rgba(0,0,0,0.5)}

    </style>
    <script src="jquery-1.6.2.min.js"></script>
</head>
<body>
<div id="play">
    <ul id="ul">
        <li><img src="wufengImg/1.png" alt=""></li>
        <li><img src="wufengImg/2.png" alt=""></li>
        <li><img src="wufengImg/3.png" alt=""></li>
        <li><img src="wufengImg/4.png" alt=""></li>
    </ul>
    <ol id="ol">
        <li class="bg"></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <button id="prev"><</button>
    <button id="next">></button>
</div>
<script>

    // 获取第一个图片 节点对象
    var firstImg = $('#ul li').first().clone();
    // 放在 ul 的最后
    $('#ul').append(firstImg).width($('#ul li').length*$('#ul img').width());

    var i = 0;

    var timer;

    autoPlay();

    // 下一张
    $('#next').click(function(){
        i++;
        moveImg(i);
    })


    // 上一张
    $('#prev').click(function(){
        i--;
        moveImg(i);
    })


    // auto play
    function autoPlay(){
        timer = setInterval(function(){
            i++;
            moveImg(i);
        }, 1000);

    }


    function moveImg(num){

        // 如果是最后一张图片我们怎么办
        if(i==$('#ul li').length){
            i = 1;
            $('#ul').css({left:0});
        }

        // 是第一张
        if(i==-1){
            i=$('#ul li').length-2;
            $('#ul').css({left:($('#ul li').length-1)*-800});
        }

        // 移动图片
        $('#ul').stop().animate({left:i*-800},400);

        // 换小点的标记
        if(i==($('#ul li').length-1)){
            $('#ol li').eq(0).addClass('bg').siblings().removeClass('bg');
        }else{
            $('#ol li').eq(i).addClass('bg').siblings().removeClass('bg');
        }
    }


    $('#play').mouseover(function(){
        $('#prev').show();
        $('#next').show();
        clearInterval(timer);
    }).mouseout(function(){
        $('#prev').hide();
        $('#next').hide();
        autoPlay();
    })


    // 点击小图标 跳转到指定的页面
    $('#ol li').click(function(){
        i = $(this).index();
        moveImg(i);
    })

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