广告合作QQ：76874919

关于轮播图的制作

JavaScript 2019-01-08

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

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

Meta 轮播图啊QAQ .<a href="https://www.f2er.com/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中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支持第三个参数...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其他强类型语言...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提交） 2.资源...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是须知的必须有...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图， ：视图模...
js实现横向跑马灯效果
首先我们需要一个html代码的框架如下： 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...