你的位置:首页 > Java教程

[Java教程]Jquery图片轮播和CSS图片轮播


学习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>

View Code

以上是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>

View Code

然后就开始写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>

View Code

效果图如下:

所有代码如下:

<!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>

View Code