JQuery fade-in and fade-out slideshow

JQuery fade-in and fade-out slideshow

After a smoothly switched focus carousel image using JavaScript, jQuery was used to write a simple fade-in and fade-out carousel image. The code was not optimized, and the html structure was slightly adjusted, the image Part replaces the previously used div with ul.

The html structure is as follows:

<div id="container">        <ul class="pic">            <li><a href="javascript:;"></a></li>            <li><a href="javascript:;"></a></li>            <li><a href="javascript:;"></a></li>        </ul>        <ul id="position">            <li class="cur"></li>            <li class=""></li>            <li class=""></li>        </ul>        <a href="javascript:;" id="prev" class="arrow">&lt;</a>        <a href="javascript:;" id="next" class="arrow">&gt;</a>    </div>

Css settings:

* {Margin: 0; padding: 0; text-decoration: none;} ul {list-style: none ;}# container {position: relative; width: 400px; height: 200px; margin: 20px auto ;}. pic li {position: absolute; top: 0; left: 0; display: none ;}. pic li img {width: 400px; height: 200px;} # position {position: absolute; bottom: 0; right: 0; margin: 0; background: #000; opacity: 0.4; width: 400px; text-align: center;} # position li {width: 10px; height: 10px; margin: 0 2px; display: inline-block; -webkit-border-radius: 5px; border-radius: 5px; background-color: # afafaf;} # position. cur {background-color: # ff0000 ;}. arrow {cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 50%; margin-top:-20px;/* Half of width */background-color: RGBA, 0 ,. 3); color: # fff ;}. arrow: hover {background-color: RGBA (0, 0 ,. 7) ;}# container: hover. arrow {display: block;} # prev {left: 20px;} # next {right: 20px ;}View Code

JavaScript code:

$ (Function () {// The first display $ (". pic li "). eq (0 ). show (); // manually switch over the mouse, fade in and fade out $ ("# position li "). mouseover (function () {$ (this ). addClass ('cur '). siblings (). removeClass ("cur"); var index = $ (this ). index (); I = index; // if this clause is not added, the automatic carousel is not the last one after the mouse removes the dot. // $ (". pic li "). eq (index ). show (). siblings (). hide (); $ (". pic li "). eq (index ). fadeIn (500 ). siblings (). fadeOut (500) ;}); // automatic carousel var I = 0; var timer = setInterval (play, 2000 ); // Switch var play = function () {I ++; I = I> 2? 0: I; $ ("# position li "). eq (I ). addClass ('cur '). siblings (). removeClass ("cur"); $ (". pic li "). eq (I ). fadeIn (500 ). siblings (). fadeOut (500);} // switch left var playLeft = function () {I --; I = I <0? 2: I; $ ("# position li "). eq (I ). addClass ('cur '). siblings (). removeClass ("cur"); $ (". pic li "). eq (I ). fadeIn (500 ). siblings (). fadeOut (500);} // move the mouse in and out effect $ ("# container "). hover (function () {clearInterval (timer) ;}, function () {timer = setInterval (play, 2000 );}); // switch between the left and right click $ ("# prev "). click (function () {playLeft () ;}) $ ("# next "). click (function () {play ();})})View Code