最简单轮播形式，js中通过电影的显示属性控制变换，也可通过调整电影的左边距

效果如图：

实现代码：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title style type=' text/CSS ' * { margin : 0；padd : 0；列表样式：无；文本装饰：无；} .包装{宽度： 490像素高度： 170像素；余量： 100像素自动；border: 1px固体# 000000;相对位置：飞越：隐藏；} # pic { width: 2450px高度： 170像素；} #pic li{左侧浮动：} # list { position : absolutebttom : 10pxleft 3360150 px } # list Li {左侧浮动：宽度： 15px高度： 15px背景# fffmargin: 0 10px边界半径： 50%;光标：指针；} #列表。在{ background: # e27a00}。prev { top : 30pxleft : 0；} .下一个{ top : 30pxright : 0；} .Prev，2000 .下一个{位置：绝对值；font-size : 80px字体粗细：粗体；color: # fff-web套件-transit :所有0.35秒轻松进入-退出} .下一个：悬停。prev :悬停{后台： # CCC背景： rgba(204，204，204，0.4)；} .显示{显示：块；} .隐藏{ display:无}/样式脚本类型=' text/JavaScript '窗口。onload=function(){ var pic=document。getelementbyid(' pic ').getElementsByTagName(' Li ')；var列表=文档。getelementbyid(' list ').getElementsByTagName(' Li ')；var Prev=文档。getelementbyid(' Prev ')；var Next=文档。getelementbyid(' Next ')；定义变量索引=0;定义变量计时器=null auto()；for(var I=0；ilist.lengthi ){ list[i].索引=我；清单[i].onmouseover=function(){ clearInterval(计时器);变更(这个。索引)；}列表[i].onmouseout=function(){ auto()；} pic[i].onmouseover=function(){ clearInterval(计时器);} pic[i].onmouseout=function(){ auto()；} } prev。onclick=function(){ clearInterval(计时器)；索引-;if(index=0){ index=list。长度-1；}变更（索引);}下一个。onclick=function(){ clearInterval(计时器);指数；if(index=list。长度){ index=0；}变更（索引);} prev。onmousemove=function(){ clearInterval(计时器);} prev。onmouseout=function(){ auto()；}下一个。onmouseover=function(){ clearInterval(计时器);}下一个。onmouseout=function(){ auto()；}函数change(Curindex){ for(var I=0；ilist.lengthi ){ list[i].类名=pic[i].' className='隐藏；}列表[curIndex].类名=' onpic[curIndex].className=' showindex=curIndex}函数auto(){ timer=setInterval(function(){ index；if(index=list。长度){索引=0 }更改(索引)；},2000);} }/script/head dydiv class=' wrap ' id=' wrap ' ul id=' pic ' Li class=' show ' a href=' # ' img src=' http :/54111 CD 9000174 CD 04900170。jpg ' alt=' '//a/Li lia href=' # ' img src=' http :/54111 DAC 00118 af 0490170。jpg .class=' Prev ' id=' Prev '/a a href=' JavaScript :class=' Next ' id=' Next '/a/div/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。