js实现左右轮播图效果

最新推荐文章于 2024-06-29 23:13:31 发布

夏末终秋凉

最新推荐文章于 2024-06-29 23:13:31 发布

阅读量9.8k

点赞数 10

分类专栏： javascript html css 技术天地文章标签： javascript css html 前端 css3

本文链接：https://blog.csdn.net/qq545698514/article/details/53607053

版权

css 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

javascript

9 篇文章 0 订阅

订阅专栏

一般轮播图为左右、上下、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].οnclick=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宝首页的轮播图片，希望马大爷不要生气。

效果网址：轮播效果链接