学习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 = ;
function move_image(image_obj){
if(parseInt(image_obj.css("left")) == ){ image_obj.animate({left:"-940px"},,function(){
image_obj.css({left:"940px"});
image_obj.attr("src",ary[index]);
index++;
if(index >= ary.length){
index = ;
}
}); }else{
image_obj.animate({left:""},);
}
}

如上,我们写了一个图片移动的函数。

因为我们开始在body里面就写了两个图片进去,所以index定义等于2,我们需要移动的只是div里面的两个img,但是里面的图片会变化。每次移动后那个img空下来后就取一个数组里面的加进去。为了不加得无限多,一旦index大于等于数组长度,index就等于0,再重新开始。

$(function(){
setInterval(function(){ move_image($(".img1"));
move_image($(".img2"));
},);
});

页面加载我们就可以进行上面的函数。

下面是效果图:

下面是完整的代码:

<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
<title></title>
<style>
*{
margin:;
padding:;
} .img_div{
width:940px;
height:423px;
border:1px solid red;
position: relative;
overflow: hidden;
} .img_div .img1{
position: absolute;
top:;
left:;
}
.img_div .img2{
position: absolute;
top:;
left:940px;
} </style>
<script src="../js/jquery-1.9.1.min.js"> </script>
<script>
$(function(){
setInterval(function(){ move_image($(".img1"));
move_image($(".img2"));
},);
}); var ary = [
"../image/img1.jpg",
"../image/img2.jpg",
"../image/img3.jpg",
"../image/img4.jpg"
];
var index = ;
function move_image(image_obj){
if(parseInt(image_obj.css("left")) == ){ image_obj.animate({left:"-940px"},,function(){
image_obj.css({left:"940px"});
image_obj.attr("src",ary[index]);
index++;
if(index >= ary.length){
index = ;
}
}); }else{
image_obj.animate({left:""},);
}
}
</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: %; 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: -%; }
%,% { margin-left: -%; }
%,% { margin-left: -%; }
} </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: %; 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: -%; }
%,% { margin-left: -%; }
%,% { margin-left: -%; }
} </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>

Jquery图片轮播和CSS图片轮播的更多相关文章

  1. 几种垂直居中的方式及CSS图片替换技术

    由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px   0; 以上方法针对块级元素和 ...

  2. jQuery图片轮播(一)轮播实现并封装

      利用面向对象自己动手写了一个封装好的jquery轮播对象,可满足一般需求,需要使用时只需调用此对象的轮播方法即可. demo:https://github.com/zsqosos/shopweb ...

  3. 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  4. 文字轮播与图片轮播?CSS 不在话下

    今天,分享一个实际业务中能够用得上的动画技巧. 巧用逐帧动画,配合补间动画实现一个无限循环的轮播效果,像是这样: 看到上述示意图,有同学不禁会发问,这不是个非常简单的位移动画么? 我们来简单分析分析, ...

  5. jq demo 轮播图,图片可调用,向左,自动+鼠标点击切换

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. jq demo 轮播图,图片可调用,向上,自动+鼠标点击切换

    1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...

  7. 换主页轮播的主题图片(4、删除)---轻开电子商务系统(企业入门级B2C站点)

    接(  换主页轮播的主题图片1 ) 文件:site/links/img0.html中的表单(第11行最后一个td) <td><if x="@{sys:canDo}" ...

  8. 妈蛋:kinMaxShow轮播图异常,WebUploader图片上传坑爹,图片被压缩了

    今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/image/index/banner/`.jpg" /> ...

  9. element-ui中轮播图自适应图片高度

    哈哈,久违了各位.我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码. 那个axios的使用不 ...

随机推荐

  1. 复选框输入Android Studio 如果修改LogCat的颜色,默认全是黑色看着挺不舒服的

    今天一直在查找复选框输入之类的问题,上午正好有机会和大家分享一下. 怎么找到并表现LogCat这里就不需要再讲了吧,主要说一下本篇的主题,如何修改他的颜色 .我们在使用Eclipse的时候应该都用过L ...

  2. [Unity3D]Unity3D游戏开发之使用EasyTouch虚拟摇杆控制人物移动

    大家好,欢迎大家关注我的博客,我是秦元培,我的博客地址是blog.csdn.net/qinyuanpei.今天呢,我们来一起学习在Unity3D中使用EasyTouch虚拟摇杆来控制人物移动.虽然Un ...

  3. javascript代码解释执行过程

    javascript是由浏览器解释执行的脚本语言,不同于java c,需要先编译后运行,javascript 由浏览器js解释器进行解释执行,总的过程分为两大块,预编译期和执行期 下面的几个demo解 ...

  4. Linux用户空间与内核空间(理解高端内存)

    Linux 操作系统和驱动程序运行在内核空间,应用程序运行在用户空间,两者不能简单地使用指针传递数据,因为Linux使用的虚拟内存机制,用户空间的数据可能被换出,当内核空间使用用户空间指针时,对应的数 ...

  5. 如何为Linux安装Go语言

    导读 Go 语言又称为 golang, 是由 Google 最初开发的一种开源编程语言,其在设计时就遵循了简单.安全和速度的 3 大原则.Go 语言具有多种调试.测试.分析和代码审查工具,如今 Go ...

  6. $.getJSON()方法的 callback说明

    $.getJSON()方法跨域 去取得服务器的json对象的时候,url的后缀最后带一个"callback=?"的参数作为成功的回调函数:如: var url = "${ ...

  7. 基于Linux的集群系统(八)--转

    引用位置:http://www.ibm.com/developerworks/cn/linux/cluster/linux_cluster/part8/index.html OSI参考模型及TCP/I ...

  8. Thrift CentOS安装和使用

    Thrift是Apache的一个开源的跨语言服务开发框架,它提供了一个代码生成引擎来构建服务,支持C++,Java,Python,PHP,Ruby,Erlang,Perl,Haskell,C#,Coc ...

  9. The Socket API, Part 5: SCTP

    转:http://www.linuxforu.com/2011/12/socket-api-part-5-sctp/ By Pankaj Tanwar on December 29, 2011 in  ...

  10. Docker 选项和命令

    选项 -D=true|false 使用 debug 模式.默认为 false. -H, --host=[unix:///var/run/docker.sock]: tcp://[host:port]来 ...