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

分手后的思念是犯贱 2022-07-10 06:27 251阅读 0赞

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

设计思路：

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

![结构][SouthEast]

**效果图如下：**

![效果图][SouthEast 1]

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

**开发思路：**  
**首先设置一个容器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

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

[SouthEast]: /images/20220709/6743c36647974741896e882fae41b2eb.png
[SouthEast 1]: /images/20220709/7f22d0d684ea45528c7d403379f5ed83.png

发表评论取消回复

表情：

评论列表（有 0 条评论，251人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML+CSS+JavaScript制作简单轮播图

一运行效果 ![721bb117cd414f3d9313eea5f305f665.png][]二图片资源 ![d5bf4e2be4834ba5bedac1b3

女爷i/ 2024年02月05日 13:56/ 0 赞/ 62 阅读

相关使用原生JS制作简单的轮播图特效

使用原生JavaScript制作一个简答的图片轮播效果，没有实现动画。原理很简单，只需要使用DOM对象操作节点的添加和删除即可实现轮播功能，看一下效果图： ![在这里插入图

小咪咪/ 2023年03月12日 10:59/ 0 赞/ 7 阅读

相关用原生js制作简单轮播图、tab切换

轮播效果三种轮播效果：图片自动轮播、鼠标点击左右轮播、任意点击轮播第一步：规定大框并引入图片，将图片包裹在一个很宽的div中，且设置初始的偏移量为0px；第

╰半橙微兮°/ 2022年11月27日 12:10/ 0 赞/ 254 阅读

相关网页轮播图制作

网页轮播图制作轮播图也称为焦点图，是网页中比较常见的网页特效。功能需求： 1. 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 2. 点击右侧按钮一次，

淡淡的烟草味﹌/ 2022年10月08日 11:14/ 0 赞/ 235 阅读

相关 CSS快速制作图片轮播的焦点

来源：[http://www.ido321.com/858.html][http_www.ido321.com_858.html] 效果图： ![South

桃扇骨/ 2022年08月12日 20:58/ 0 赞/ 134 阅读

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

图片轮播在网页中使用的非常广泛，制作的方法有很多，介绍一下我用调整margin来实现3张图片轮播功能。设计思路： 1. 自动跳转。三张图片每隔3秒跳转一张，第三张图片跳

分手后的思念是犯贱/ 2022年07月10日 06:27/ 0 赞/ 252 阅读

相关纯js制作图片轮播效果

好久没有发博客了，最近都在复习，为了找工作做准备。前段时间逛了下鼠绘漫画网追海贼王最新漫画，发现他们家的图片轮播效果跟其他网页的图片轮播效果效果不同，看起来更加有趣，于是我

骑猪看日落/ 2022年06月13日 09:53/ 0 赞/ 268 阅读

相关简单的js制作轮播图

编辑html代码使用数据存入图片,操作数据的下标,设定setInterval方法,每隔几秒执行一次 <!DOCTYPE html> <html>

雨点打透心脏的1/2处/ 2022年05月12日 14:50/ 0 赞/ 233 阅读

相关 Unity 制作图片轮播功能

功能：自动播放移动首尾相接鼠标移到图片上时移动停止并该图片变大鼠标离开图片恢复原形轮播效果继续效果如下 ![70][] 界面布局大体是这个样子 s

以你之姓@/ 2022年05月08日 05:52/ 0 赞/ 954 阅读

相关 js制作简单的轮播图

今天帅帅学到了js部分就想简单的做一个小的轮播图,在网上也看过别人写的,决定自己尝试下–>>> 样例展示:图片需要自己替换: ![在这里插入图片描述][20181129

缺乏、安全感/ 2022年04月13日 11:57/ 0 赞/ 250 阅读