Jquery image carousel and CSS image carousel, jquerycss
After learning Jquery, it is much simpler than writing source code. We used JQuery to create an image carousel animation, which is easier than CSS. Next I will explain how to use JQuery to write data.
<body><div class="img_div"> </div></body>
This is very simple in the body. As shown above, add two img In the div.
Now we will start writing javascript. First, do not forget to introduce the Jquery file. As follows:
<script src="../js/jquery-1.9.1.min.js">
There is nothing to say about this, but sometimes pay attention not to write the path wrong.
var ary = [ "../image/img1.jpg", "../image/img2.jpg", "../image/img3.jpg", "../image/img4.jpg" ];
As shown above, we need to store the image to be moved in an array first.
var index = 2; function move_image(image_obj){ if(parseInt(image_obj.css("left")) == 0){ image_obj.animate({left:"-940px"},1000,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"},1000); } }
As shown above, we have written a function for moving images.
Because we started to write two images in the body, so the index definition is equal to 2. We need to move only the two img In the div, but the images in it will change. After each move, the img is empty and then an array is added. In order not to add an infinite number, once the index is greater than or equal to the length of the array, the index is equal to 0, and then start again.
$(function(){ setInterval(function(){ move_image($(".img1")); move_image($(".img2")); },2000); });
After loading the page, we can perform the above functions.
Below is:
The complete code is as follows:
<! DOCTYPE html> <meta charset = "UTF-8"/> The above is the image carousel created by JQuery. Next I will introduce how to use CSS for image carousel:Css: First, write a div in the body, and write a moving image in the div.
The Code is as follows:
<Body> <div id = "center-top-center"> <div id = "adanimation"> <ul> <li> </li> </li> </li> </li> </ul> </div> </ div> </body>View CodeThen I began to write CSS. What I wrote is applicable to Google browsers. The written code is as follows:
<Style type = "text/css"> * {margin: 0px; padding: 0px;} # center-top-center {width: 670px;} # adanimation {width: 100%; overflow: hidden; position: relative;} # adanimation ul li {float: left; width: 25% ;}# adanimation ul {width: 400%;-webkit-animation: adplayer 10 s linear infinite; list-style-type: none} @-webkit-keyframes adplayer {from, 25% {margin-left: 0px;} 30%, 50% {margin-left: -100%;} 60%, 75% {margin-left:-200%;} 80%, 100% {margin-left:-300% ;}</style>View CodeAs follows:
All code is as follows:
<! DOCTYPE html>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
