jquery实现轮播图效果

效果如下：

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title slider/title style type=' text/CSS ' * { margin : 0；padd : 0；} #幻灯片显示{相对位置：宽度： 512像素；高： 384pxmargin: 0自动飞越：隐藏；} #slideshowul，#slideshowulli，# slide show ulli-nav { position : absolute；} # slide show ulli { list-style : none；} #幻灯片显示-导航{ bottom: 20px宽度： 100%;文本对齐：中心；} # slide-nav span { display : inline-block；宽度： 15px高度： 15pxmargin : 0 7px font-size : 0；背景-color: rgba(255，255，255，3);边界半径： 50%;用户选择：无；-网络工具包-用户-选择：无；transit : all . 5s-WebKit-transit : all。5s；光标：指针；} #幻灯片显示-导航范围。活动{底色： # fff}/style/head body div id=' sliding ' ul liimg src=' http :3358 cdn。附上。qd funs。com/notes/pics/201611/26/231154 E8 ab 2 Zan wd 59 a2 w2。jpg ' alt=' gakki是我的/Li liimg src=' http :http://cdn。附上。qd funs。com/notes/pics/20166 var $ IMgwrap=$(' # slide showul ')；var TotalIndex=$ IMgwrap。查找('李').长度；var width=$(' #幻灯片显示')。宽度();//插入导航范围，让img按$("#幻灯片显示")的顺序排列。查找(' ulli ').每个（函数（索引){ $(这个)).css(“”左，宽度*索引px’)；$(' #幻灯片显示-导航')。追加(“span”(索引1)'/span ')；})//$(' # slide-nav span ').等式(0).添加CLaSS(' active ')；//自动滑动var move=function(){ curindex=1；if(curindex===TotaL ndex){ curindex=0；} //当前跨度添加类名“active ”$(“# slide-nav span”).每个（函数（索引){ $(这个)).removeClass('active') }).eq(curindex ).添加CLaSS(' active ')；//自动滑动$ IMgwrap。动画({ '左' :宽度* curindex *(1)' px '，}，速度)//一开始没加计时器=',这个病菌耽误了不少时间定时器=setTimeout(移动，持续时间速度);};//init timer=setTimeout(移动，持续时间);//点击事件$(#幻灯片导航跨度).on('click ')，function(event){ event。prevent default()；/*对事件采取行动*/clearTimeout(计时器);$imgWrap.stop(true，true)；curindex=$(this).index()-1；move()；});})/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！