学习Jquery以后，很多时候觉得比写源生代码要简单一点。我们用JQuery做了一个图片轮播的动画，感觉比写CSS要简单一些。下面我来具体讲一下是怎么用JQuery来写。
<body> <div class="img_div"> <img class="img1" src="../image/img1.jpg" /> <img class="img2" src="../image/img2.jpg" /> </div> </body>
这个在body的时候很简单。如上所示，在div 里面加上两个img 就行了。
下面要开始写javascript了。首先不要忘记引入Jquery文件。如下：
<script src="../js/jquery-1.9.1.min.js">
这个没有什么说的，只是有时候注意一下不要把路径写错了。
var ary = [ "../image/img1.jpg", "../image/img2.jpg", "../image/img3.jpg", "../image/img4.jpg" ];
如上，我们需要把需要移动到的图片先存放在一个数组里面。
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); } }
如上，我们写了一个图片移动的函数。
因为我们开始在body里面就写了两个图片进去，所以index定义等于2，我们需要移动的只是div里面的两个img,但是里面的图片会变化。每次移动后那个img空下来后就取一个数组里面的加进去。为了不加得无限多，一旦index大于等于数组长度，index就等于0，再重新开始。
$(function(){ setInterval(function(){ move_image($(".img1")); move_image($(".img2")); },2000); });
页面加载我们就可以进行上面的函数。
下面是效果图：
下面是完整的代码：
<!DOCTYPE html> <html> <meta charset="utf-8"/> <head> <title></title> <style> *{ margin:0; padding:0; } .img_div{ 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")); },2000); }); var ary = [ "../image/img1.jpg", "../image/img2.jpg", "../image/img3.jpg", "../image/img4.jpg" ]; 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); } } </script> </head> <body> <div class="img_div"> <img class="img1" src="../image/img1.jpg" /> <img class="img2" src="../image/img2.jpg" /> </div> </body> </html>
以上是JQuery做的图片轮播，下面我再讲一下用CSS来做图片轮播：
css来写，首先在body里面写个div ，div里面写入移动的图片。
代码如下：
<body> <div id="center-top-center"> <div id="adanimation"> <ul> <li><img src="ad01.jpg" width="100%" /></li> <li><img src="ad02.jpg" width="100%" /></li> <li><img src="ad03.jpg" width="100%" /></li> <li><img src="ad04.jpg" width="100%" /></li> </ul> </div> </div> </body>
然后就开始写CSS了。我写的是谷歌浏览器能适用的。写的代码如下：
<style type="text/css"> *{margin: 0px;padding: 0px;} #center-top-center{ 670px; } #adanimation { 100%; overflow: hidden; position: relative; } #adanimation ul li { float: left; 25%; } #adanimation ul { 400%; -webkit-animation:adplayer 10s 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>
效果图如下：
所有代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> *{margin: 0px;padding: 0px;} #center-top-center{ 670px; } #adanimation { 100%; overflow: hidden; position: relative; } #adanimation ul li { float: left; 25%; } #adanimation ul { 400%; -webkit-animation:adplayer 10s 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> </head> <body> <div id="center-top-center"> <div id="adanimation"> <ul> <li><img src="ad01.jpg" width="100%" /></li> <li><img src="ad02.jpg" width="100%" /></li> <li><img src="ad03.jpg" width="100%" /></li> <li><img src="ad04.jpg" width="100%" /></li> </ul> </div> </div> </body> </html>