轮播图思路以及用到的知识点

最新推荐文章于 2022-08-12 19:11:12 发布

原创最新推荐文章于 2022-08-12 19:11:12 发布 · 4.7k 阅读

17 ·

CC 4.0 BY-SA版权

本文详细介绍了轮播图的设计思路及实现步骤，包括图片层叠显示、底部圆点导航、自动切换效果、鼠标交互功能及左右滑动控制，通过HTML、CSS和JavaScript代码示例，帮助读者掌握轮播图制作技巧。

轮播图思路

轮播图思路：
1.首先所有的图片都是放在一个div中让它叠加起来的，设置层级让当前图片出现在最上面

2.为每个底部圆点按钮添加点击事件

3.用时间间隔函数让轮播图每隔两秒自动更新

4.鼠标移入事件和鼠标移除事件

5.添加左右点击事件,

css部分

//css部分
<style type="text/css">
    *{
        margin:0;
       padding:0;
        list-style: none;
        font-family: "微软雅黑";
    }
    .banner{
        width:590px;
        height:470px;
        position:relative;
        margin:0 auto;
    }
    .bannerImg{
        width:590px;
        height:470px;
        position:relative;
    }
    .bannerImg a{
        display:block;
        width:590px;
        height:470px;
        position:absolute;
        left:0px;
        top:0px;
    }
    .items{
        width:150px;
        height:16px;
        position:absolute;
        left: 200px;
        bottom: 20px;
        z-index: 999;
    }
    .items li{
        
        height:16px;
        width:16px;
        float:left;
        margin-right: 8px;
        background:#fff;
        text-align: center;
        line-height: 16px;
        border-radius: 50%;
    }
</style>

HTML部分

//html部分
<body>
    <div class="banner">
        <div class="bannerImg">
            <a href="javascript" style="z-index:1;"><img src="image/w1.jpg" height="470px" width="590px" alt="" /></a> //z-index=1是为了让这张图片显示在最上层
            <a href="javascript"><img src="image/w2.jpg" height="470" width="590"  alt="" /></a> 
            <a href="javascript"><img src="image/w3.jpg" height="470" width="590" alt="" /></a>
            <a href="javascript"><img src="image/w4.jpg" height="470" width="590" alt="" /></a>
            <a href="javascript"><img src="image/w5.jpg" height="470" width="590" alt="" /></a>
            <a href="javascript"><img src="image/w6.jpg" height="470" width="590" alt="" /></a>
        </div>
        <ul class="items">
            <li style="background:pink">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
    <div class="btnBox">
        <div class="btn fl" id="left">&lt;</div>
        <div class="btn fr" id="right">&gt;</div>            
    </div>
</body>

js部分


//js部分
<script type="text/javascript">
    var num = 0 ;
    var Img = document.getElementsByClassName("bannerImg")[0].getElementsByTagName("a");//获取图片 获取类名和id时需要加[] 表示下标
    var li = document.getElementsByTagName("li");//获取数字12345
    var banner = document.getElementsByClassName("banner")[0];//获取放图片的整个盒子
    function  bannerAuto(adress) {
        for (var i = 0; i < Img.length; i++) { //循环是让每张图片和li全都有个默认状态，层级为0，背景为白色
            Img[i].style.zIndex = "0";
            li[i].style.background ="#fff";
        };

        Img[num].style.zIndex ="1";      //让当前的图片层级为1，背景为粉色
        li[num].style.background ="pink";
        if(adress =="right"){     //判断图片是从左往右的顺序还是从右往左
            num++;
             if(num>=Img.length){
                num=0;
            }
        }else if(adress =="left"){
            num--;
            if(num<0){
                num=Img.length-1;
            }
        }
        
    }
    var move=setInterval(function(){    //给轮播图添加时间函数
        bannerAuto("right")            //right轮播图是从左往右间隔两秒刷新一次
    },2000);

    for (var i = 0; i < li.length; i++) {   
        li[i].index = i;          //存放li的下标
        li[i].onclick = function(){        
            for (var j = 0; j < Img.length; j++) {
                 Img[j].style.zIndex = "0";          //当点击li时先让所有的图片层级为0，li背景为白色
                 li[j].style.background = "#fff";
            };
            this.style.background="pink";    //this指当前点击的li，让当前点击的图片层级为1，li的背景为粉色
            Img[this.index].style.zIndex= "1";
            num = this.index; //关联 点击的下标和num值，也就是自动轮播的下标
        }
    };
    //鼠标移入和鼠标移除事件
    banner.onmouseover =function (){
       clearInterval(move);  //当鼠标移到盒子上时清楚轮播图的时间函数，让图片停止播放
    };
    banner.onmouseout=function() {  //当鼠标移开时继续执行轮播图的时间函数
        move=setInterval(function(){   //setiInterval后面要加方法
        bannerAuto("right")      
    },2000);
    };
    //左右两边单击事件
    left.onclick=function(){    //单击左边执行left向左轮播的函数
         bannerAuto("left")
    };
    right.onclick=function(){
        bannerAuto("right")      ////单击右边执行left向右轮播的函数
    }
</script>

用到的知识点

setInterval(）

onmouseover

onmouseout

for循环

onclick