。
The image switching effect is simple and very compatible.
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" ></a></li>
<li><a href= "http://www.lanrentuku.com/" target= "_blank" ></a></li>
<li><a href= "http://www.lanrentuku.com/" target= "_blank" ></a></li>
</ul>
</div>
</div><!--Wrapper End--
</body>
CSS Styles
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:380px; 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 (); Gets the width of the focus chart (display area)
var len = $ ("#focus ul li"). length; Get the number of focus graphs
var index = 0;
var Pictimer;
The following code adds a translucent bar after the number buttons and buttons, and the previous page, next page, two 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"). CSS ("opacity", 0.5);
Add a mouse slide event to the small button to display the content
$ ("#focus. BTN span"). CSS ("opacity", 0.4). MouseEnter (function () {
Index = $ ("#focus. BTN span"). index (this);
Showpics (index);
}). eq (0). Trigger ("MouseEnter");
Previous page, Next button transparency processing
$ ("#focus. Prenext"). 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);
});
This example scrolls left and right, that is, all LI elements are floating on the same row, so it is necessary to calculate the width of the perimeter UL element.
$ ("#focus ul"). CSS ("width", swidth * (len));
Stop AutoPlay When the mouse is on the focus chart, and start playing automatically when you slide out
$ ("#focus"). Hover (function () {
Clearinterval (Pictimer);
},function () {
Pictimer = setinterval (function () {
Showpics (index);
index++;
if (index = = len) {index = 0;}
},4000); This 4000 represents the interval of AutoPlay, in milliseconds
}). Trigger ("MouseLeave");
Display the picture function to display the corresponding content according to the received index value
function Showpics (index) {//normal toggle
var nowleft =-index*swidth; Calculates the left value of the UL element based on the index value
$ ("#focus ul"). Stop (True,false). Animate ({"Left": nowleft},300); Adjust the UL element by Animate () to the calculated position
$ ("#focus. BTN span"). Removeclass ("on"). EQ (index), addclass ("on"); Switch to the selected effect for the current button
$ ("#focus. BTN span"). Stop (True,false). Animate ({"opacity": "0.4"},300). EQ (index). Stop (True,false). Animate ({" Opacity ":" 1 "},300); Switch to the selected effect for the current button
}
});
Use the left and right to switch pictures
Carousel Diagram Toggle Pure Html+js+css
