A simple image switching effect implemented using html + css + js

.


This image switching effect is easy to implement and has good compatibility.

The html page is as follows:
Copy codeThe Code is as follows:
<Div class = "wrapper">
<Div id = "focus">
<Ul>
<Li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> </ a> </li>
<Li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> </ a> </li>
<Li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> </> </li>
<Li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> </> </li>
<Li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> </> </li>
</Ul>
</Div>

</Div> <! -- Wrapper end -->
</Body>

Css style
Copy codeThe Code is as follows:
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
Body {font-size: 12px; color: #222; font-family: Verdana, Arial, Helvetica, sans-serif; background: # f0f0f0 ;}
. Clearfix: after {content: "."; display: block; height: 0; clear: both; visibility: hidden ;}
. Clearfix {zoom: 1 ;}
Ul, li {list-style: none ;}
Img {border: 0 ;}

. Wrapper {width: 800px; margin: 0 auto; padding-bottom: 50px ;}

/* Qqshop focus */
# Focus {width: 800px; height: 280px; overflow: hidden; position: relative ;}
# Focus ul {height: pixel PX; position: absolute ;}
# Focus ul li {float: left; width: 800px; height: 280px; overflow: hidden; position: relative; background: #000 ;}
# Focus ul li div {position: absolute; overflow: hidden ;}
# Focus. btnBg {position: absolute; width: 800px; height: 20px; left: 0; bottom: 0; background: #000 ;}
# Focus. btn {position: absolute; width: 780px; height: 10px; padding: 5px 10px; right: 0; bottom: 0; text-align: right ;}
# Focus. btn span {display: inline-block; _ display: inline; _ zoom: 1; width: 25px; height: 10px; _ font-size: 0; margin-left: 5px; cursor: pointer; background: # fff ;}
# Focus. btn span. on {background: # fff ;}
# Focus. preNext {width: 45px; height: 100px; position: absolute; top: 90px; background: url (img/sprite.png) no-repeat 0 0; cursor: pointer ;}
# Focus. pre {left: 0 ;}
# Focus. next {right: 0; background-position: right top ;}
</Style>

Js script
Copy codeThe Code is as follows:
$ (Function (){
Var sWidth = $ ("# focus"). width (); // obtain the width of the focus chart (display area)
Var len = $ ("# focus ul li"). length; // obtain the number of focal points.
Var index = 0;
Var picTimer;

// The following Code adds the number button and the translucent bar after the button, as well as the previous and next buttons
Var btn = "<div class = 'btnbg '> </div> <div class = 'btn'> ";
For (var I = 0; I <len; I ++ ){
Btn + = "<span> </span> ";
}
Btn + = "</div> <div class = 'prenext pre'> </div> <div class = 'prenext next'> </div> ";
$ ("# Focus"). append (btn );
$ ("# Focus. btnBg" 2.16.css ("opacity", 0.5 );

// Add a mouse slide event for the small button to display the corresponding content
$ ("# Focus. btn span" example .css ("opacity", 0.4). mouseenter (function (){
Index = $ ("# focus. btn span"). index (this );
ShowPics (index );
}). Eq (0). trigger ("mouseenter ");

// Display the transparency of previous and next pages
$ ("# Focus. preNext" detail .css ("opacity", 0.2). hover (function (){
$ (This). stop (true, false). animate ({"opacity": "0.5"}, 300 );
}, Function (){
$ (This). stop (true, false). animate ({"opacity": "0.2"}, 300 );
});

// Previous page button
$ ("# Focus. pre"). click (function (){
Index-= 1;
If (index =-1) {index = len-1 ;}
ShowPics (index );
});

// Next page button
$ ("# Focus. next"). click (function (){
Index + = 1;
If (index = len) {index = 0 ;}
ShowPics (index );
});

// In this example, it is left-side scrolling, that is, all li elements are floating to the left in the same row. Therefore, the width of the peripheral ul element needs to be calculated here.
$ ("# Focus ul" ).css ("width", sWidth * (len ));

// Stop automatic playback when you move the mouse over the focus chart, and start automatic playback when the mouse slides out.
$ ("# Focus"). hover (function (){
ClearInterval (picTimer );
}, Function (){
PicTimer = setInterval (function (){
ShowPics (index );
Index ++;
If (index = len) {index = 0 ;}
}, 4000); // This 4000 represents the automatic playback interval, in milliseconds
}). Trigger ("mouseleave ");

// The image display function displays the corresponding content based on the received index value.
Function showPics (index) {// normal switchover
Var nowLeft =-index * sWidth; // calculate the left value of the ul element based on the index value.
$ ("# Focus ul "). stop (true, false ). animate ({"left": nowLeft}, 300); // use animate () to adjust the ul element to scroll to the position calculated
// $ ("# Focus. btn span "). removeClass ("on "). eq (index ). addClass ("on"); // switch the current button to the selected Effect
$ ("# Focus. btn span "). stop (true, false ). animate ({"opacity": "0.4"}, 300 ). eq (index ). stop (true, false ). animate ({"opacity": "1"}, 300); // switch the current button to the selected Effect
}
});

Switch between left and right images