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

来源：互联网发布：软件测试utf视频教程编辑：程序博客网时间：2024/04/29 21:11

图片轮播在网页中使用的非常广泛，制作的方法有很多，介绍一下我用调整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);//同setIntervalclearTimeout();//同clearInterval

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

0 0