介绍了javascript照片轮播特效的详细代码和实现思路，分享给大家参考。具体内容如下。

我们先来看看效果图：

特定代码：

1.HTML代码分析。

body div class=' DOTA ' Ul id=' content ' lia href=' # ' img src=' http : images/1 . jpg '/A/Li lia href=' # ' img src=' http : images/2 . jpg '/A/Li lia href=' # ' img src=' http : images/3 . jpg '/A/Li lia href=' # ' img src=' http : images/4它涵盖/a/li lia href='#'A版本是手机应用程序，它涵盖/a/li lia href='#'A版本是手机应用程序，它涵盖/a/li /ul /div /body。这种效应的层级结构比较清晰：1。类为data的div是最外层的容器，可以用来控制整个渲染的显示位置。

2.id为content的ul用于存储左侧滚动图片。

3.带ID指示灯的ul用于显示右侧的指示灯条。

第二，CSS代码。

* { margin : 0；padd : 0；} img { border:0} .dota { width:570pxheight: 230pxmargin:100px auto相对位置：飞越：隐藏；} .dota #内容{左侧浮动：list-style:无；绝对位置：宽度width:380px高度：230 px；} .dota # content img { width :380 px；高度：230 px；} .dota #指示器{右侧浮动：list-style:无；宽度width:180px高度：220 px；padding: 5px背景-颜色： # 100 f13；} .dota #指示器li { width: 180pxheight: 44pxbackground : URL(images/anniu . png)0-44px；} .dota #指示器Li . current { background-position : 0；} .dota #指示器阿利{ display: block宽度： 160 px；height: 34pxpadding: 5px 0 5px 25px} .dota #指示器li a:link，dota #指示器Li a :已访问{ text-decoration:无；color: # 686477font : 12 px/145% '；}在这里，我将解释一下指标中li的代码：中的css代码。dota #指示器li用于设置右侧指示器栏中的每个项目。请注意，这里使用了背景属性，这意味着li的背景是图片。准备的图片如下：

这张准备好的图片大小为180 * 88，位置属性的大小由中的背景属性设置。dota #指示符li为0 -44px，即捕获图片的下部；因此，指示器中的所有背景图片都显示下半部分较暗的部分；的位置属性大小。dota # indicorli。current为0 0，因此默认情况下，指示器的第一个显示突出显示，其余显示为黑色部分。然后，JQuery代码用于控制当前属性作用于谁来切换所选状态。

第三，JQuery代码。

脚本类型=' text/JavaScript ' $(function(){ var now image=0；/* 为定时动画服务*/$('.dota #内容李').第一个()。克隆()。appendo($(').dota # content’)；var timer=设置间隔(autoimate，1500)；$('.dota ').鼠标输入(function(){ clearInterval(timer))；}).鼠标离开(function(){ timer=setInterval(automate，1500)；});$('.dota #指示器李' .mouseenter(function(){ $(this)).addClass('current ').兄弟姐妹()。removeClass(“”当前');nowImage=$(这个)。index()；/*停止()可以立刻清楚以前的动画，防止动画叠加*/$('.dota #content ').停止()。动画({'top': -230 * nowImage}，1000)；});函数automate(){ if(now image==4){ now image=0；$('.dota #指示器李' .eq(nowImage).addClass('current ').兄弟姐妹()。removeClass(“”当前');$('.dota #content ').停止()。动画({'top':-230 * 5}，1000，函数(){ $(')。dota #content ').css('top '，0)；});} else { nowImage$(')。dota #content ').停止()。动画({'top': -230 * nowImage}，1000)；$('.dota #指示器李' .eq(nowImage).addClass('current ').兄弟姐妹()。removeClass(“”当前');} } });/script以上就是轻松实现爪哇岛描述语言图片轮播特效的详细代码，希望对大家的学习有所帮助。