This article for you to share a common and more complex carousel effect, is the cool main interface of the Carousel diagram, the results are as follows:
Before we write the code, we analyze the structure of the effect graph:
1. The left and right two direction buttons can be used to toggle the previous one with the next one.
2. There is a page indicator below, used to mark the scroll to the first few, of course, you click the corresponding button, you can jump to the corresponding picture.
3. The middle main display area is used for placing the picture that needs to be carousel.
As described above, we can begin by writing HTML code.
One, HTML code
<body> <div id= "Youku" > <div class= "Anniu" > <span class= "Zuo" ></span> <span class= "You" ></span> </div> <ul class= "Tuul" > <li class= "no0" ><a H ref= "#" ></a></li> <li class= "No1" ><a href= "#" ></a></li> <li class= "NO2" ><a href= "#" ></li> <li class= "NO3" ><a href= "#" ></a></li>
; <li class= "No4" ><a href= "#" ></a></li> <li class= "Waiting" "><a href=" # "></a></li> <li class=" Waiting "><a href=" # "></a></li> <li class=" Waiting "><a href=" # "></a></li> <li class= "Waiting" ><a href= "#" ></a>&
lt;/li> </ul> <div class= "Xiaoyuandian" > <ul> <li></li> <li></li> <li class= "cur" ></li> <li></li> <li></ li> <li></li> <li></li> <li></li> <li>< ;/li> </ul> </div> </div> </body>
The code is at a glance, consistent with what I have described above; Here are two points I need to explain:
1. Class for the Tuul of the UL, that is, storing the pictures that need to be wheeled; Inside Li has two main classes: packaged as "no" and "Waiting", where "No" series represents a picture that may be in an "active" state, and "waiting" Indicates that these pictures are currently hidden and are reflected in the next CSS code.
2. Pagination indicator default setting the third Li class is cur. Because the number of "active" pictures set at the beginning of the Tuul is 5, the default is to show the third chapter centered. But do not know if you have doubts, the initial state, the interface above the number of pictures displayed 3, so why not select the second as a center display of the picture? That is because of the click on the left button, if you choose the Second center display, the first one can be seen, but the first front is no picture. When you click on the left button, it "betrayed". So the overall design idea is: The interface above show three, beyond the interface of the part, left and right each have a, just can't see it. In the following tutorial, I will explain the implementation process in detail.
Second, CSS code
<style type= "Text/css" > *{padding:0;
margin:0;
} #youku {width:1189px;
height:360px;
margin:100px Auto;
position:relative;
Overflow:hidden;
} #youku ul{List-style:none;
#youku. Tuul li{Position:absolute;
Background-color:black;
} #youku li.waiting{Display:none;
#youku Li img{width:100%;
height:100%;
#youku. Anniu. zuo{Position:absolute;
width:45px;
height:45px;
Background:url (images/zuo.png) no-repeat;
top:100px;
left:10px;
z-index:1000;
Cursor:pointer;
#youku. Anniu. you{Position:absolute;
width:45px;
height:45px;
Background:url (images/you.png) no-repeat;
top:100px;
right:10px;
z-index:1000;
Cursor:pointer; } #youku Li.no0{width:174px;height:122px;left:-116px;top:100px;z-index:777;}
#youku li.no1{width:356px;height:223px;left:0px;top:26px;z-index:888;}
#youku li.no2{width:642px;height:273px;left:274px;top:0px;z-index:999;}
#youku li.no3{width:356px;height:223px;left:834px;top:26px;z-index:888;}
#youku li.no4{width:174px;height:122px;left:1097px;top:100px;z-index:777;}
#youku li.no1 img, #youku li.no3 img{opacity:0.3;
#youku. xiaoyuandian{width:600px;
height:20px;
Position:absolute;
top:312px;
left:454px;
#youku. Xiaoyuandian ul li{Float:left;
width:16px;
height:16px;
Background-color:blue;
margin-right:10px;
border-radius:100px;
Cursor:pointer;
#youku. Xiaoyuandian ul li.cur{Background-color:green;
} </style>
I will not explain the CSS here, if you want to know more specific, please refer to my previous series JS & JQuery. Here, I only explain two points:
1. For the "active" picture of the CSS settings, that is #youku Li.no0~no4 settings, noting that the left value of no0 is negative, and No1 left value is 0, which confirms the above I expressed the view that the visual range of static state is to display three pictures, The remaining two pictures are on the left and right side of the visual range respectively. Note Set the Z-index value of each picture, so that there is a stereo level, the greater the value of the previous display.
2. To the visual range on both sides of the picture, set opacity, make them darken.
After you have set up the above CSS code, the anatomy is as follows:
Three, jquery code
<script type= "Text/javascript" > $ (document). Ready (function () {//define an initial speed var Sudu =
600;
var shangdi = false;
Define JSON var Json0 = {"width": "174px", "height": "122px", "left": " -116px", "Top": "100px"};
var Json1 = {"width": "356px", "height": "223px", "left": "0px", "Top": "26px"};
var Json2 = {"width": "642px", "height": "273px", "left": "274px", "Top": "0"};
var Json3 = {"width": "356px", "height": "223px", "left": "834px", "Top": "26px"};
var json4 = {"width": "174px", "height": "122px", "left": "1097px", "Top": "100px"};
var nowimg = 2;
var timer = setinterval (youanniuyewu,2000);
$ ("#youku"). MouseEnter (function () {clearinterval (timer);
}
);
$ ("#youku"). MouseLeave (function () {clearinterval (timer);
Timer = setinterval (youanniuyewu,2000);
}
); $(". You"). Click (YOUANNIUYEWU); function Youanniuyewu () {if (!$ (". Tuul li"). Is (": Animated") | | shangdi = TRUE) {if (Nowimg <
8) {nowimg + +;
}else{nowimg = 0;
} $ (". Xiaoyuandian li"). EQ (nowimg). addclass ("cur"). Siblings () removeclass ("cur");
First swap position $ (". No1"). Animate (Json0,sudu);
$ (". No2"). Animate (Json1,sudu);
$ (". No3"). Animate (Json2,sudu);
$ (". No4"). Animate (Json3,sudu);
$ (". No0"). CSS (JSON4);
Swap identity $ (". No0"). attr ("Class", "Waiting");
$ (". No1"). attr ("Class", "no0");
$ (". No2"). attr ("Class", "No1");
$ (". No3"). attr ("Class", "No2");
$ (". No4"). attr ("Class", "No3"); The exchange of the above, the No0 got lost! So, let's change the name of the person in front of No1 to No0 if ($ (". No3"). Next (). Length!= 0) {//IFSomeone behind NO3, then change the person's name to No4 $ (". No3"). Next (). attr ("Class", "No4");
}else{//NO3 no one in front of you, then change the name of the person at the beginning of the queue is No0 $ (". Tuul li:first"). attr ("Class", "No4");
///found that after the above program is written, the inline style of the No6 is still the json0 position, so force: $ (". No4"). CSS (JSON4); } $ (". Zuo"). Click (function () {if ( !$ (". Tuul li"). Is (": Animated") | |
Shangdi = = True) {if (nowimg > 0) {nowimg-;
}else{nowimg = 8;
} $ (". Xiaoyuandian li"). EQ (nowimg). addclass ("cur"). Siblings () removeclass ("cur");
First swap position: $ (". No0"). Animate (Json1,sudu);
$ (". No1"). Animate (Json2,sudu);
$ (". No2"). Animate (Json3,sudu);
$ (". No3"). Animate (Json4,sudu);
$ (". No4"). CSS (JSON0); //Swap identity $ (". No4"). attr ("Class", "Waiting");
$ (". No3"). attr ("Class", "No4");
$ (". No2"). attr ("Class", "No3");
$ (". No1"). attr ("Class", "No2");
$ (". No0"). attr ("Class", "No1"); The exchange of the above, the No0 got lost!
So, we let the person in front of No1 be renamed No0 if ($ (". No1"). Prev (). length!= 0) {//If someone is in front of No1, change the name of this person to No0
$ (". No1"). Prev (). attr ("Class", "no0");
}else{//no1 in front of nobody, then change the end of the queue at this time the name of the person No0 $ (". Tuul li:last"). attr ("Class", "no0");
} $ (". No0"). CSS (JSON0);
}
}
); $ ("#youku. Xiaoyuandian li"). Click (function () {Sudu = 100;//temporarily change this speed Shangdi = t Rue
Flag var Yonghuandexuhao = $ (this). index ();
if (Yonghuandexuhao > Nowimg) {var Cishu = yonghuandexuhao-nowimg; ConSole.log ("Master, I have informed God to help you press the right button" + Cishu + "Times");
for (var i = 1; i<= Cishu; i++) {$ ('. you '). Trigger ("click");//Let God help you press and button once more}
}else{var Cishu = Nowimg-yonghuandexuhao;
Console.log ("Master, I have informed God to help you press the left button" + Cishu + "Times");
for (var i = 1; i<= Cishu i++) {$ (". Zuo"). Trigger ("click");//Let God help you press and button again
} nowimg = Yonghuandexuhao; Sudu = 600;
Then restore the speed Shangdi = false;
}
);
}
); </script>
JQuery code on the control of the timer, paging button clicks, here I do not introduce, if interested, please refer to: JS & JQuery inside content.
Here I mainly explain two points:
1. Json0, Json1, Json2, Json3, json4 the definition of the data, its initial value is consistent with the definition of CSS, its purpose is to easily switch the absolute position of each picture, I will introduce the following details.
2. The main explanation right button clicks the event, namely Youanniuyewu this method.
2-1) nowimg index Simple processing:
if (Nowimg < 8) {
nowimg + +;
} else{
nowimg = 0;
If not the last one, click on the "right button", then the nowimg value plus 1, if the last one, then nowimg starting from 0.
2-2 Click on the "right button", about the paging indicator processing:
Highlight the indicator button for the currently displayed picture, and the sibling node is displayed normally.
2-3) Exchange Picture position:
First swap position
$ (". No1"). Animate (Json0,sudu);
$ (". No2"). Animate (Json1,sudu);
$ (". No3"). Animate (Json2,sudu);
$ (". No4"). Animate (Json3,sudu);
The previous four sentences will animate the effect of the picture movement. Still state when three pictures are displayed in front of us; When you are in motion, you can imagine that up to four pictures appear in front of us, the above four code execution process, the analysis diagram is as follows:
In the process of animation execution, the picture of "No1" gradually leaves the visual range of the screen, while the picture of "No4" is gradually displayed in the visual range of the screen.
In the process of animation execution, this picture of "no0" has long been positioned in the position of "No4" (in this case, outside of the visual range, because the animate animation here is performed asynchronously and does not delay the execution of the $ (. no0). CSS (JSON4) code. When this set of code has been executed, the profiling diagram is as follows:
At this point, we take into account those images that are in the "Waiting" state, and the analysis is as follows:
2-4 above the completion of the process, is completed a carousel effect, but at this time the brand order of each picture has been disrupted, in order to make the carousel continue, we should be the brand again "recovery" over. So we can add the following code:
Swap identity
$ (". No0"). attr ("Class", "Waiting");
$ (". No1"). attr ("Class", "no0");
$ (". No2"). attr ("Class", "No1");
$ (". No3"). attr ("Class", "No2");
After the above code is executed, it means that the picture "No0" in the previous illustration is pulled into the "waiting" area, while the other four numbers are extrapolated in turn. After execution, the profiling diagram is as follows:
As shown in the figure above, the "active" state of the 5 pictures, the last one has now become a "waiting" state, so need someone to go up, in order to continue the implementation of the animation. Obviously, should take the "waiting" list of the first, that is, "active" state of the next picture "replacement", if there is no "waiting" state of the picture, that these "waiting" state of the picture all "ran to" class for Tuul all lists , grab the first one of these lists as a "replacement." The code is as follows:
if ($ (". No3"). Next (). Length!= 0) {
//If someone is behind NO3, change the person's name to No4
$ (". No3"). Next (). attr ("Class", "No4");
else{
//NO3 No one in front of you, then change the name of the person at the beginning of the queue is No0
$ (". Tuul li:first"). attr ("Class", "No4");
}
After discovering that the above program is written, the inline style of the No6 or the position of the json0 is enforced:
Note here: Although there have been many steps in the location of information changes and brand changes, but just pulled into the waiting area of the picture in the Li and sibling position relationship has not changed, but the class attribute has become "waiting." In this case, the code structure of Li in Tuul is as follows:
<ul class= "Tuul" > <li class= "Waiting" ><a href= "#" ></a></li> <li class=" no0 "><a href=" # "></a ></li> <li class= "No1" ><a href= "#" ></a></li> <li class= "NO2" ><a href= "#" ></a></li> <li class= "NO3" ><a href= "#" ></a></li> <li class= "No4" ><a href= "#" ></a></li> <li class= "Waiting" ><a href= "#" ></a></li> <li class=" Waiting "><a href=" # "></a>& lt;/li> <li class= "Waiting" ><a href= "#" ></a></li> </ul >
After the above code has been executed, the profiling diagram is as follows:
The above is the entire content of this article, I hope to help you learn.
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
