jQuery轮播

最新推荐文章于 2021-05-08 17:52:12 发布
AAAAA人人爱
最新推荐文章于 2021-05-08 17:52:12 发布
阅读量172
点赞数
分类专栏： jQuery 文章标签： js jquery
本文链接：https://blog.csdn.net/m0_49301210/article/details/109188457
版权
jQuery 专栏收录该内容
2 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        #container{
            width: 600px;
            height: 400px;
            margin: 30px auto;
            position: relative;
            overflow: hidden;
        }

        #list{
            width: 4200px;
            height: 400px;
            position: absolute;
        }

        #list img{
            float: left;
        }
        
        #pointDiv{
            position: absolute;
            bottom: 20px;
            width: 80px;
            left: 260px;
        }
        
        #pointDiv span{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #333;
            border:1px solid #fff;
            float: left;
            margin-right: 5px;
        }

        #pointDiv .on{
            background: orangered;
        }

        #pointDiv span:last-child{
            margin-right: 0;
        }

        .arrow{
            position: absolute;
            cursor: pointer;
            color: #fff;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 32px;
            background: rgba(0,0,0,0.3);
            top: 180px;
        }

        .arrow:hover{
            background: rgba(0,0,0,0.7);
        }

        #prev{
            left: 20px;
        }

        #next{
            right: 20px;
        }

        #container:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="list" style="left:-600px">
            <img src="img/5.jpg" alt="">
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/4.jpg" alt="">
            <img src="img/5.jpg" alt="">
            <img src="img/1.jpg" alt="">
        </div>
        <div id="pointDiv">
            <span class="on"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <a href="javascript:;" id="prev" class="arrow"><</a>
        <a href="javascript:;" id="next" class="arrow">></a>
    </div>
    <script src="js/jquery.1.10.2.js"></script>
    <script>
    	$(function(){
    /*
    * 功能说明
    * 1.点击向左向右图片  图片滑动
    * 2.无限循环切换，第一页的上一页为最后页  最后一页的下一页为第一页
    * 3.每隔多久图片自动滑动下一页
    * 4.当鼠标移动图片区域时候  自动切换停止 鼠标离开 自动切换开启
    * 5.切换页面  圆点更新
    * 6.点击圆点切换到对应页
    * */

    var $container = $('#container');
    var $list = $('#list');
    var $points = $('#pointDiv span');
    var $prev = $('#prev');
    var $next = $('#next');
    var imgCount = $points.length;
    var index = 0;
    var PAGE_WIDTH = 600;
    var TIME = 400;//翻页持续时间
    var TIME_TIME = 20;//单元移动的持续时间
    var moving = false;//标识是否正在翻页

    // 1.点击向左向右图片  图片滑动
    $next.click(function(){
        nextPage(true);
    })
    $prev.click(function(){
        nextPage(false);
    })
    // 2.无限循环切换，第一页的上一页为最后页  最后一页的下一页为第一页
    var intervalId = setInterval(function(){
        nextPage(true);
    },3000)

    // 4.当鼠标移动图片区域时候  自动切换停止 鼠标离开 自动切换开启
    $('#container').hover(function(){
        clearInterval(intervalId)
    },function(){
        intervalId = setInterval(function(){
            nextPage(true);
        },3000)
    })
    // 6.点击圆点切换到对应页
    $points.click(function(){
        var targetIndex = $(this).index();
        if(targetIndex != index){
            nextPage(targetIndex);
        }
    })

    function nextPage(next){
        if(moving){
            return;
        }
        moving = true;//标识正在翻页
        //总的偏移量
        var offset = 0;
        if(typeof next == 'boolean'){
            offset = next ? -PAGE_WIDTH : PAGE_WIDTH;
        }else{
            offset = -(next-index) * PAGE_WIDTH;
        }
        //单元移动的偏移量   总的偏移量  /  一共的单元
        var itemOffset = offset/(TIME/TIME_TIME);
        //获取当前left的值
        var currLeft = $list.position().left;
        //目标处的值
        var targetLeft = currLeft + offset;
        console.log(targetLeft);
        /*
        * next为正  右移  left变小 速度为负  目标位置小于当前位置
        * left 0(-3000)  -600 -1200 -1800 -2400 -3000 -3600(-600)
        *
        * next为负  左移  left变大  速度为正  目标位置大于当前位置
        * */

        //启动定时器用来不断更新list的left值  到达目的地 定时器就要停止
        var intervalId = setInterval(function(){
            currLeft += itemOffset;
            if(currLeft == targetLeft){
                clearInterval(intervalId);
                //标识翻页停止
                moving = false;
                //如果到达了最右边的图片1.jpg,瞬间定位到第二张的1.jpg
                if(currLeft == -(imgCount + 1)* PAGE_WIDTH){
                    currLeft = -PAGE_WIDTH;
                //如果到达了最左边的图片5.jpg,瞬间定位到倒数第二张的5.jpg
                }else if(currLeft == 0){
                    currLeft = -imgCount * PAGE_WIDTH;
                }
            }
            $list.css('left',currLeft);
        },TIME_TIME)
        /*
        * index  0 ---- 6 1----5
        * targetIndex   0 --- 4
        * */

        updatePoints(next);
    }
    function updatePoints(next){
        var targetIndex = 0;
        if(typeof next == 'boolean'){
            if(next){
                targetIndex  = index + 1;
                if(targetIndex == imgCount){
                    targetIndex = 0;
                }
            }else{
                targetIndex = index -1;
                if(targetIndex == -1){
                    targetIndex = imgCount - 1;
                }
            }
        }else{
            targetIndex = next;
        }

        //将当前index的span  class移除
        $points[index].className = '';
        //给目标圆点添加
        $points[targetIndex].className = 'on';
        //更新index的值
        index = targetIndex;
    }
})
    </script>
</body>
</html>