js实现左右轮播图效果

来源：互联网发布：手绘自拍软件编辑：程序博客网时间：2024/06/10 18:13

一般轮播图为左右、上下、3D或者渐变轮播，忙里偷闲写了一个左右轮播，该效果比较常见，但是实用性比较强。

<!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++;            },1000)        }        autoPlay();    </script></body></html>

直接借用了X宝首页的轮播图片，希望马大爷不要生气。

效果网址：轮播效果链接

0 0