关于轮播图的制作

JavaScript Lzxgg
前端之家收集整理的这篇文章主要介绍了关于轮播图的制作，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

今天看了好久 写了好久 注释都在代码里 直接上代码了今天写这个的时候 意识到了在这里面下路导航的变量跟上边含图片的标签的变量分不清 很难受以后不能这么写

效果吧可能 估计也算是大同小异

Meta 轮播图啊QAQ .<a href="/tag/Box/" target="_blank" class="keywords">Box</a> </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 590px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 470px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; margin</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 100px auto</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; border</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 2px solid #ccc</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt; img </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; vertical-align</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; top</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt; .inner </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 590px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 470px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; relative</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; overflow</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; hidden</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt; .inner ul </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 1000%</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; absolute</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; left</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; top</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt; .inner li </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; float</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; left</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; list-style</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; none</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt; .indicators </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 1000%</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; absolute</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; left</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 490px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; top</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 452px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt; .indicators ul </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 100px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 18px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; background</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rgba(0,0.1)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; line-height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 15px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; border-radius</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 10px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt; .indicators li </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; float</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; left</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; border-radius</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 50%</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 15px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 15px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; background-color</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; #fff</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; text-align</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; center</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; margin-right</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 10px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; font-size</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 10px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; cursor</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; pointer</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt; .indicators .current </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; background-color</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; skyblue</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt; .hah </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; relative</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; left</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; top</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 220px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; display</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; none</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt; .hah span </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; display</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; block</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 30px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 30px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; text-align</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; center</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; color</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; #fff</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; font-size</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 20px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; cursor</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; pointer</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; background</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rgba(0,0.3)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt; .left </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; absolute</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; left</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt; .right </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; absolute</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; right</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span> <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;style</span><span style="color: #0000ff"&gt;></span>

<span style="color: #0000ff"></<span style="color: #800000">head<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">id<span style="color: #0000ff">="Box"<span style="color: #ff0000"> class<span style="color: #0000ff">="Box"<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">class<span style="color: #0000ff">="inner"<span style="color: #ff0000"> id<span style="color: #0000ff">="ph"<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">ul<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">li<span style="color: #0000ff">><<span style="color: #800000">a <span style="color: #ff0000">href<span style="color: #0000ff">="#"<span style="color: #0000ff">><<span style="color: #800000">img <span style="color: #ff0000">src<span style="color: #0000ff">="11.jpg"<span style="color: #ff0000"> alt<span style="color: #0000ff">=""<span style="color: #0000ff">></<span style="color: #800000">a<span style="color: #0000ff">></<span style="color: #800000">li<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">li<span style="color: #0000ff">><<span style="color: #800000">a <span style="color: #ff0000">href<span style="color: #0000ff">="https://sale.jd.com/act/GirplhRxAm8z1.html"<span style="color: #0000ff">><<span style="color: #800000">img <span style="color: #ff0000">src<span style="color: #0000ff">="22.jpg"<span style="color: #ff0000"> alt<span style="color: #0000ff">=""<span style="color: #0000ff">></<span style="color: #800000">a<span style="color: #0000ff">></<span style="color: #800000">li<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">li<span style="color: #0000ff">><<span style="color: #800000">a <span style="color: #ff0000">href<span style="color: #0000ff">="#"<span style="color: #0000ff">><<span style="color: #800000">img <span style="color: #ff0000">src<span style="color: #0000ff">="33.jpg"<span style="color: #ff0000"> alt<span style="color: #0000ff">=""<span style="color: #0000ff">></<span style="color: #800000">a<span style="color: #0000ff">></<span style="color: #800000">li<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">li<span style="color: #0000ff">><<span style="color: #800000">a <span style="color: #ff0000">href<span style="color: #0000ff">="#"<span style="color: #0000ff">><<span style="color: #800000">img <span style="color: #ff0000">src<span style="color: #0000ff">="44.jpg"<span style="color: #ff0000"> alt<span style="color: #0000ff">=""<span style="color: #0000ff">></<span style="color: #800000">a<span style="color: #0000ff">></<span style="color: #800000">li<span style="color: #0000ff">>
<span style="color: #008000">
<span style="color: #0000ff"></<span style="color: #800000">ul<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">class<span style="color: #0000ff">="indicators"<span style="color: #ff0000"> id<span style="color: #0000ff">="nav"<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">ul<span style="color: #0000ff">>

        <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;ul</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="hah"</span><span style="color: #ff0000"&gt; id</span><span style="color: #0000ff"&gt;="ying"</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;span </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="left"</span><span style="color: #0000ff"&gt;></span><span style="color: #ff0000"&gt;&amp;lt;</span><span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;span</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;span </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="right"</span><span style="color: #0000ff"&gt;></span><span style="color: #ff0000"&gt;&amp;gt;</span><span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;span</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>

<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">script <span style="color: #ff0000">src<span style="color: #0000ff">="common.js"<span style="color: #0000ff">></<span style="color: #800000">script<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">script<span style="color: #0000ff">>
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">获取最外面的div
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> box <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> my$(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">box<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">获取相框宽度
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> imgWidth <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> box.children[<span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">].offsetWidth;
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">获取含有图片的ul
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> ulobj <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000">box.children[<span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">].children[<span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">];
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">获取含有图片的所有li标签 获取了所有标签就能获取她的个数了
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> liobj <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> ulobj.children;
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">获取右下角的小导航栏
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> indicator <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> box.children[<span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">].children[<span style="background-color: #f5f5f5; color: #000000">1<span style="background-color: #f5f5f5; color: #000000">].children[<span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">];
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">设置一个使得全部元素公用的索引
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> indexBttom <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">;
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">复制第一个li 添加到最后
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> heyLi <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> ulobj.children[<span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">].cloneNode(<span style="background-color: #f5f5f5; color: #0000ff">true<span style="background-color: #f5f5f5; color: #000000">);
ulobj.appendChild(heyLi);
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">第一步先根据图片的个数做出来相应导航栏的个数
<span style="background-color: #f5f5f5; color: #0000ff">for<span style="background-color: #f5f5f5; color: #000000"> (<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> i <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">;i <span style="background-color: #f5f5f5; color: #000000"><<span style="background-color: #f5f5f5; color: #000000"> liobj.length<span style="background-color: #f5f5f5; color: #000000">-<span style="background-color: #f5f5f5; color: #000000">1<span style="background-color: #f5f5f5; color: #000000">;i<span style="background-color: #f5f5f5; color: #000000">++<span style="background-color: #f5f5f5; color: #000000">){
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> tempLi <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> document.createElement(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">li<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">为创建的li添加索引
<span style="background-color: #f5f5f5; color: #000000"> tempLi.setAttribute(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">index<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">,i);
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">设置li里面的内容
<span style="background-color: #f5f5f5; color: #000000"> tempLi.innerHTML <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> i<span style="background-color: #f5f5f5; color: #000000">+<span style="background-color: #f5f5f5; color: #000000">1<span style="background-color: #f5f5f5; color: #000000">;
indicator.appendChild(tempLi);
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">以上添加完毕 接着注册鼠标进入的事件
<span style="background-color: #f5f5f5; color: #000000"> tempLi.onmouseover <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> () {
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">取消所有li的样式
<span style="background-color: #f5f5f5; color: #0000ff">for<span style="background-color: #f5f5f5; color: #000000"> (<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> j <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">;j <span style="background-color: #f5f5f5; color: #000000"><<span style="background-color: #f5f5f5; color: #000000"> indicator.children.length;j<span style="background-color: #f5f5f5; color: #000000">++<span style="background-color: #f5f5f5; color: #000000">){
indicator.children[j].removeAttribute(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">class<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">写这个的时候容易把上述获得的 含有图片的li误当作indicator中的li
<span style="background-color: #f5f5f5; color: #000000"> }
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">为当前li 添加背景颜色
<span style="background-color: #f5f5f5; color: #0000ff">this<span style="background-color: #f5f5f5; color: #000000">.className <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">current<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">在这里获取她的索引值
<span style="background-color: #f5f5f5; color: #000000"> indexBttom <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">this<span style="background-color: #f5f5f5; color: #000000">.getAttribute(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">index<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">获取之后进行动画效果
<span style="background-color: #f5f5f5; color: #000000"> animation(ulobj,<span style="background-color: #f5f5f5; color: #000000">-<span style="background-color: #f5f5f5; color: #000000">indexBttom<span style="background-color: #f5f5f5; color: #000000">*<span style="background-color: #f5f5f5; color: #000000">imgWidth);
}

}
indicator.children[</span><span style="background-color: #f5f5f5; color: #000000"&gt;0</span><span style="background-color: #f5f5f5; color: #000000"&gt;].className </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;current</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;;

</span><span style="background-color: #f5f5f5; color: #008000"&gt;//</span><span style="background-color: #f5f5f5; color: #008000"&gt;第二步写左右箭头</span>
<span style="background-color: #f5f5f5; color: #008000"&gt;//</span><span style="background-color: #f5f5f5; color: #008000"&gt;先设置经过box的时候显示  不经过的时候隐藏</span>

<span style="background-color: #f5f5f5; color: #000000"> box.onmouseover <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> () {
my$(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">ying<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">).style.display <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">block<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;
}
box.onmouseout <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> () {
my$(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">ying<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">).style.display <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">none<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;
}
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">分别获得左右箭头
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> arryL <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> my$(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">ying<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">).children[<span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">];
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> arryR <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> my$(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">ying<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">).children[<span style="background-color: #f5f5f5; color: #000000">1<span style="background-color: #f5f5f5; color: #000000">];
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">两个箭头这里 写法不尽相同 因为右箭头到越界的位置的时候 不能再遍历进行去除 必须手动去除
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">而到了左箭头这里 由于0的索引值有对应的indicator 所以直接遍历去除就行 不用再分情况
<span style="background-color: #f5f5f5; color: #000000"> arryL.onclick <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> () {
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">进来判断位置
<span style="background-color: #f5f5f5; color: #0000ff">if<span style="background-color: #f5f5f5; color: #000000"> (indexBttom <span style="background-color: #f5f5f5; color: #000000">== <span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">){
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">到达最左端
<span style="background-color: #f5f5f5; color: #000000"> indexBttom <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> liobj.length<span style="background-color: #f5f5f5; color: #000000">-<span style="background-color: #f5f5f5; color: #000000">1<span style="background-color: #f5f5f5; color: #000000">;
ulobj.style.left <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">-<span style="background-color: #f5f5f5; color: #000000">(indexBttom)<span style="background-color: #f5f5f5; color: #000000"><span style="background-color: #f5f5f5; color: #000000">imgWidth <span style="background-color: #f5f5f5; color: #000000">+ <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">px<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;
}
indexBttom<span style="background-color: #f5f5f5; color: #000000">--<span style="background-color: #f5f5f5; color: #000000">;
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">进行动画效果
<span style="background-color: #f5f5f5; color: #000000"> animation(ulobj,<span style="background-color: #f5f5f5; color: #000000">-<span style="background-color: #f5f5f5; color: #000000">indexBttom<span style="background-color: #f5f5f5; color: #000000"><span style="background-color: #f5f5f5; color: #000000">imgWidth);
<span style="background-color: #f5f5f5; color: #0000ff">for<span style="background-color: #f5f5f5; color: #000000"> (<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> i <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">;i <span style="background-color: #f5f5f5; color: #000000"><<span style="background-color: #f5f5f5; color: #000000"> indicator.children.length;i<span style="background-color: #f5f5f5; color: #000000">++<span style="background-color: #f5f5f5; color: #000000">){
indicator.children[i].removeAttribute(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">class<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
}
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">再赋值给相应元素
<span style="background-color: #f5f5f5; color: #000000"> indicator.children[indexBttom].className <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">current<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;
}

arryR.onclick </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt; () {
        </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;if</span><span style="background-color: #f5f5f5; color: #000000"&gt; ( indexBttom </span><span style="background-color: #f5f5f5; color: #000000"&gt;==</span><span style="background-color: #f5f5f5; color: #000000"&gt; liobj.length</span><span style="background-color: #f5f5f5; color: #000000"&gt;-</span><span style="background-color: #f5f5f5; color: #000000"&gt;1</span><span style="background-color: #f5f5f5; color: #000000"&gt;){
            indexBttom </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
            ulobj.style.left </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;0</span><span style="background-color: #f5f5f5; color: #000000"&gt;+</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;px</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
        }
        indexBttom</span><span style="background-color: #f5f5f5; color: #000000"&gt;++</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
        </span><span style="background-color: #f5f5f5; color: #008000"&gt;//</span><span style="background-color: #f5f5f5; color: #008000"&gt;进行动画效果</span>

<span style="background-color: #f5f5f5; color: #000000"> animation(ulobj,<span style="background-color: #f5f5f5; color: #000000">-<span style="background-color: #f5f5f5; color: #000000">indexBttom<span style="background-color: #f5f5f5; color: #000000">*<span style="background-color: #f5f5f5; color: #000000">imgWidth);
<span style="background-color: #f5f5f5; color: #0000ff">if<span style="background-color: #f5f5f5; color: #000000"> (indexBttom <span style="background-color: #f5f5f5; color: #000000">==<span style="background-color: #f5f5f5; color: #000000"> liobj.length<span style="background-color: #f5f5f5; color: #000000">-<span style="background-color: #f5f5f5; color: #000000">1<span style="background-color: #f5f5f5; color: #000000">) {
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000"> 取消最后一个背景颜色
<span style="background-color: #f5f5f5; color: #000000"> indicator.children[indicator.children.length<span style="background-color: #f5f5f5; color: #000000">-<span style="background-color: #f5f5f5; color: #000000">1<span style="background-color: #f5f5f5; color: #000000">].removeAttribute(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">class<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">设置第一个li背景颜色
<span style="background-color: #f5f5f5; color: #000000"> indicator.children[<span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">].className <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">current<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;
}
<span style="background-color: #f5f5f5; color: #0000ff">else<span style="background-color: #f5f5f5; color: #000000"> {
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">先排它
<span style="background-color: #f5f5f5; color: #0000ff">for<span style="background-color: #f5f5f5; color: #000000"> (<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> i <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">;i <span style="background-color: #f5f5f5; color: #000000"><<span style="background-color: #f5f5f5; color: #000000"> indicator.children.length;i<span style="background-color: #f5f5f5; color: #000000">++<span style="background-color: #f5f5f5; color: #000000">){
indicator.children[i].removeAttribute(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">class<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
}
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">再赋值给相应元素
<span style="background-color: #f5f5f5; color: #000000"> indicator.children[indexBttom].className <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">current<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;
}

}

<span style="color: #0000ff"></<span style="color: #800000">script<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>

今天自己改进了代码 准确说重写了一遍 思路清晰了不少，上代码!

轮播图啊QAQ .box </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 590px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 470px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; margin</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 100px auto</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; border</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 2px solid #ccc</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt; img </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; vertical-align</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; top</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt; .inner </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 590px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 470px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; relative</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; overflow</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; hidden</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt; .inner ul </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 1000%</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; absolute</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; left</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; top</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt; .inner li </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; float</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; left</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; list-style</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; none</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt; .indicators </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 1000%</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; absolute</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; left</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 490px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; top</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 452px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt; .indicators ul </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 100px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 18px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; background</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rgba(0,0.3)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt; .left </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; absolute</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; left</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt; .right </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; absolute</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt; right</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span> <span style="background-color: #f5f5f5; color: #000000"&gt;}</span> <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;style</span><span style="color: #0000ff"&gt;></span>

<span style="color: #0000ff"></<span style="color: #800000">head<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">id<span style="color: #0000ff">="box"<span style="color: #ff0000"> class<span style="color: #0000ff">="box"<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">class<span style="color: #0000ff">="inner" <span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">ul<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">li<span style="color: #0000ff">><<span style="color: #800000">a <span style="color: #ff0000">href<span style="color: #0000ff">="#"<span style="color: #0000ff">><<span style="color: #800000">img <span style="color: #ff0000">src<span style="color: #0000ff">="11.jpg"<span style="color: #ff0000"> alt<span style="color: #0000ff">=""<span style="color: #0000ff">></<span style="color: #800000">a<span style="color: #0000ff">></<span style="color: #800000">li<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">li<span style="color: #0000ff">><<span style="color: #800000">a <span style="color: #ff0000">href<span style="color: #0000ff">="https://sale.jd.com/act/GirplhRxAm8z1.html"<span style="color: #0000ff">><<span style="color: #800000">img <span style="color: #ff0000">src<span style="color: #0000ff">="22.jpg"<span style="color: #ff0000"> alt<span style="color: #0000ff">=""<span style="color: #0000ff">></<span style="color: #800000">a<span style="color: #0000ff">></<span style="color: #800000">li<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">li<span style="color: #0000ff">><<span style="color: #800000">a <span style="color: #ff0000">href<span style="color: #0000ff">="#"<span style="color: #0000ff">><<span style="color: #800000">img <span style="color: #ff0000">src<span style="color: #0000ff">="33.jpg"<span style="color: #ff0000"> alt<span style="color: #0000ff">=""<span style="color: #0000ff">></<span style="color: #800000">a<span style="color: #0000ff">></<span style="color: #800000">li<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">li<span style="color: #0000ff">><<span style="color: #800000">a <span style="color: #ff0000">href<span style="color: #0000ff">="#"<span style="color: #0000ff">><<span style="color: #800000">img <span style="color: #ff0000">src<span style="color: #0000ff">="44.jpg"<span style="color: #ff0000"> alt<span style="color: #0000ff">=""<span style="color: #0000ff">></<span style="color: #800000">a<span style="color: #0000ff">></<span style="color: #800000">li<span style="color: #0000ff">>
<span style="color: #008000">
<span style="color: #0000ff"></<span style="color: #800000">ul<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">class<span style="color: #0000ff">="indicators"<span style="color: #ff0000"> id<span style="color: #0000ff">="nav"<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">ul<span style="color: #0000ff">>

        <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;ul</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="hah"</span><span style="color: #ff0000"&gt; id</span><span style="color: #0000ff"&gt;="ying"</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;span </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="left"</span><span style="color: #0000ff"&gt;></span><span style="color: #ff0000"&gt;&amp;lt;</span><span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;span</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;span </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="right"</span><span style="color: #0000ff"&gt;></span><span style="color: #ff0000"&gt;&amp;gt;</span><span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;span</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>

<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">script <span style="color: #ff0000">src<span style="color: #0000ff">="common.js"<span style="color: #0000ff">></<span style="color: #800000">script<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">script<span style="color: #0000ff">>
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">获取最外面的div
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> Box <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> my$(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">Box<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">获取相框
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> inner <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> Box.children[<span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">];
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">获取相框的宽度
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> imgWidth <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> inner.offsetWidth;
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">获取存图片的ul
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> ulObj <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> inner.children[<span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">];
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">获取所有图片的li标签
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> imgLiObj <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> ulObj.children;
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">获取底部导航栏
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> navBottom <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> my$(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">nav<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">).children[<span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">];
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">获取导航栏的li 标签
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> navLiObj <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> navBottom.children;
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">设置一个全局变量使得 底部导航栏和图片的 索引一致
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> index <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">;
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">添加相应的底部导航栏li标签
<span style="background-color: #f5f5f5; color: #0000ff">for<span style="background-color: #f5f5f5; color: #000000"> (<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> i <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000"> ;i <span style="background-color: #f5f5f5; color: #000000"><<span style="background-color: #f5f5f5; color: #000000"> imgLiObj.length;i<span style="background-color: #f5f5f5; color: #000000">++<span style="background-color: #f5f5f5; color: #000000">){
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> tempLi <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> document.createElement(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">li<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
tempLi.innerHTML <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> i<span style="background-color: #f5f5f5; color: #000000">+<span style="background-color: #f5f5f5; color: #000000">1<span style="background-color: #f5f5f5; color: #000000">;
navBottom.appendChild(tempLi);
tempLi.setAttribute(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">index<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">,i);
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">为每个导航栏li注册鼠标进入事件
<span style="background-color: #f5f5f5; color: #000000"> tempLi.onmouSEOver <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> () {
<span style="background-color: #f5f5f5; color: #0000ff">for<span style="background-color: #f5f5f5; color: #000000"> (<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> j <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000"> ;j <span style="background-color: #f5f5f5; color: #000000"><<span style="background-color: #f5f5f5; color: #000000"> navLiObj.length;j<span style="background-color: #f5f5f5; color: #000000">++<span style="background-color: #f5f5f5; color: #000000">){
navLiObj[j].removeAttribute(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">class<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
}
<span style="background-color: #f5f5f5; color: #0000ff">this<span style="background-color: #f5f5f5; color: #000000">.className <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">current<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">获取导航栏li的索引
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> tempIndex <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">this<span style="background-color: #f5f5f5; color: #000000">.getAttribute(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">index<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">进行动画效果移动图片
<span style="background-color: #f5f5f5; color: #000000"> animation(ulObj,<span style="background-color: #f5f5f5; color: #000000">-<span style="background-color: #f5f5f5; color: #000000">tempIndex<span style="background-color: #f5f5f5; color: #000000">*<span style="background-color: #f5f5f5; color: #000000">imgWidth);
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">更新全局变量index
<span style="background-color: #f5f5f5; color: #000000"> index <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> tempIndex;
}
}
navLiObj[<span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">].className <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">current<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">克隆第一个图片li标签到最后
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> heyLi <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> imgLiObj[<span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">].cloneNode(<span style="background-color: #f5f5f5; color: #0000ff">true<span style="background-color: #f5f5f5; color: #000000">);
ulObj.appendChild(heyLi);
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">设置进入div显示两侧导航栏的效果
<span style="background-color: #f5f5f5; color: #000000"> Box.onmouSEOver <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> () {
my$(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">ying<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">).style.display <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">block<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;
clearInterval(timeId);
}
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">设置移出div隐藏两侧导航栏的效果
<span style="background-color: #f5f5f5; color: #000000"> Box.onmouSEOut <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> () {
my$(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">ying<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">).style.display <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">none<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> timeId<span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> setInterval(clickHandle,<span style="background-color: #f5f5f5; color: #000000">2000<span style="background-color: #f5f5f5; color: #000000">);
}
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">获取 左右箭头标签
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> arryL <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> my$(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">ying<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">).children[<span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">];
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> arryR <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> my$(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">ying<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">).children[<span style="background-color: #f5f5f5; color: #000000">1<span style="background-color: #f5f5f5; color: #000000">];
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">为每个箭头标签设置点击事件
<span style="background-color: #f5f5f5; color: #000000"> arryL.onclick <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> () {
<span style="background-color: #f5f5f5; color: #0000ff">if<span style="background-color: #f5f5f5; color: #000000"> (index <span style="background-color: #f5f5f5; color: #000000">== <span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">){
index <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> navLiObj.length;
ulObj.style.left <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">-<span style="background-color: #f5f5f5; color: #000000">index<span style="background-color: #f5f5f5; color: #000000"><span style="background-color: #f5f5f5; color: #000000">imgWidth <span style="background-color: #f5f5f5; color: #000000">+ <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">px<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;
}
index <span style="background-color: #f5f5f5; color: #000000">--<span style="background-color: #f5f5f5; color: #000000">;
animation(ulObj,<span style="background-color: #f5f5f5; color: #000000">-<span style="background-color: #f5f5f5; color: #000000">index<span style="background-color: #f5f5f5; color: #000000"><span style="background-color: #f5f5f5; color: #000000">imgWidth);
<span style="background-color: #f5f5f5; color: #0000ff">for<span style="background-color: #f5f5f5; color: #000000"> (<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> j <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000"> ;j <span style="background-color: #f5f5f5; color: #000000"><<span style="background-color: #f5f5f5; color: #000000"> navLiObj.length;j<span style="background-color: #f5f5f5; color: #000000">++<span style="background-color: #f5f5f5; color: #000000">){
navLiObj[j].removeAttribute(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">class<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
}
navLiObj[index].className <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">current<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;
}
arryR.onclick <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> () {
<span style="background-color: #f5f5f5; color: #0000ff">if<span style="background-color: #f5f5f5; color: #000000"> (index <span style="background-color: #f5f5f5; color: #000000">==<span style="background-color: #f5f5f5; color: #000000"> navLiObj.length){
index<span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">;
ulObj.style.left <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">0 <span style="background-color: #f5f5f5; color: #000000">+ <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">px<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;
}
index<span style="background-color: #f5f5f5; color: #000000">++<span style="background-color: #f5f5f5; color: #000000">;
animation(ulObj,<span style="background-color: #f5f5f5; color: #000000">-<span style="background-color: #f5f5f5; color: #000000">index<span style="background-color: #f5f5f5; color: #000000"><span style="background-color: #f5f5f5; color: #000000">imgWidth);
<span style="background-color: #f5f5f5; color: #0000ff">if<span style="background-color: #f5f5f5; color: #000000"> (index <span style="background-color: #f5f5f5; color: #000000">==<span style="background-color: #f5f5f5; color: #000000"> navLiObj.length) {
navLiObj[navLiObj.length<span style="background-color: #f5f5f5; color: #000000">-<span style="background-color: #f5f5f5; color: #000000">1<span style="background-color: #f5f5f5; color: #000000">].removeAttribute(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">class<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
navLiObj[<span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">].className <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">current<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;
}
<span style="background-color: #f5f5f5; color: #0000ff">else<span style="background-color: #f5f5f5; color: #000000"> {
<span style="background-color: #f5f5f5; color: #0000ff">for<span style="background-color: #f5f5f5; color: #000000"> (<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> j <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000"> ;j <span style="background-color: #f5f5f5; color: #000000"><<span style="background-color: #f5f5f5; color: #000000"> navLiObj.length;j<span style="background-color: #f5f5f5; color: #000000">++<span style="background-color: #f5f5f5; color: #000000">){
navLiObj[j].removeAttribute(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">class<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
}
navLiObj[index].className <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">current<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;
}
}
<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">自动切换
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> timeId<span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> setInterval(clickHandle,<span style="background-color: #f5f5f5; color: #000000">2000<span style="background-color: #f5f5f5; color: #000000">);
<span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> clickHandle() {
<span style="background-color: #f5f5f5; color: #0000ff">if<span style="background-color: #f5f5f5; color: #000000"> (index <span style="background-color: #f5f5f5; color: #000000">==<span style="background-color: #f5f5f5; color: #000000"> navLiObj.length){
index<span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">;
ulObj.style.left <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">0 <span style="background-color: #f5f5f5; color: #000000">+ <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">px<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;
}
index<span style="background-color: #f5f5f5; color: #000000">++<span style="background-color: #f5f5f5; color: #000000">;
animation(ulObj,<span style="background-color: #f5f5f5; color: #000000">-<span style="background-color: #f5f5f5; color: #000000">index<span style="background-color: #f5f5f5; color: #000000"><span style="background-color: #f5f5f5; color: #000000">imgWidth);
<span style="background-color: #f5f5f5; color: #0000ff">if<span style="background-color: #f5f5f5; color: #000000"> (index <span style="background-color: #f5f5f5; color: #000000">==<span style="background-color: #f5f5f5; color: #000000"> navLiObj.length) {
navLiObj[navLiObj.length<span style="background-color: #f5f5f5; color: #000000">-<span style="background-color: #f5f5f5; color: #000000">1<span style="background-color: #f5f5f5; color: #000000">].removeAttribute(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">class<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
navLiObj[<span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">].className <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">current<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;
}
<span style="background-color: #f5f5f5; color: #0000ff">else<span style="background-color: #f5f5f5; color: #000000"> {
<span style="background-color: #f5f5f5; color: #0000ff">for<span style="background-color: #f5f5f5; color: #000000"> (<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> j <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000"> ;j <span style="background-color: #f5f5f5; color: #000000"><<span style="background-color: #f5f5f5; color: #000000"> navLiObj.length;j<span style="background-color: #f5f5f5; color: #000000">++<span style="background-color: #f5f5f5; color: #000000">){
navLiObj[j].removeAttribute(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">class<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
}
navLiObj[index].className <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">current<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;
}
}
<span style="color: #0000ff"></<span style="color: #800000">script<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作