Home > Developer > Web Develop
First, the simple HTML code
<!DOCTYPE HTML><HTML> <Head> <Linkrel= "stylesheet"type= "Text/css"href= "./css/init2.css"> <Scripttype= "Text/javascript"src= "./js/jquery-1.11.3.min.js"></Script> <Scripttype= "Text/javascript"src= "./js/test2.js"></Script> </Head> <Body> <DivID= "Layout"> <Headerclass= "Clearfix"> <DivID= "banner"> <ulID= "Banner_img"> <Liclass= "Active"><imgsrc= "./img/1.jpg"></Li> <Li><imgsrc= "./img/2.jpg"></Li> <Li><imgsrc= "./img/3.jpg"></Li> </ul> </Div> </Header> </Div> </Body></HTML>
In this HTML directory there are three sibling folders, IMG in the image, CSS and JS to store the CSS files and JS files, the use of jquery here, remember the introduction of the order, jquery must be placed in front of other JS.
The HTML code is simple and does not explain too much.
Init2.css
*{margin:0px;padding:0px;}#layout{width:960px;margin:0 Auto;}#banner{position:relative;Overflow:Hidden;width:Auto;Height:200px;Border-radius:10px;Border:2px solid Black;}#banner_img Li{float: Left;List-style-type:None;position:Absolute; Left:-100%;}#index{position:Absolute; Right:8px;Bottom:8px;}#index Li{float: Left;width:16px;Height:16px;text-align:Center;Line-height:16px;Border-radius:5px;Border:1px solid #FF7300;background: White;List-style:None;Margin-left:8px;cursor:Pointer;}. Clearfix:after{content: "" ;Height:0px;Display:Block;Clear:both;}. on{background:#FF7300;}
CSS basically corresponds to the class in the previous HTML, Claerfix to clear the float, on is the index of the carousel image that is currently playing, the main idea is to set the picture to the absolute layout after all moved to the side of the parent element, and then through the jquery animation to change the position of the picture , thus achieving the effect of carousel.
Take a look at the processing of the mouse hover over the picture area (refer to someone else's):
$ ("#banner"). Hover (function () { Clearinterval (Adtimer); }, function () {Adtimer =setinter Val (function () { // alert (index); Showimgs (index); Index ++; if (Index==len) {Index = 0 2000 ' MouseLeave '); Hover () is a way to replace MouseEnter and MouseLeave, and it is easier to hear. Trigger () to trigger a state of the current object, which is to trigger a MouseLeave state to initialize the timer, because the setting here is to destroy the timer when the mouse is moved to $ ("#banner"), lock the current image, and then add the timer again by moving the mouse away.
Then look at the implementation of the jquery animation:
function Showimgs (Index) { $ (". Active"). Animate ({"Left": " -100%"},1000); $ (". Active"). Removeclass (' active '); $ ("#banner_img li"). EQ (index). CSS (' left ', ' 100% '); $ ("#banner_img li"). EQ (index). Animate ({"Left": "0%"},1000); $ ("#index li"). Removeclass (' on '). EQ (index). addclass (' on '); $ ("#banner_img li"). EQ (index). addclass (' active ');}Here the main idea is to have class=active pictures, that is, the picture is being displayed to the left, and remove the active class, at the same time to pass in the corresponding image of the index on the parent element to the right, and then also left to move, so that the result of a right to the left to move the illusion. Then add the image that is moved from the right to the active class.
We also need a way to add a picture index:
function Addindex (n) { var ul = $ ("<ul id=\" index\ "></ul>"); for (var i=1;i<=n;i++) { var li = $ ("<li></li>"); Li.append (function(num) { return num } (i)); Ul.append (li); } Ul.children (). First (). addclass (' on '); $ ("#banner"). Append (ul);}Basically, it is important to note that the width of the image should be the same as the parent element, or there will be no continuous convergence or partial overflow problem.
All JS:
init ();functionInit () {$ (function(){ varindex = 1 ; varAdtime; varLen = $ ("#banner_img Li"). length; Addindex (len); $(". Active"). CSS (' left ', ' 0% '); varBannerli = $ ("#index Li"); //Handle Index$ ("#index li"). MouseOver (function() {index= $ ("#index li"). Index ( This) ; Jumpimgs (index); Index++ ; if(index==Len) {Index= 0 ; } }); //Toggleinterval$ ("#banner"). Hover (function() {clearinterval (Adtimer); },function() {Adtimer=setinterval (function(){ //alert (index);Showimgs (index); Index++; if(index==Len) {Index=0; } },2000)}). Trigger (' MouseLeave '); });} //Auto Add indexfunctionAddindex (n) {varUL = $ ("<ul id=\" index\ "></ul>") ; for(vari=1;i<=n;i++) { varLi = $ ("<li></li>") ; Li.append (function(num) {returnnum} (i)); Ul.append (LI); } ul.children (). First (). addclass (' On ') ; $("#banner"). Append (ul);}functionJumpimgs (Index) {$ (". Active"). CSS (' left ', '-100% ')); $(". Active"). Removeclass (' active ') ; $("#banner_img li"). EQ (index). CSS (' left ', ' 0% '); $("#banner_img li"). EQ (index). addclass (' active ') ;}functionShowimgs (Index) {$ (". Active"). Animate ({"Left": "100%"},1000); $(". Active"). Removeclass (' active ') ; $("#banner_img li"). EQ (index). CSS (' left ', ' 100% '); $("#banner_img li"). EQ (index). Animate ({"Left": "0%"},1000); $("#index Li"). Removeclass (' on '). EQ (index). addclass (' on ')) ; $("#banner_img li"). EQ (index). addclass (' active ') ;}View Code
jquery Enables simple carousel
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
