Html网页显示js轮播图

JS轮播图（⽆缝连接的轮播图实现，含代码供参考）需求：实现轮播图，图⽚⽆缝切换，⾃动播放。

实现效果：思考⼀下：在图⽚列表后⾯多加⼀张图⽚，这张图⽚是第⼀张图⽚（为了确保⽆缝衔接）。

图⽚就是平铺放在⼀个pic⾥⾯的，每次移动就是改变的pic的left值。

来撸代码~~。

所有的代码放在最后⾯，这⾥只讲⼀些重要的⽅法：为防⽌懵逼：先贴出封装函数move()的代码供参考function move(ele, attr, speed, target, callback){//获取当前的位置//从左往右进⾏移动 --- current<target speed//从右往左进⾏移动 --- current>target -speedvar current = parseInt(getStyle(ele, attr));// 810 > 800if(current>target){speed = -speed;}//定时器累加问题 --- 先清除再开启clearInterval(ele.timer);ele.timer = setInterval(function(){//获取元素的现在位置var begin = parseInt(getStyle(ele, attr));//步长var step = begin + speed;//判断当step>800, 让step = 800//从左往右进⾏移动 --- speed>0 正值//从右往左进⾏移动 --- speed<0 负值// -10 0 10 超过800直接变成 800if(speed<0 && step<target || speed>0 && step>target){step = target;}//赋值元素ele.style[attr] = step + "px";//让元素到达⽬标值时停⽌ 800pxif(step == target){clearInterval(ele.timer);//当move函数执⾏完毕后, 就执⾏它了//当条件都满⾜时才执⾏callback回调函数callback && callback();}},30)//步长是30}第⼀步：我们先来实现那个圆形按钮的点击事件。

HTML+CSS+JavaScript实现轮播图从mooc⽹站哔哩哔哩上学到的：视频BV号为BV16W41127aQ和BV1hW411y79J，up:红点⼯⼚HTML<div class="lunboContainer"><div class="lunboLeft"><!--轮播图向左移动--><img src="选择您的路径/icon-slides.png" id="leftImg"></div><div class="lunboRight"><!--轮播图向右移动--><img src="选择您的路径/icon-slides.png" id="rightImg"></div><ul id="imgList"><li class="item active"><img src="选择您的路径/1.jpg"></li><li class="item"><img src="选择您的路径/2.jpg"></li><li class="item"><img src="选择您的路径/3.jpg"></li><li class="item"><img src="选择您的路径/4.jpg"></li><li class="item"><img src="选择您的路径/5.jpg"></li></ul><ul id="pointList"><!-- 轮播图下⾯的⼩点点，点哪个点显⽰对应的图⽚--><li class="point active" data-index='0'></li><li class="point" data-index='1'></li><li class="point" data-index='2'></li><li class="point" data-index='3'></li><li class="point" data-index='4'></li></ul></div>CSS.lunboContainer{width:100%;height:400px;margin:0 auto;position:relative;}.lunboLeft{position:absolute;z-index:10;margin-left:0px;margin-top:130px;width:60px;height:100px;overflow:hidden;}.lunboLeft img{height:100px;margin-left:-120px;}.lunboRight{position:absolute;z-index:10;right:0px;margin-top:130px;width:60px;height:100px;overflow:hidden;}.lunboRight img{height:100px;margin-left:-180px;}#imgList{width:100%;height:400px;padding:0; /* padding 设置0 */margin:0; /* margin 设置0 */position:relative;}.item{position:absolute;width:100%;list-style-type: none;height:100%;float: left;opacity:0;transition:opacity 1s;}.lunboContainer ul img{width:100%;height:100%;.item.active{opacity:1;z-index:5;}#pointList{padding:0;list-style-type: none;position:absolute;right:20px;bottom:20px;z-index:10;}.point{width:8px;height:8px;border-radius:100%;background-color:rgb(10,10,10);float:left;z-index:10;margin-right:18px;border-style:solid;border-width:2px;border-color:white;cursor:pointer;}.point.active{background-color:rgba(255,255,255,0.6);}//为正在显⽰的点点设置特殊样式Javascriptvar index=0;var imgs=document.getElementsByClassName("item");//图⽚var leftImg=document.getElementById("leftImg");//向左var rightImg=document.getElementById('rightImg');//向右var points=document.getElementsByClassName("point");//⼩点点var timeOut=0;function clearActive(){for(var i=0;i<imgs.length;i++){imgs[i].className='item';points[i].className='point';}}function goNext(){clearActive();index++;index=index%imgs.length;imgs[index].className='item active';points[index].className='point active';timeOut=0;}function goPre(){clearActive();index--;if(index<0){index=imgs.length-1;}imgs[index].className='item active';points[index].className='point active';}/*当⿏标悬停在向左向右的图⽚上⽅时需要改变图⽚样式使⽤户得到相应的反馈，这⾥学习了⼩⽶商城主页轮播图的做法，只⽤⼀张图⽚，通过改变这张图⽚到边界的距离实现样式改变*/ function preHover(){leftImg.style.marginLeft="0px";}function nextHover(){rightImg.style.marginLeft="-60px";}function preHout(){leftImg.style.marginLeft="-120px";}function nextHout(){rightImg.style.marginLeft="-180px";}/*************************************************/function jmpByPoint(pointIndex){clearActive();index=pointIndex;imgs[index].className="item active";points[index].className='point active';timeOut=0;}for(var i=0;i<points.length;i++){points[i].addEventListener('click',function(){var pointIndex=this.getAttribute("data-index");jmpByPoint(pointIndex);}leftImg.addEventListener('click',function(){goPre();})leftImg.addEventListener('mouseover',function(){preHover();})leftImg.addEventListener('mouseout',function(){preHout();})rightImg.addEventListener('click',function(){goNext();})rightImg.addEventListener('mouseover',function(){nextHover();})rightImg.addEventListener('mouseout',function(){nextHout();})setInterval(function(){timeOut++;if(timeOut==10){goNext();timeOut=0;}},500)/*此⽅法使得timeOut参数每隔0.5（500ms）秒加⼀，当timeOut加到10时（即5秒）显⽰下⼀张图⽚，同时timeOut清零，使⽤timeOut参数⽽不直接使⽤setInterval(fun(),5000)函数定时的⽬的在于：假设当⽤户点击点点跳到某张图⽚时，距离到达5000毫秒只剩⼀丝丝时间，那张图⽚就马上跳⾛了，⽽⽤户可能还没来得及看清除图⽚，使⽤timeOut定时后，当⽤户通过点跳转之后，将timeOut参数清零，可实现重新计时，就不会马上跳⾛，见function jmpByPoint(pointIndex)；*/。

Html、js图片轮播代码现在基本上每个网站都有一个自动轮播的banner广告图，在没有任何按钮的情况下，图片在规定的时间内进行自动切换。

下面是html、js 图片轮播代码详情。

代码效果图实例：第一秒：第二秒：第三秒：详细代码如下：Html代码部分：<body><ul class="banner"><li><img src="images/1.jpg"></li><li><img src="images/2.jpg"></li><li><img src="images/3.jpg"></li></ul></body>Css代码部分：<style type="text/css">ul,li{margin:0px;padding:0px}li{list-style:none}.banner{width:630px;height:250px;margin:100px auto;overflow:hidden;cursor:pointer} </style>Javascript代码部分：<script type="text/javascript"src="jquery.js"></script><script type="text/javascript">$(function(){var timer=setInterval(function(){if($(".banner li:last").is(":hidden")){$(".banner li:visible").addClass("on");$(".banner li[class=on]").next().fadeIn("slow");$(".banner li[class=on]").hide().removeClass("on");}else{$(".banner li:last").hide();$(".banner li:first").fadeIn("slow");}},2000)$(".banner li").hover(function(){clearInterval(timer);},function(){timer=setInterval(function(){if($(".banner li:last").is(":hidden")){$(".banner li:visible").addClass("on");$(".banner li[class=on]").next().fadeIn("slow");$(".banner li[class=on]").hide().removeClass("on");}else{$(".banner li:last").hide();$(".banner li:first").fadeIn("slow");}},2000)})})</script>【Jquery.js】是一个jquery库，只要百度一下搜索“jquery”下载这个文件就行。

前端开发技术之图片轮播效果实现随着网页设计的重要性不断增加，用户对于页面的视觉体验要求也越来越高。

作为前端开发人员，我们常常需要通过各种方式来提升页面的吸引力。

其中，图片轮播效果是非常常见而且实用的一种手段。

本文将介绍几种常见的图片轮播效果实现方式。

一、基本的自动轮播效果自动轮播效果是最常见的一种图片轮播方式。

通过自动切换图片，可以展示多张图片内容，给用户提供更多的信息。

在实现自动轮播效果时，常常使用JavaScript和CSS来完成。

1. HTML结构首先，我们需要创建一个容器来显示图片内容。

在HTML代码中，可以使用`<div>`元素作为容器，并设置一个唯一的ID，如"slider"。

在容器内部，可以使用`<img>`元素来插入图片，并使用CSS来设置图片的样式。

```<div id="slider"><img src="image1.jpg" alt="Image 1"><img src="image2.jpg" alt="Image 2"><img src="image3.jpg" alt="Image 3"></div>```2. CSS样式接下来，我们需要通过CSS来设置容器和图片的样式。

首先，我们可以设置容器的宽度和高度，并设置`overflow: hidden`来隐藏超出容器的部分。

然后，可以设置每个图片的宽度和高度，并使用`position: absolute`将它们叠加在一起。

最后，我们可以通过设置`left`和`top`属性，将图片按需求进行定位。

```#slider {width: 500px;height: 300px;overflow: hidden;position: relative;}#slider img {width: 100%;height: 100%;position: absolute;left: 0;top: 0;transition: opacity 1s;}```3. JavaScript代码最后，我们需要使用JavaScript来实现图片的切换效果。

js轮播图原理JavaScript轮播图是网页开发中常见的功能之一，它可以让页面上的图片或内容实现自动轮播或手动切换，为用户提供更好的浏览体验。

本文将介绍JavaScript轮播图的原理及实现方法。

首先，我们需要了解JavaScript轮播图的基本原理。

JavaScript轮播图通常由HTML、CSS和JavaScript三部分组成。

HTML负责构建轮播图的结构，包括图片、按钮等元素；CSS负责样式的设置，比如图片的大小、位置、过渡效果等；JavaScript则负责控制轮播图的行为，比如自动播放、手动切换、按钮点击事件等。

在实现JavaScript轮播图时，我们可以借助HTML的结构和CSS的样式，然后通过JavaScript来控制轮播图的行为。

首先，我们需要在HTML中创建轮播图的结构，通常是一个包裹图片的容器，以及用于切换的按钮或指示器。

然后，通过CSS来设置轮播图的样式，比如设置容器的宽度和高度、隐藏超出部分、设置过渡效果等。

接下来，我们需要使用JavaScript来实现轮播图的功能。

首先，我们可以定义一个变量来存储当前显示的图片索引，然后通过定时器来实现自动播放的功能。

当定时器触发时，我们可以通过改变图片容器的位置或透明度来实现图片的切换效果。

同时，我们还可以监听按钮或指示器的点击事件，通过改变当前显示的图片索引来实现手动切换的功能。

除了基本的轮播功能，我们还可以通过JavaScript来实现一些高级的特效，比如淡入淡出效果、滑动效果、缩放效果等，这些都可以通过改变图片容器的样式来实现。

总的来说，JavaScript轮播图的原理并不复杂，通过HTML、CSS和JavaScript的配合，我们可以实现各种各样的轮播效果。

希望本文能够帮助你更好地理解JavaScript轮播图的原理及实现方法。

两种⽅法实现显⽰多张图⽚的轮播两种⽅法实现显⽰多张图⽚的轮播第⼀种：jQuery ⽅法.animate + 浮动排列布局1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="utf-8" />5 <title>显⽰多张图⽚的轮播</title>6 <style type="text/css">7 html,body{8 padding:0;9 margin:10px auto;10 }11 #warpper{12 width:1120px;/*⼀列展⽰⼏个的宽度 ,4*280 动态算*/13 height:150px;14 margin:0 auto;15 position:relative;16 overflow:hidden;17 border:1px solid red;18 }19 #inner{20/*元素个数*280(div宽度) 动态算 1120px[4个元素] 1440px[5个元素] 1680px[6个元素] 2240px[8个元素]21⽤JS动态设置改值22*/23 width:2520px;24 position:absolute;25 }26 #inner div{27 width:270px;28 height:150px;29/*使⽤浮动元素排列*/30float:left;31 margin:0 5px;32 }33 #optrbtn{34 text-align:center;35 font-size:20px;36 }37 #optrbtn span {38 display:inline-table;39 border:1px solid red;40 width:50px;41 cursor:pointer;42 margin-right:5px;43 }44 #inner div img{45 width: 100%;46 height: 100%;47 }48 </style>4950 <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>51 <script type="text/javascript">5253 $(function(){5455var curNum=0;56var count=$("#inner").children('div').length;//85758//左滑动59 $(".btnleft").click(function(){60//如果到了最后⼀个元素，停⽌61if((count-curNum)<=4){62return false;63 }64 curNum+=1;65 $("#inner").animate({66// 每次点击都从左边裁剪280像素67 left:'-=280'68 },500);69 });7071//右滑动72 $(".btnright").click(function(){73//如果到了第⼀个元素，停⽌74if(curNum<=0){75return false;76 }77 curNum-=1;78 $("#inner").animate({79// 每次点击都从左边补充280像素80 left:'+=280'81 },500);82 });83 });8485 </script>86 </head>8788 <body>8990 <div id="main">91 <div id="warpper">92 <div id="inner">93 <div><img src="../img/sucai/full1.jpg"/></div>94 <div><img src="../img/sucai/full2.jpg"/></div>95 <div><img src="../img/sucai/full3.jpg"/></div>96 <div><img src="../img/sucai/full4.jpg"/></div>97 <div><img src="../img/sucai/full5.jpg"/></div>98 <div><img src="../img/sucai/full6.jpg"/></div>99 <div><img src="../img/sucai/full7.jpg"/></div>100 <div><img src="../img/sucai/full8.jpg"/></div>101 <div><img src="../img/sucai/full9.jpg"/></div>102 </div>103 </div>104 </div>105106 <br />107 <br />108109 <div id="optrbtn">110 <span class="btnleft">«</span>111 <span class="btnright">»</span>112 </div>113114 </body>115 </html>第⼆种：负边距 + flex排列布局1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>显⽰多张图⽚的轮播</title>6 <style type="text/css" rel="stylesheet">7 *{8 margin: 0;9 padding: 0;10 }11 #main{12 width: 100%;13 height: 125px;14 display: flex;15 margin-top: 120px;16 }17 #d1{18 width: 1162px;19 height: 125px;20 display: flex;21 overflow:hidden;22 }23 #d11{24 width: 64px;25 height: 125px;26 line-height: 125px;27 text-align: center;28 font-size: 28px;29 cursor: pointer;30 z-index: 2;31 background: #FFFFFF;32 }33 #d13{34 width: 64px;35 height: 125px;36 line-height: 125px;37 text-align: center;38 font-size: 28px;39 cursor: pointer;40 z-index: 2;41 background: #FFFFFF;42 }43 #d12{44/*元素个数*207(div宽度) 动态算 828px[4个元素] 1035px[5个元素] 1242px[6个元素] 2070px[10个元素] 45⽤JS动态设置改值46*/47/*先预设⾜够放10张图⽚的宽度*/48 width: 2070px;49 height: 125px;50/*使⽤弹性布局排列*/51 display: flex;52 transition:all 0.3s linear 0s;53/*再将多出来的5张图⽚的宽度⽤负边距隐藏起来*/54 margin-right: -1035px;55 }56 #d12 .d120{57 width: 207px;58 height: 125px;59 z-index: 1;60 }61 .ddd{62 width: 170px;63 height: 80px;64 margin-left: 18px;65 margin-top: 23px;66 }67 .ddd img{68 width: 100%;69 height: 100%;70 }71 </style>72 </head>73 <body>7475 <div id="main">76 <div style="width: 102px;height:125px;background: #FFFFFF;z-index: 3;"></div>77 <div id="d1">78 <div id="d11">《</div>79 <div id="d12">80 <div class="d121 d120"><div class="ddd"><img src="../img/sucai/full1.jpg"></div></div>81 <div class="d122 d120"><div class="ddd"><img src="../img/sucai/full2.jpg"></div></div>82 <div class="d121 d120"><div class="ddd"><img src="../img/sucai/full3.jpg"></div></div>83 <div class="d122 d120"><div class="ddd"><img src="../img/sucai/full4.jpg"></div></div>84 <div class="d121 d120"><div class="ddd"><img src="../img/sucai/full5.jpg"></div></div>85 <div class="d122 d120"><div class="ddd"><img src="../img/sucai/full6.jpg"></div></div>86 <div class="d121 d120"><div class="ddd"><img src="../img/sucai/full7.jpg"></div></div>87 <div class="d122 d120"><div class="ddd"><img src="../img/sucai/full8.jpg"></div></div>88 <div class="d121 d120"><div class="ddd"><img src="../img/sucai/full9.jpg"></div></div>89 <div class="d122 d120"><div class="ddd"><img src="../img/sucai/full1.jpg"></div></div>90 </div>91 <div id="d13">》</div>92 </div>93 <div style="width: 102px;height:125px;background: #FFFFFF;z-index: 3;"></div>94 </div>9596 </body>97 <script type="text/javascript">9899 let $ = function(id){100return document.getElementById(id);101 };102103//移动的宽度104var moveLength = 0;105106// 右移107 $("d13").addEventListener("click",function () {108 moveLength +=207;109// 判断移动的宽度有没有超出5张图⽚的宽度，如果超出，则减掉⼀张图⽚的宽度110if (moveLength<=1035){111 $("d12").style = "transform:translateX(-"+moveLength+"px);"112 }else if(moveLength>1035){113 moveLength -= 207;114 }115 });116117// 定时器，每个3秒移动⼀次118 setInterval(function () {119 moveLength +=207;120if (moveLength<=1035){//是否移动到尽头121 $("d12").style = "transform:translateX(-"+moveLength+"px);"122 }else if(moveLength>1035){//是否移动到尽头123 moveLength -= 1242;124 $("d12").style = "transform:translateX(-"+moveLength+"px);"125 }126 },3000);127128// 左移129 $("d11").addEventListener("click",function () {130// ⾸先判断图⽚是不是移动过了，是否移到尽头，然后再做调整移动的宽度131if (moveLength===1035){//是否移到了尽头132 $("d12").style = "transform:translateX(-"+moveLength+"px);";133 moveLength -=207;134 $("d12").style = "transform:translateX(-"+moveLength+"px);";135 }else if(moveLength>0&&moveLength<1035){//是否在原点与尽头之间136 moveLength -=207;137 $("d12").style = "transform:translateX(-"+moveLength+"px);";138 }else if(moveLength===0){//是否回到原点139 moveLength -= 207;140 moveLength += 207;141 }142 })143144 </script>145 </html>其实⽅法并不⽌两种，这⾥只⽤两种简单的案例来实现⽽已，你也可以举⼀反三⽤多种⽅法实现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>pic player</title><script type="text/javascript" src="/jslib/jquery/jquery-1.2.6.js"></script> <script type="text/javascript" src="/jslib/jquery/tween.js"></script></head><style type="text/css">img{border:0;}</style><body><div id="picplayer" style="position:relative;overflow:hidden;width:300px;height:300px;clear:none;border:solid 1px #ccc;">there is a pic-player</div><script>var p = $('#picplayer');var pics1 = [{url:'/online/picPlayer/1.jpg',link:'',time:5000},{url: '/online/picPlayer/2.jpg',link:'',time:4000},{url:'http :///online/picPlayer/3.jpg',link:'',time:6000},{url:'http://im/online/picPlayer/2.jpg',link:'',time:6000},{url:'http://img.jb/online/picPlayer/1.jpg',link:'',time:6000}];initPicPlayer(pics1,p.css('width').split('px')[0],p.css('height').split('px')[0]);////function initPicPlayer(pics,w,h){//选中的图片var selectedItem;//选中的按钮var selectedBtn;//自动播放的idvar playID;//选中图片的索引var selectedIndex;//容器var p = $('#picplayer');p.text('');p.append('<div id="piccontent"></div>');var c = $('#piccontent');for(var i=0;i<pics.length;i++){//添加图片到容器中c.append('<a href="'+pics[i].link+'" target="_blank"><img id="picitem'+i+'" style="display: none;z-index:'+i+'" src="'+pics[i].url+'" /></a>');}//按钮容器，绝对定位在右下角p.append('<div id="picbtnHolder" style="position:absolute;top:'+(h-25)+'px;width:'+w+'px;height:20px;z-index:10000;"></div >');//var btnHolder = $('#picbtnHolder');btnHolder.append('<div id="picbtns" style="float:right; padding-right:1px;"></div>');var btns = $('#picbtns');//for(var i=0;i<pics.length;i++){//增加图片对应的按钮btns.append('<span id="picbtn'+i+'" style="cursor:pointer; border:solid 1px #ccc;background-color:#eee; display:inline-block;"> '+(i+1)+' </span> ');$('#picbtn'+i).data('index',i);$('#picbtn'+i).click(function(event){if(selectedItem.attr('src') == $('#picitem'+$(this).data('index')).attr('src')){return;}setSelectedItem($(this).data('index'));});}btns.append(' ');///setSelectedItem(0);//显示指定的图片indexfunction setSelectedItem(index){selectedIndex = index;clearInterval(playID);//alert(index);if(selectedItem)selectedItem.fadeOut('fast');selectedItem = $('#picitem'+index);selectedItem.fadeIn('slow');//if(selectedBtn){selectedBtn.css('backgroundColor','#eee'); selectedBtn.css('color','#000');}selectedBtn = $('#picbtn'+index); selectedBtn.css('backgroundColor','#000'); selectedBtn.css('color','#fff');//自动播放playID = setInterval(function(){var index = selectedIndex+1;if(index > pics.length-1)index=0; setSelectedItem(index);},pics[index].time);}}</script></body></html>黄色的地方修改显示大小和显示的图片如增加图片可以通过增加var pics1 后面的内容。

如何使用JavaScript实现轮播图功能使用JavaScript实现轮播图功能随着Web技术的不断发展，轮播图成为了Web设计中常见的功能之一。

无论是展示产品、介绍公司或者分享照片，轮播图都可以很好地帮助我们展示信息。

那么，如何使用JavaScript实现轮播图功能呢？1. 创建HTML结构首先，我们需要在HTML中创建轮播图的基本结构。

通常情况下，轮播图由一个父容器和若干个子容器组成。

父容器用来包裹子容器，并设置宽度和高度，以及必要的样式。

子容器则用来显示具体的内容，例如图片、文字等。

2. 添加CSS样式然后，为轮播图添加CSS样式，使其呈现出我们期望的效果。

可以设置轮播图的宽度、高度、背景颜色等。

通过CSS样式，我们可以控制轮播图的外观，使其更符合我们的设计需求。

3. 设定轮播时间间隔在JavaScript中，我们可以使用定时器(setInterval)来设定轮播图的时间间隔。

例如，我们可以每隔3秒钟切换到下一张图片。

当然，你也可以根据需求自定义时间间隔。

通过设置定时器，我们可以实现轮播图的自动切换效果。

4. 实现图片切换当设定好轮播时间间隔后，我们需要编写JavaScript代码来实现图片的切换效果。

一种常见的实现方法是通过改变子容器的left或者marginLeft属性，使其在水平方向上产生位移。

通过改变位移值，我们可以实现图片的切换效果。

5. 添加导航按钮通常情况下，轮播图还会添加导航按钮，用来手动切换图片。

导航按钮可以是圆点、箭头或者其他形式。

当用户点击导航按钮时，我们需要调用JavaScript函数，使图片切换到相应位置。

6. 实现自动播放和停止功能为了增强用户体验，我们可以添加自动播放和停止功能。

当用户鼠标悬停在轮播图上时，轮播图停止自动播放；当用户鼠标移出轮播图时，轮播图继续自动播放。

这样可以让用户自由控制图片的切换。

7. 添加过渡效果为了使轮播图更加平滑流畅，我们可以为图片切换添加过渡效果。

JavaScript+css+HTML实现移动端轮播图（含源码）⽬录1.移动轮播图2.案例分析3.关于anime.js1.移动轮播图移动端轮播图与PC段轮播图，在技术选择上是有区别的，因为移动端的浏览器版本⾮常好，对于H5和CSS3的⽀持⾮常完美，所以很多效果可以CSS3的⽅式实现，⽐如可以使⽤Transorm 属性替代原来的动画函数可以⾃动播放图⽚⼿指可以拖动播放轮播图添加指⽰器，但只起到指⽰作⽤，点击不能切换图⽚不需要左右导航因为移动端轮播图的宽度⼀般与屏幕⼀样宽，所以focus不设置宽度移动端使⽤CSS3的⽅式进⾏图⽚切换，所以可以给 focus_img 去掉定位和 left属性因为li标签设置为float:left 后，就变成了⾏内块元素，其宽度由内容决定，⽽其内容图⽚的宽度为520,，所以导致第四章图⽚被记下来，解决⽅案：设置每个li标签的宽度为ul的20%，再设置图⽚的宽度与li标签⼀样狂2.案例分析⾃动播放功能开启定时器移动端移动，可以使⽤translate 移动想要图⽚优雅的移动，请添加过渡效果⾃动播放功能-⽆缝滚动注意，我们判断条件是要等到图⽚滚动完毕再去判断，就是过渡完成后判断此时需要添加检测过渡完成事件 transitionend判断条件：如果索引号等于 3 说明⾛到最后⼀张图⽚，此时索引号要复原为 0此时图⽚，去掉过渡效果，然后移动如果索引号⼩于0，说明是倒着⾛，索引号等于2此时图⽚，去掉过渡效果，然后移动3.关于anime.jsAnime.js (/ˈæn.ə.meɪ/) 是⼀个轻量的JavaScript 动画库，拥有简单⽽强⼤的API。

可对 CSS 属性、 SVG、 DOM 和JavaScript 对象进⾏动画。

下⾯我们轮播图的实现就是基于这个js插件（可以访问官⽹下载插件）代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图</title><style>* {margin: 0;padding: 0;}ul {list-style-type: none;}.focus {position: relative;/*再移动端，如果不设置如下的样式，则其中的元素可以拖动*/ overflow: hidden;}ul.focus_img {width: 600%;margin-left: -100%;/* 以iphone6 为例 375*5 */}.focus_img li {/* border: 1px solid black; */float: left;width: 16.666%;/*375*6*0.2*/}.focus_img img {width: 100%;/*375*6*0.2*/}.focus_sort {position: absolute;right: 20px;bottom: 20px;border-radius: 5px;/* border: 1px solid black; */}.focus_sort li {display: inline-block;width: 20px;height: 10px;background-color: #fff;margin-right: 10px;cursor: pointer;}.focus_sort .current {background-color: red;}</style></head><body><div class="focus"><!--轮播图⽚--><ul class="focus_img"><li><img src="./images/focus4.jpg" alt=""></li><li><img src="./images/focus1.webp" alt=""></li><li><img src="./images/focus2.webp" alt=""></li><li><img src="./images/focus3.jpg" alt=""></li><li><img src="./images/focus4.jpg" alt=""></li><li><img src="./images/focus1.webp" alt=""></li></ul><ul class="focus_sort"><li class="current" data-index="0"></li><li data-index="1"></li><li data-index="2"></li><li data-index="3"></li></ul></div><script>var focus_img = document.querySelector('.focus_img')var focus = document.querySelector('.focus')var focusWidth = focus.offsetWidthvar focus_sort = document.querySelector('.focus_sort')// 声明变量，⽤来存储轮播图的计数器// 声明变量，存储指⽰器计数器var sort = 0var timer = setInterval(function () {index++var translatex = -index * focusWidthfocus_img.style.transition = 'all 1s'focus_img.style.transform = 'TranslateX(' + translatex + 'px)'// 指⽰器切换changeSort()}, 3000)// 切换指⽰器function changeSort() {// for (var i = 0; i < focus_sort.children.length; i++) {// focus_sort.children[i].className = ''// }// 将上⾯的代码替换成使⽤classList实现focus_sort.querySelector('.current').classList.remove('current')focus_sort.children[sort].className = 'current'}// 为focus_img 添加过渡结束事件(transitionend)，每当过渡效果完成后// 会触发这个事件// 如果⽤户快速拖动元素，在过渡没有完成的情况下就再次拖动元素，则会// 打破过渡的执⾏，导致不会触发这个事件focus_img.addEventListener('transitionend', function () {/*如果index==4，说明当前轮播图切换完成后，显⽰的是最后⼀张图⽚⽽最后⼀张图⽚与第⼀张图⽚⼀样，所以可以做如下操作：快速的将ul拖动到初始位置*/if (index == 4) {index = 0focus_img.style.transition = 'none'focus_img.style.transform = 'TranslateX(0px)'}else if (index < 0) {index = 3var translatex = -index * focusWidthfocus_img.style.transition = 'none'focus_img.style.transform = 'TranslateX(' + translatex + 'px)'}// 将九流阀设置为trueflag = truesort = indexchangeSort()})/* 实现⼿指拖动实现轮播效果1）⼿指按下，停⽌⾃动轮播，⼿指离开屏幕继续开启⾃动轮播2）实现轮播图(focus_img)随着⼿指的移动⽽移动3）⼿指离开屏幕后，判断⽤户⼿指的移动距离，根据距离判断是切换轮播图还是回弹轮播图4）如果⽤户只是按下⼿指，并没有移动，然后⼿指就离开屏幕，可以不执⾏第三步。