JS制作简单图片轮播--通过调整margin制作

最新推荐文章于 2023-06-11 12:37:45 发布

1091214370的博客

最新推荐文章于 2023-06-11 12:37:45 发布

阅读量1.6k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_34149935/article/details/57150942

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

图片轮播在网页中使用的非常广泛，制作的方法有很多，介绍一下我用调整margin来实现3张图片轮播功能。

设计思路：

自动跳转。三张图片每隔3秒跳转一张，第三张图片跳转完成后，3秒后跳转至第一张图片。
鼠标控制。通过鼠标点击跳转按钮完成跳转。向左向右跳转，同上第3张后是第一张，相反方向时，第一张后是第三张。
注意实项。鼠标点击跳转时，自动跳转停止。

效果图如下：

效果图

由于录屏软件原因导致效果不是很好。见谅

开发思路：
首先设置一个容器ul的width为300%，ul子元素li的width为30%（ul的30%即为屏幕的100%），
跳转一次，ul的margin-left属性增加 -100%，即第一张图片ul{margin-left：0；}、第二张图片ul{margin-left：-100%；}、第三张图片ul{margin-left：-200%；}
使用setInterval 控制延时循环，通过JS进行计算，保证图片轮播效果。

<style>
//css样式
li{list-style:none;}
#head{width:100%;height:600px;overflow: hidden;}
#head ul{width:300%;height:600px;margin-top:0;padding:0;}
#head ul li{width:30%;height:590px;padding: 0;float:left;display: block;margin:0 1.66%;}
#head #listico{width: 100px;height:30px;position:absolute;margin:-10% 0 0 45%;z-index:2;}
#head #listico ul{display: block;width: 120px;height:30px;}
#head #listico ul li{width:30px;height:30px;float:left;display: block;font-size: 20px;color:white;margin-left: 5%;text-align: center;border-radius: 25%;padding-top: 4px;}
#head #turnleft{width:40px;height:100px;float: left;margin-top:-400px;margin-left:50px;position:relative;z-index: 1;border:none;}
#head #turnright{width:40px;height:100px;float: right;margin-top:-400px;margin-right:50px;position:relative;z-index: 1;border:none;}
#head #road #road-li-f{background-color: red;}
#head #road #road-li-s{background-color: yellow;}
#head #road #road-li-t{background-color: green;}
.class-blue{background: blue;}
</style>
<body>
    <div id="head">
        //road是承载3张图片的容器，每个li内存放一张图片，这里使用背景颜色代替图片，ul的宽度是li的三倍，让三张li平铺。
            <ul id="road">
                <li id="road-li-f"></li>
                <li id="road-li-s"></li>
                <li id="road-li-t"></li>
            </ul>
            <button id="turnleft"><</button>//向左
            <button id="turnright">></button>//向右
            <div id="listico">
            <ul>//页数
                <li id="ol-f" class="class-blue">1</li>
                <li id="ol-s">2</li>
                <li id="ol-t">3</li>
            </ul>
            </div>
        </div>
</body>

js代码如下：

window.onload=function (){
    var tl =document.getElementById("turnright");
    var tr =document.getElementById("turnleft");
    var road =document.getElementById("road");
    var olaf=document.getElementById("ol-f");
    var olas=document.getElementById("ol-s");
    var olat=document.getElementById("ol-t");
    var timeId=null;
    var i=0;
    function listTime(){//页数的颜色变化
            switch(i){
                case 0:
                olaf.style.background="blue"
                olas.style.background="none"
                olat.style.background="none"
                break;
                case 1:
                olaf.style.background="none"
                olas.style.background="blue"
                olat.style.background="none"
                break;
                case 2:
                olaf.style.background="none"
                olas.style.background="none"
                olat.style.background="blue"
                break;

            }
    }   
    function tpturnLeft(){//向左
        i+=2;
        i=i%3;
        listTime();
        if(i>0&&i<3){
            var si =(100 * i);
            road.style.marginLeft="-"+si+"%";
        }else{
            road.style.marginLeft="0";
            i=0;
        }
    }
    function tpturnRight(){//向右
        i+=1;
        i=i%3;
        listTime();
        if(i>0&&i<3){
            var si =100 * i;
            road.style.marginLeft="-"+si+"%";
        }else{
            road.style.marginLeft=0;
            i=0;
        }
    }
    timeId=setInterval(tpturnRight,3000);//自动轮播，3秒一次
    tl.onclick=function(){//鼠标控制轮播
        if(timeId){//鼠标点击时，清除自动轮播
            clearInterval(timeId);
            timeId=null;
        }
        tpturnRight();
        timeId=setInterval(tpturnRight,3000);//鼠标操作后三秒无操作时，转为自动轮播
    }
    tr.onclick=function(){//鼠标控制轮播
        if(timeId){//鼠标点击时，清除自动轮播
            clearInterval(timeId);  
            timeId=null;
        }
        tpturnLeft();
        timeId=setInterval(tpturnRight,3000);//鼠标操作后三秒无操作时，转为自动轮播
    }

}

补充：JS里面，控制延时的除了setInterval外还有一个，setTimeout.他们的区别最简单的就是前者可以循环执行，后仅一次。

setInterval（function, time）;//function为要执行的函数，time为延时时间，单位是毫秒。
clearInterval();对应的清除
setTimeout(function, time);//同setInterval
clearTimeout();//同clearInterval

以上是作者自己的思路，求交流，求指正。