学习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{
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"));
},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{
width: 670px;
}
#adanimation { width: 100%; overflow: hidden; position: relative; }
#adanimation ul li { float: left; width: 25%; }
#adanimation ul { width: 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{
width: 670px;
}
#adanimation { width: 100%; overflow: hidden; position: relative; }
#adanimation ul li { float: left; width: 25%; }
#adanimation ul { width: 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>
时间： 2025-01-13 06:08:23