Home > Developer > Web Develop
After learning jquery, it is often easier to think than write source code. We used jquery to make a picture Carousel animation, which is more simple than writing CSS. Let me explain how to write in jquery.
class="img_div"> class="img1 " src=". /image/img1.jpg" /> class="img2" src=" .. /image/img2.jpg" /></div></body>
This is very simple when the body is. As shown above, add two img to the Div.
Here's how to start writing JavaScript. First of all, don't forget to introduce jquery files. As follows:
<script src=". /js/jquery-1.9.1.min.js">
This has nothing to say, just sometimes pay attention not to write the path wrong.
var ary = [ "...] /image/img1.jpg", ". /image/img2.jpg", ". /image/img3.jpg", ". /image/img4.jpg" ];
As above, we need to put the picture we need to move into an array first.
varindex =2; function Move_image (image_obj) {if(Parseint (Image_obj.css (" Left")) ==0{image_obj.animate ({left:"-940px"}, +, function () {image_obj.css ({left:"940px"}); Image_obj.attr ("src", Ary[index]); Index++; if(Index >=ary.length) {Index=0; } }); }Else{image_obj.animate ({left:"0"}, +); } }
As above, we have written a function of moving the picture.
Because we started to write two images inside the body, so the index definition equals 2, we need to move only the div inside the two img, but the picture will change. After each move, the IMG empties and takes an array of add-in. In order not to add infinitely more, once the index is greater than or equal to the array length, index equals 0, and then starts again.
$ (function () { setinterval (function () { move_image ($ (". Img1")); Move_image ($ (". Img2")); }); Page load we can do the above function.
Here are the following:
The following is the complete code:
<! DOCTYPE Html>"Utf-8"/>{margin:0; padding:0; }. img_div{width:940px; height:423px; border:1px solid red; position:relative; Overflow:hidden; }. Img_div. img1{Position:absolute; Top:0; Left:0; }. Img_div. img2{Position:absolute; Top:0; left:940px; } </style> <script src=".. /js/jquery-1.9.1.min.js"> </script> <script>$ (function () {setinterval (function () {Move_image ($ (". IMG1")); Move_image ($ (". Img2")); }, -); }); varary = [ ".. /image/img1.jpg", ".. /image/img2.jpg", ".. /image/img3.jpg", ".. /image/img4.jpg" ]; varindex =2; function Move_image (image_obj) {if(Parseint (Image_obj.css (" Left")) ==0{image_obj.animate ({left:"-940px"}, +, function () {image_obj.css ({left:"940px"}); Image_obj.attr ("src", Ary[index]); Index++; if(Index >=ary.length) {Index=0; } }); }Else{image_obj.animate ({left:"0"}, +); } } </script>class="Img_div"> class="IMG1"Src=".. /image/img1.jpg"/> class="Img2"Src=".. /image/img2.jpg"/></div></body>View CodeThe above is a jquery do picture carousel, let me talk about using CSS to do the picture carousel:
CSS to write, first in the body to write a Div, div inside write moving pictures.
The code is as follows:
<body><div id="Center-top-center"> <div id="adanimation"> <ul> <li>"ad01.jpg"Width="100%"/></li> <li>"ad02.jpg"Width="100%"/></li> <li>"ad03.jpg"Width="100%"/></li> <li>"ad04.jpg"Width="100%"/></li> </ul> </div></div></body>
View CodeThen I started to write CSS. I'm writing about what Google Browser can do for you. Write the following code:
<style type="Text/css"> *{margin:0px;padding:0px;} #center-top-center{width:670px; } #adanimation {width: -%; Overflow:hidden; position:relative;} #adanimation ul li {float: Left; Width -%; } #adanimation ul {width: -%; -webkit-animation:adplayer 10s Linear infinite;list-style-Type:none} @-webkit-keyframes Adplayer { from, -% {margin-left:0px;} -%, -% {margin-left:- -%; } -%, the% {margin-left:- $%; } the%, -% {margin-left:- -%; } } </style>View CodeAs follows:
All codes are as follows:
<! DOCTYPE html>"en">"Utf-8"> <style type="Text/css"> *{margin:0px;padding:0px;} #center-top-center{width:670px; } #adanimation {width: -%; Overflow:hidden; position:relative;} #adanimation ul li {float: Left; Width -%; } #adanimation ul {width: -%; -webkit-animation:adplayer 10s Linear infinite;list-style-Type:none} @-webkit-keyframes Adplayer { from, -% {margin-left:0px;} -%, -% {margin-left:- -%; } -%, the% {margin-left:- $%; } the%, -% {margin-left:- -%; } } </style>"Center-top-center"> <div id="adanimation"> <ul> <li>"ad01.jpg"Width="100%"/></li> <li>"ad02.jpg"Width="100%"/></li> <li>"ad03.jpg"Width="100%"/></li> <li>"ad04.jpg"Width="100%"/></li> </ul> </div></div></body>View Codejquery picture carousel and CSS Picture 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
