轮播图CSS与JS实现-优快云博客

css代码

    <style type="text/css">
    *{
        padding:0px;
        margin:0px;
        list-style: none;
        font-family: "微软雅黑";
    }
    .banner{
        width:100%;
        position:relative;
    }
    .bannerImg{
        width:1200px;
        height:500px;   
        margin:0 auto;
        position:relative;
    }
    .bannerImg a {
        display:inline-block;
        position:absolute;
        top:0;
        left: 0;
    }
    .items{
        width:160px;
        height:20px;
        position:absolute;
        bottom:10px;
        left:45%;
    }
    .item{
        width:20px;
        line-height: 20px;
        text-align: center;
        float:left;
        margin-right: 10px;
        background-color: white;
        border-radius: 50%;
        font-size: 16px;
    }
    .zy{
        width:1200px;
        margin:0 auto;
    }
    .nius{
        width:1200px;
        height:100px;
        position:absolute;
        top: 200px;
        z-index: 10;
    }
    .niu{
        width:70px;
        height:100px;
        line-height: 100px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5);
        color:white;
        cursor: pointer;
    }
    .fl{
        float:left;
    }
    .fr{
        float: right;
    }
    </style>

html代码

</head>
<body>
    <div class="banner">
        <div class="bannerImg">
            <a href="" style="z-index:1"><img src="image/2.jpg" width="1200" height="500" alt="" /></a>
            <a href=""><img src="image/3.jpg" width="1200" height="500" alt="" /></a>
            <a href=""><img src="image/4.jpg" width="1200" height="500" alt="" /></a>
            <a href=""><img src="image/5.jpg" width="1200" height="500" alt="" /></a>
            <a href=""><img src="image/6.jpg" width="1200" height="500" alt="" /></a>
        </div>
        <ul class="items" style="z-index:99">
            <li class="item">1</li>
            <li class="item">2</li>
            <li class="item">3</li>
            <li class="item">4</li>
            <li class="item">5</li>
        </ul>
        <div class="zy">
            <div class="nius">
                <div class="niu fl" id="left">&lt;</div>
                <div class="niu fr" id="right">&gt;</div>
            </div>
        </div>
    </div>
</body>

script代码

//定义一个num，使它为0
var num = 0;
	//定义一个Img，获取每一个图片
var Img = document.getElementsByClassName("bannerImg")[0].getElementsByTagName("a")    
//定义一个li，获取每一个li
var li = document.getElementsByClassName("item")
//定义一个banner，获取外部的div
var banner = document.getElementsByClassName("banner")[0]

//判断点击事件
        function bannerauto(ooo){
            if (ooo=="r") {
                num++
                if (num>=Img.length) {
                num=0;
                }
            }
            else if(ooo=="l"){
                num--
                if (num<0) {
                    num=Img.length
                };
            }

			//循环，使所有图片的层级相同，li的背景颜色为白色
            for (var i = 0; i < Img.length; i++) {
                Img[i].style.zIndex="0"
                li[i].style.background="#fff"
            };
            //使点击切换的图片层级高于其他图片，并增加li的背景颜色
            Img[num].style.zIndex="1"
            li[num].style.background="orange"
            
        }
        //增加一个计时器，使图片自动切换，1000为毫秒数
        var mo=setInterval(function(){
            bannerauto("r")
        },1000)
        
        //循环，使li的下标等于i
            for (var i = 0; i < li.length; i++) {
                li[i].aaa = i
                //增加点击事件，点击li的每个下标时使对应的图片层级高于其他图片
                li[i].function(){
                    for (var j = 0; j < li.length; j++) {
                        Img[j].style.zIndex="0"
                        li[j].style.background="white"
                    };
                        this.style.background="orange"
                        Img[this.aaa].style.zIndex="1"
                        num=this.aaa			//使num等于点击图片时当前图片的下标
                }
            };
            //设置banner的鼠标移入事件，使移入使停止轮播，用clearIntval来清除
        banner.onmouseover =function(){
            clearInterval(mo);
        }
        //当鼠标移出时，再给他加上计时器让它重新开始轮播
        banner.function(){
            mo = setInterval(function(){
                bannerauto("r")
            },1000)
        }
        
        //给left设置点击事件，使点击时向左切换图片
        left.function(){
            bannerauto("l")
    }
    	//给right设置点击事件，使点击时向右切换图片
        right.function(){
            bannerauto("r")
    }
</script>

js实现轮播效果