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 = ;
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图片轮播的更多相关文章
- 几种垂直居中的方式及CSS图片替换技术
由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px 0; 以上方法针对块级元素和 ...
- jQuery图片轮播（一）轮播实现并封装
利用面向对象自己动手写了一个封装好的jquery轮播对象,可满足一般需求,需要使用时只需调用此对象的轮播方法即可. demo:https://github.com/zsqosos/shopweb ...
- 基于jQuery带进度条全屏图片轮播代码
基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 文字轮播与图片轮播？CSS 不在话下
今天,分享一个实际业务中能够用得上的动画技巧. 巧用逐帧动画,配合补间动画实现一个无限循环的轮播效果,像是这样: 看到上述示意图,有同学不禁会发问,这不是个非常简单的位移动画么? 我们来简单分析分析, ...
- jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换
1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...
- 换主页轮播的主题图片（4、删除）---轻开电子商务系统(企业入门级B2C站点)
接( 换主页轮播的主题图片1 ) 文件:site/links/img0.html中的表单(第11行最后一个td) <td><if x="@{sys:canDo}" ...
- 妈蛋：kinMaxShow轮播图异常，WebUploader图片上传坑爹，图片被压缩了
今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/image/index/banner/`.jpg" /> ...
- element-ui中轮播图自适应图片高度
哈哈,久违了各位.我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码. 那个axios的使用不 ...
随机推荐
- 30.怎样在Swift中添加运行时属性？
和OC一样,Swift中也可以添加运行时属性.下面将提供一个完整的例子,演示如何给按钮点击事件添加运行时属性. 1.示例 import UIKit var s_GofButtonTouchDownKe ...
- android布局太深导致的 java.lang.StackOverflowError
E/AndroidRuntime( 1900): java.lang.StackOverflowError E/AndroidRuntime( 1900): at android.graphi ...
- 批量更改数据库COLLATION
企业内部有很多系统是繁体的,由于各方面的原因,公司目前正在实行简体化,但各系统中又有数据间的交换,所以系统只能一个一个的更改,以防同时出现过多的问题.由于原先数据库只能存储繁体,而原先已存在的数据则可 ...
- C#调用Excel VBA宏
近日的一系列工作是做网站的营运维护,因此做了大量的支持工具.有Excel中写VBA的,也有直接C#做的工具.有时需要在C#中执行Excel VBA宏,甚至有时还需要在执行了VBA宏之后,获取返回值再进 ...
- Android经常使用自己定义控件
http://www.see-source.com/androidwidget/list.html
- String当中的高效函数（优化）
1. indexOf()函数是一个执行速度非常快的函数,可以用其与subString()实现高效的字符串分割,比内置的要高效. 2. charAt()方法也是高效率的函数,可以用其实现高效的start ...
- Java项目经验——程序员成长的关键（转载）
Java就是用来做项目的!Java的主要应用领域就是企业级的项目开发!要想从事企业级的项目开发,你必须掌握如下要点:1.掌握项目开发的基本步骤2.具备极强的面向对象的分析与设计技巧3.掌握用例驱动.以 ...
- BootStrap2学习日记16---选项卡内容
代码: <ul class="nav nav-tabs"> <li class="active"><a href="#t ...
- 认识C中的结构体
C中结构体是另外一种表示数据形式的方式,结构体中可以表示C中的基本数据形式,如int,double....结构体可以让我们更好的表示数据.下面来看看结构体. 说到结构体首先要了解的是它的申明形式,要申 ...
- Mosaic HDU 4819 二维线段树入门题
Mosaic Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 102400/102400 K (Java/Others)Total S ...