原生js 实现无缝轮播图模仿某宝

最新推荐文章于 2021-04-16 16:06:16 发布

置顶林中明月间。

最新推荐文章于 2021-04-16 16:06:16 发布

阅读量290

点赞数

分类专栏： Js、Jq轮播图、切换文章标签：无缝轮播图、淘宝

本文链接：https://blog.csdn.net/a772116804/article/details/79542562

版权

Js、Jq轮播图、切换专栏收录该内容

28 篇文章 1 订阅

订阅专栏

转自：http://blog.csdn.net/qq545698514/article/details/53607053

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <style>  
        *{ padding: 0; margin: 0;}  
        div{  
            width: 520px;  
            height: 280px;  
            border:1px solid gold;  
            margin:100px auto;  
            overflow: hidden;  
            position:relative;  
        }  
        li{  
            list-style:none;  
        }  
        ul:first-child{  
            width: 9999px;  
            overflow: hidden;  
            position:absolute;  
            transition:all 0.5s;//过渡效果0.5s  
        }  
        ul:first-child li{  
            float:left;  
            width: 520px;  
            height: 280px;  
        }  
        ul:last-child{  
            width: 100px;  
            height: 15px;  
            background-color:rgba(0,0,0,.5);  
            border-radius:10px;  
            position: absolute;  
            bottom:10px;  
            left:50%;  
            margin-left:-50px;  
        }  
        ul:last-child li:first-child{  
            margin-left:4px;  
        }  
        ul:last-child li{  
            cursor:pointer;  
            float:left;  
            width: 15px;  
            height: 15px;  
            margin-right:4px;  
            background-color: #ccc;  
            border-radius: 50%;  
        }  
        ul:last-child li.star{  
            background-color: gold;  
        }  
    </style>  
</head>  
<body>  
    <div>  
        <ul id="banner">  
            <li><img src="img/banner1/1.jpg" alt=""></li>  
            <li><img src="img/banner1/2.jpg" alt=""></li>  
            <li><img src="img/banner1/3.jpg" alt=""></li>  
            <li><img src="img/banner1/4.jpg" alt=""></li>  
            <li><img src="img/banner1/5.jpg" alt=""></li>  
        </ul>  
        <ul id="controls">  
            <li class="star"></li>  
            <li></li>  
            <li></li>  
            <li></li>  
            <li></li>  
        </ul>  
    </div>  
    <script>  
        var g=function(node){  
            if(node.substr(0,1)=="#"){  
                return document.getElementById(node.substr(1));  
            }  
        }  
        var banner=g("#banner");  
        var controls=g("#controls");  
        var controlsLis=controls.getElementsByTagName("li");  
        var timer=null;//设置定时器  
        var num=0;  
        for(var i=0;i<controlsLis.length;i++){  
            controlsLis[i].index=i;  
            controlsLis[i].onclick=function(){  
                clearInterval(timer);  
                for(var j=0;j<controlsLis.length;j++){  
                    controlsLis[j].className=''//把所有的控制按钮颜色都去掉  
                }  
                this.className='star';//当前点击的按钮变色  
                banner.style.left=-520*this.index+"px";  
                num=this.index;  
                autoPlay();  
            }  
        }  
        function autoPlay(){  
            timer=setInterval(function(){  
                if(num>4){  
                    num=0;  
                }  
                for(var j=0;j<controlsLis.length;j++){  
                    controlsLis[j].className=''//把所有的控制按钮颜色都去掉  
                }  
                controlsLis[num].className='star';  
                banner.style.left=-520*num+"px";  
                num++;  
            },2000)  
        }  
        autoPlay();  
    </script>  
</body>  
</html>