Carousel Diagram Toggle Pure Html+js+css

Source: Internet
Author: User




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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.