轮播图效果

最新推荐文章于 2022-05-18 19:23:12 发布

原创最新推荐文章于 2022-05-18 19:23:12 发布 · 649 阅读

0 ·

CC 4.0 BY-SA版权

01前端基础教程html_css_js 专栏收录该内容

78 篇文章

订阅专栏

本文详细探讨了如何创建复杂的轮播图效果，包括动画过渡、自动切换、触控滑动等功能，适合前端开发者参考学习。

比较复杂，好好看。。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        img{
            vertical-align: top;
        }
        #all{
            width: 730px;
            height: 454px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }
        .screen{
            width: 730px;
            height: 454px;
            overflow: hidden;
            position: relative;
        }
        #ul{
            width: 4000%;
            position: absolute;
            top: 0;
            left: 0;
            list-style: none;
        }
        #ul li{
            width: 730px;
            height: 454px;
            overflow: hidden;
            float: left;
        }
        .all ol{
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }
        .all ol li{
            width: 20px;
            height: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
            float: left;
        }
        .all ol li.current{
            background-color: yellow;
        }
    </style>
    <script>
        function animate(obj,target){
            clearInterval(obj.timer); //先清除定时器
            var speed = obj.offsetLeft < target ? 15 : -15;//判断是进还是退后，是+还是-
            obj.timer = setInterval(function(){
                var result = target - obj.offsetLeft;//因为他们的差值肯定小于5
                obj.style.left = obj.offsetLeft + speed + "px";
                if(Math.abs(result)<=15){//如果差值小于5说明位置到了
                    clearInterval(obj.timer);
                    obj.style.left = target + "px"; //有5像素差距，直接跳到target位置。
                }
            },10);
        }
        window.onload = function () {
            var all = document.getElementById("all");
            var ul = document.getElementById("ul");
            var ulLis = ul.children;
            //1.克隆第一张图片放到ul最后
            ul.appendChild(ul.children[0].cloneNode(true));
            //2.创建ol和li
            var ol = document.createElement("ol");
            all.appendChild(ol);
            for(var i=0;i<ulLis.length-1;i++){
                var li = document.createElement("li");
                li.innerHTML = i+1;
                ol.appendChild(li);
            }
            ol.children[0].className = "current";
            //3.开始动画部分
            //3.1鼠标放到ol下的li上的时候，当前变亮，其他不变亮
            var olLis = ol.children;
            for(var i=0;i<olLis.length;i++){
                olLis[i].index = i;
                olLis[i].onmouseover = function () {
                    for(var j=0;j<olLis.length;j++){
                        olLis[j].className = "";
                    }
                    this.className = "current";
                    animate(ul,-this.index*ul.children[0].offsetWidth);//调用动画函数
                }
            }
            //4.添加定时器
            var timer = null;//轮播图定时器
            var key = 0; //控制播放张数
            var square = 0; //控制小方块
            timer = setInterval(autoplay,5000);//开始轮播图定时器
            function autoplay(){
                key++; //先++
                if(key>ulLis.length-1){ //后判断
                    ul.style.left = 0;//迅速跳回
                    key = 1;//因为第6张就是第一张 第6张播放 下次播放第二张
                }
                animate(ul,-key*ul.children[0].offsetWidth); //再执行

                //小方块
                square++;
                if(square > olLis.length-1){
                    square = 0;
                }
                for(var i=0;i<olLis.length;i++){ //先清除所有的
                    olLis[i].className ="";
                }
                olLis[square].className = "current";//留下当前的
            }
            //last最后 鼠标经过大盒子要停止定时器
            all.onmouseover = function () {
                clearInterval(timer);
            }
            all.onmouseout = function () {
                timer = setInterval(autoplay,5000);//开始轮播图定时器
            }
        }
    </script>
</head>
<body>
    <div class="all" id="all">
        <div class="screen">
            <ul id="ul">
                <li><img src="images/1.jpg" alt=""/></li>
                <li><img src="images/2.jpg" alt=""/></li>
                <li><img src="images/3.jpg" alt=""/></li>
                <li><img src="images/4.jpg" alt=""/></li>
                <li><img src="images/5.jpg" alt=""/></li>
            </ul>
        </div>

    </div>
</body>
</html>