Home > Developer > Web Develop
Today stroll a day street, put Tianzifang, People's Square, Jingansi Park walk again, eat a lot of delicious things ~ ~ ~ and then back to the company to study the code, but also the timing of automatic rotation program written out, deliberately explained, this time the carousel is in yesterday's essay jquery effects (3)-Carousel Diagram ① (manual click on the Carousel) on the basis of the written, that is, this essay shows the manual click on the effect of the rotation and the timing of the automatic rotation effect of the program, it is suggested that I want a coherent learning partner to read the notes I wrote yesterday after reading this article ~ ~ ~
Here's a look at the final timed auto-carousel effect I've done and the manual click-to-Carousel effect:
For the above display animation speed is faster because my software is the green version, free ~ ~ ~ You know, is Kaka, the real effect is slower than this speed, but also is a uniform, can be commercial ~ ~ ~ So the above display animation can only be used as a reference to complete the effect, do not care too much about its display speed ~\ (≧▽≦ )/~ la La la
First, the main procedure
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title>Carousel Diagram ① (manual click Carousel)</title> <Linktype= "Text/css"rel= "stylesheet"href= "Css/layout.css" /> </Head> <Body> <Divclass= "Slideshow"> <!--Picture layout Start - <ul> <Li><ahref="#"><imgsrc= "Img/picture01.jpg" /></a></Li> <Li><ahref="#"><imgsrc= "Img/picture02.jpg" /></a></Li> <Li><ahref="#"><imgsrc= "Img/picture03.jpg" /></a></Li> <Li><ahref="#"><imgsrc= "Img/picture04.jpg" /></a></Li> </ul> <!--end of picture layout - <!--button layout start - <Divclass= "Shownav"> <spanclass= "Active">1</span> <span>2</span> <span>3</span> <span>4</span> </Div> <!--Button Layout End - </Div> <Scriptsrc= "Js/jquery-1.11.3.js"></Script> <Scriptsrc= "Js/layout.js"></Script> </Body></HTML>
Well, the above main program and yesterday's written notes no difference, did not make any changes ~~~~~ interested can look at yesterday's note notes, I will focus on this essay in the jquery program
Second, CSS style
*{margin:0; padding:0;} ul{List-style:none;}. slideshow{width:346px; height:210px; /* is actually the height of the picture */border:1px #eeeeee solid; margin:100px Auto; position:relative; Overflow:hidden; /* Here you need to hide the picture portion of the overflow frame */}.slideshow ul{width:2000px; position:relative; */* Here to note relative: objects are not stackable, but will be based on Left,right,top,bottom and other attributes in the normal document flow offset position, if not this attribute, the picture will not move around */}.slideshow ul li{Float:left; /* Let the four pictures float to the left, forming a sideways layout that is easy to move left when the button is clicked */width:346px;}. Slideshow. shownav{/* Layout with absolute positioning to the digital button */position:absolute; right:10px; bottom:5px; Text-align:center; font-size:12px; line-height:20px;}. Slideshow. Shownav span{Cursor:pointer; Display:block; Float:left; width:20px; height:20px; Background: #ff5a28; margin-left:2px; Color: #fff;}. Slideshow. Shownav. active{background: #b63e1a;} Hey, the above style program is also with yesterday's written notes no difference, did not make any changes ~~~~~ interested can look at yesterday's note notes, I will focus on this essay in the jquery program
Third, the jquery procedure
First of all, the principle of timed automatic rotation:
1, first have to open a timer, assuming that the timer time set to 2000ms, that is, 2S timer to perform one operation
2, the timer every 2S operation is simulated in order to click the Number button, that is, trigger the Click event, the picture left to move
Let's look at the jquery code one of the general effect implementations:
var timer=null; Timer return value, mainly used to turn off the timer var inow=0; Inow is the image index value that is being displayed, when the user opens the page, the first graph is displayed first, that is, the index value is 0 timer=setinterval (function () { //open timer inow++; Add 1 to the order of the indexed values in the picture so you can implement the sequential carousel picture Shownumber.eq (Inow). Trigger ("click"); The Click event},2000 of the Analog Trigger digital button ); 2000 for the time of the carouselThe above program can achieve every 2S picture of the carousel, but the carousel will stop when the last picture, because there is no judge Inow to reach the last picture, so there is the following code two:
var timer=null; Timer return value, mainly used to turn off the timer var inow=0; Inow is the image index value that is being displayed, when the user opens the page, the first graph is displayed first, that is, the index value is 0 timer=setinterval (function () { //open timer inow++; The order of the index values of the picture is added 1, so that the sequential carousel picture if (inow>shownumber.length-1) { ///When the last picture is reached, let Inow be assigned as the index value of the first graph, The carousel effect jumps to the first graph and restarts inow=0; } Shownumber.eq (Inow). Trigger ("click"); The click},2000 of the Analog Trigger digital button ); 2000 for the time of the carouselSo the full code program for the jquery program is as follows:
$ (document). Ready (function () {var slideshow=$ (". Slideshow"),//Gets the name of the outermost frame Ul=slideshow.find ("ul"), Shownumber=slideshow.find (". Shownav span"),//Get button Onewidth=slideshow.find ("ul li"). EQ (0). width (); Gets the width of each picture Var timer=null; Timer return value, mainly used to turn off the timer var inow=0; Inow is the image index value that is being displayed, when the user opens the page, the first graph is displayed first, that is, the index value is 0 shownumber.on ("click", Function () {//A click event is bound for each button) $ (this). AddClass ("active"). Siblings (). Removeclass ("active"); This button is highlighted when the button is clicked, and the other button highlighting state is removed by the Var index=$ (this). index (); Gets which button is clicked, that is, the index value of the clicked button is found Ul.animate ({"Left":-onewidth*inow,//Note the Left property is used here, so the UL style needs to set the POS ition:relative; Let UL left n the width of the size of the image, n according to the clicked button index value to determine}); Timer=setinterval (function () {//open timer inow++; The order of the index value of the picture is added 1, so that the sequential carousel image can be implemented if (INOW>SHOWNUMBER.LENGTH-1) {//When the last picture is reached, the Inow is assigned to the index value of the first graph, and the carousel effect jumps to the firstSketch re-start inow=0; } shownumber.eq (Inow). Trigger ("click"); The click},2000 of the Analog Trigger digital button); 2000 for the time of the Carousel})
The above comments are written in detail, mainly for the convenience of a small partner to learn to see, but in fact, I write the program will not be annotated so detailed, is very simple content, see here you may think that the jquery program is over, it is wrong, because the automatic rotation effect is correct, but the manual click will be wrong , I specifically made a GIF animation to show the effect of the error:
See the above effect you will suddenly dawu, the picture automatically carousel, you even click on the button it also just to echo you, jump to the button you clicked, but just for a while or in the order of its rotation, ignore the button you click should go to the carousel order, as for the reason why ~~~~~~~
Because the value of index is not assigned to the timer's picture index Inow when manually clicked, so that Inow cannot store the index value of the button you clicked, that is, you do not know which button you clicked, now that you know the reason, the following needs to be modified ~ ~ ~
The final version of the jquery program after the completion of the modification is:
$ (document). Ready (function () {var slideshow=$ (". Slideshow"),//Gets the name of the outermost frame Ul=slideshow.find ("ul"), Shownumber=slideshow.find (". Shownav span"),//Get button Onewidth=slideshow.find ("ul li"). EQ (0). width (); Gets the width of each picture Var timer=null; Timer return value, mainly used to turn off the timer var inow=0; Inow is the image index value that is being displayed, when the user opens the page, the first graph is displayed first, that is, the index value is 0 shownumber.on ("click", Function () {//A click event is bound for each button) $ (this). AddClass ("active"). Siblings (). Removeclass ("active"); This button is highlighted when the button is clicked, and the other button highlighting state is removed by the Var index=$ (this). index (); Gets which button is clicked, that is, the index value of the clicked button is found Inow=index; Ul.animate ({"Left":-onewidth*inow,//Note that the Left property is used here, so the UL style needs to set the position:relative; let ul shift n the width of the image size, n according to the clicked Index value of the button Inowx})}); Timer=setinterval (function () {//open timer inow++; Add 1 to the order of the indexed values in the picture so that the sequential carousel picture if (inow>shownumber.length-1) {/////When the last picture is reached, let inow assignment is the index value of the first graph, and the carousel effect jumps to the first graph to start the inow=0 again; } shownumber.eq (Inow). Trigger ("click"); The click},2000 of the Analog Trigger digital button); 2000 for the time of the Carousel})
O (∩_∩) o hahaha ~, finally finished writing ~ ~ ~ There is a sense of accomplishment, the next time the essay is ready to write the mouse hover over the carousel diagram when the picture stops the carousel, the mouse moved after the picture then the Carousel code ~~~~~~
I Caishuxueqian, essays are also free to write, may have the wrong place, the big God see can point out Oh ~ ~ ~ I promise not to kill you ~ ~ ~
jquery Effects (4)-Carousel diagram ② (timed auto-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
