学习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. OSGI（面向Java的动态模型系统）

    基本简介编辑 OSGI服务平台提供在多种网络设备上无需重启的动态改变构造的功能.为了最小化耦合度和促使这些耦合度可管理,OSGi技术提供一种面向服务的架构,它能使这些组件动态地发现对方.OSGi联 O ...

  2. Firefox 32 支持 Public Key Pinning 对抗中间人攻击。

    Firefox 32 支持 Public Key Pinning 对抗中间人攻击.8月28日消息,即将发布的Firefox 32将支持Public Key Pinning机制,以防止中间人攻击.Pub ...

  3. Codeforces Round #342 (Div. 2) A - Guest From the Past 数学

    A. Guest From the Past 题目连接: http://www.codeforces.com/contest/625/problem/A Description Kolya Geras ...

  4. HttpWebRequest post请求获取webservice void数据信息

    private void button2_Click(object sender, EventArgs e) { Hashtable ht = new Hashtable(); ht["sc ...

  5. C#生成软件注册码

    开发软件时,当用到商业用途时,注册码与激活码就显得很重要了.现在的软件破解技术实在在强了,各种国内外大型软件都有注册机制,但同时也不断地被破解.下面发的只是一个常用版本,发出源码被破就更容易了,但我们 ...

  6. 创建C#串口通信程序详解

    在.NET平台下创建C#串口通信程序,.NET 2.0提供了串口通信的功能,其命名空间是System.IO.Ports.这个新的框架不但可以访问计算机上的串口,还可以和串口设备进行通信.我们将使用标准 ...

  7. Android 手机设置CMWAP 接入点

    Android 手机设置CMWAP 接入点 设置--- 无限控件---移动网络设置---接入点名称----再按菜单---选择新apn 第一步,设置CMNET 上网APN 新建 APN 1.名称:cmn ...

  8. DirectSound的应用

    假设仅仅使用PlaySound()这个API函数来表现声音效果的话,那么就无法表现出声音的混音效果,由于PlaySound在播放还有一个声音时,必定会导致现有声音的停止.因此,使用 PlaySound ...

  9. 关于MonoDevelop自动缩进的设置

    monoDevelop 下载地址:http://monodevelop.com/Download 下载安装之后,可在unity Edit->Preference->External Too ...

  10. android 下修改 hosts文件 及 out of memory的解决

    因为android模拟器host文件无法修改,导致无法通过域名使用http方法调用内网服务,因此从网上大量转载的一种方法,这种方法: 1. 通过emulator -avd avdName -parti ...