Picture Carousel, Handy (jquery)

Making a picture carousel can be said to be a skill that JS or jquery learners should master. But ashamed of is this dish has been smattering before, this back smoked a half-day more summed up under share to everyone. Although the title is more bragging, but the purpose is to hope that you look after the production of a picture carousel will be very fast.

First of all, affirm the points:

1. Since the use of jquery, the production method is no longer the most basic kind of the picture list position has been changed, such as: Cut the second picture left:-100px, cut the third picture left:-200px, cut the fourth picture left:-300px.

This method quickly returns to the first picture from the last picture and rubs it back.

2. Production target is the basic three functions of Carousel: 1) Auto play 2) cursor movement stop play, move to continue play 3) button operation before/after picture switch

3. The method of making picture carousel is very much on the net, my writing is not necessarily the simplest, but it is less, and the idea is clear.

Preparatory work:

1.body writes the following:

 <DivID= "Container">        <ulID= "Piclist">            <Li><imgsrc= "Images/1.png"></Li>            <Li><imgsrc= "Images/2.png"></Li>            <Li><imgsrc= "Images/3.png"></Li>            <Li><imgsrc= "Images/4.png"></Li>            <Li><imgsrc= "Images/5.png"></Li>            <Li><imgsrc= "Images/6.png"></Li>            <Li><imgsrc= "Images/7.png"></Li>        </ul>  </Div>

Where the external div represents the "photo frame" We need, and the UL list is the picture list

2. Set the frame size to the size of the single picture, and the UL width to the total width of the picture list, which can be set in CSS, but it is better to write in JavaScript dynamically.

   var picarr=$ ("#picList li");   $ ("#picList"). CSS ("width", picarr.length*120);

Finally let ul under the Li Float:left make the picture horizontal.

When finished, the light green border section is our "Photo frame".

General wording:

This kind of writing personally thinks relatively simple, also more practical. There is a high-level point at the back of the writing, although bluffing but also some trouble.

    function Next () {        $ ("#picList li:first-child"). Animate ({            marginleft:" -120px"        }, (),function()            {var temp=$(this). Clone ();            $ (this). Remove ();            Temp.css ({marginleft:"0"});            $ ("#picList"). Append (temp);        }) ;    }

Explain the above code, in this case, the single picture is 120px high 190px in width.

The next function, which is the backward function, first animate custom animation in jquery moves the first column of the picture list to the left 120px, takes 1000 milliseconds, and executes the next function after the left shift is complete:

The first column of the picture list is cloned with a variable named temp, and the first column is deleted. At this point, after the clone of the temp is still maintained after MarginLeft: " -120px" CSS style, first put it back to 0, or will be inserted in the end of the team will be covered in the previous sheet.

Finally, the cloned column is inserted through append () to the end of the queue.

Use the SetInterval loop to perform the next function:

var intervalobj=window.setinterval (next,2000);

Here all use setinterval is to be able to stop the rotation after the mouse is put up, setinterval the execution interval minus the time of the animation execution is the switch delay time of the picture. Effect:

Assign setinterval to the global variable Intervalobj for the next stop function:

    $ ("#container"). MouseOver (function() {        window.clearinterval (intervalobj);    });    $ ("#container"). Mouseout (function() {        intervalobj=window.setinterval (next,2000);    }); 

Effect:

Next, add a button to the DIV with ID container:

 <  button  onclick  = "prev ()"   ID  = "Goleft"  >  ←</ button  >  <  button  onclick  = "Next ()"   ID  = "GoRight"  >  →</ button  >  

The right button is the next function written above, the two buttons added to the DIV has the advantage that: before we were added to the Div mouseover event, that is, when we want to click the switch to the top and bottom of the AutoPlay will also stop, and we do not conflict with the operation.

function to turn left:

    function prev () {        var temp=$ ("#picList li:last-child"). Clone ();        $ ("#picList li:last-child"). Remove ();        Temp.css ({marginleft:" -120px"});        $ ("#picList"). prepend (temp);        $ ("#picList li:first-child"). Animate ({            marginleft:"0"        },+);    }

There is a slight difference between this and the right function, and we have to complete the clone before moving to the right of the picture list.

First, the last column of the picture list is cloned and the last column is removed. Set the cloned temp style to -120px, or the first one will be covered when you plug into the team head.

Insert the cloned temp through prepend into the team header, note that at this point the picture list of the first is no longer the original first, but just inserted into the head of the team temp, because the temp marginleft is -120px, it becomes 0. The entire picture list will naturally move to the right, showing the previous one.

Finally, the overflow of "picture frame" is set to hidden, and a more complete carousel is completed:

Tidy up the code, convenient for everyone to copy at once:

    varIntervalobj=window.setinterval (next,2000); varpicarr=$ ("#picList li"); $("#picList"). CSS ("width", picarr.length*120); functionNext () {$ ("#picList Li:first-child"). Animate ({marginleft:" -120px"        },1000,function(){            vartemp=$ ( This). Clone (); $( This). Remove (); Temp.css ({marginleft:"0"}); $("#picList"). Append (temp);    }); }    functionprev () {vartemp=$ ("#picList li:last-child"). Clone (); $("#picList Li:last-child"). Remove (); Temp.css ({marginleft:" -120px"}); $("#picList"). prepend (temp); $("#picList Li:first-child"). Animate ({marginleft:"0"        },1000); }    $("#container"). MouseOver (function() {window.clearinterval (intervalobj);    }); $("#container"). Mouseout (function() {intervalobj=window.setinterval (next,2000); });

Advanced wording:

Basic principle is the same, but this time in the UL need to add two Li, respectively, the first picture can be installed.

    <ulID= "Piclist">         <Li><imgsrc= "Images/1.png"></Li>         <Li><imgsrc= "Images/2.png"></Li>    </ul>

In JS, all the picture addresses are loaded into the array:

    var srcarr=[' images/1.png ', ' images/2.png ', ' images/3.png ', ' images/4.png ', ' images/5.png ', ' images/6.png ', ' images/ 7.png ']

Define the global variable picno=1, adding the judging criteria to the next and Prev functions that were previously written:

    functionNext () {Picno++; if(picno==7) {Picno=0; }Else if(picno==8) {Picno=1; }        $("#picList Li:first-child"). Animate ({marginleft:" -120px"        },1000,function(){            vartemp=$ ( This). Clone (); $( This). Remove (); Temp.css ({marginleft:"0"}). Children (). attr ("src", Srcarr[picno]); $("#picList"). Append (temp);    }); }    functionprev () {Picno--; if(picno<1) {Picno=7; }        vartemp=$ ("#picList li:last-child"). Clone (); $("#picList Li:last-child"). Remove (); Temp.css ({marginleft:" -120px"}). Children (). attr ("src", srcarr[picno-1]); $("#picList"). prepend (temp); $("#picList Li:first-child"). Animate ({marginleft:"0"        },1000); }

Here Picno function is to provide the image Address array subscript Index, this part is a bit difficult to clarify, I was the original test for a long time to find the law.

First look at the next function, Picno initial value is 1, the first time the next function is added 1 to 2, that is, the next image to be inserted should be the third picture, because the first to second one already exists.

if (picno==7) {picno=0} indicates that the first picture address is added when the head is switched down.

else if (picno==8) {picno=1}, plus this is because a bug was found when switching, the new insert is not the second, but the first one when it is inverted from the first one to the last one, and then the first one from the last.

Look at the Prev function again, because the image address to be inserted here is the previous one, so the subscript index in the last Srcarr should be picNo-1.

。。。 I say all say dizzy, can not understand can not understand, directly take to use it ...

Top effect:

On the whole, this kind of writing added to the judgment will be a little more trouble, and if the page is not refreshed or click too fast it is easy to appear the picture sequence of confusion. "Dazzle" the ingredients are heavier, there is no first way to use.

Thank you for your visit, but also for each person who gives advice on this dish.