先上简单的html代码

<!DOCTYPE HTML>

<html>

    <head>

        <link rel="stylesheet" type="text/css" href="./css/init2.css">

        <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>

        <script type="text/javascript" src="./js/test2.js"></script>

    </head>

    <body>

        <div id="layout">

            <header  class="clearfix">

                <div id="banner">

                    <ul id="banner_img">

                        <li class="active"><img src="./img/1.jpg"></li>

                        <li><img src="./img/2.jpg"></li>

                        <li><img src="./img/3.jpg"></li>

                    </ul>

                </div>

            </header>

        </div>

    </body>

</html>

在这个html的目录下有三个同级的文件夹，img中放图片，css和js分别存放这个网页的css文件和js文件，这里用到了jquery，记得引入顺序，jquery一定要放在其他js前面。

html代码很简单，不做过多解释。

init2.css

*{

    margin: 0px ;

    padding: 0px ;

}

#layout{

    width: 960px ;

    margin: 0 auto ;

}

#banner{

    position: relative;

    overflow: hidden;

    width: auto;

    height: 200px;

    border-radius: 10px ;

    border: 2px solid black;

}

#banner_img li{

    float: left;

    list-style-type: none;

    position: absolute;

    left: -100% ;

}

#index{

    position: absolute;

    right: 8px ;

    bottom: 8px ;

}

#index li{

    float: left;

    width: 16px ;

    height: 16px ;

    text-align: center;

    line-height: 16px ;

    border-radius: 5px ;

    border:1px solid #FF7300 ;

    background: white;

    list-style: none;

    margin-left: 8px ;

    cursor: pointer;

}

.clearfix:after{

    content: "" ;

    height: 0px ;

    display: block;

    clear:both ;

}

.on

{

    background:#FF7300 ;

}

css基本上和前面的html中的类对应，claerfix来清除浮动，on是代表轮播图片的索引中当前的正播放的图片的索引，主要思路是把图片设置成绝对布局之后全部移动到父元素的一侧，然后再通过jquery动画来改变图片的位置，从而达到轮播的效果。

看一下对于鼠标悬停在图片区域的处理（参考别人的）：

        $("#banner").hover(function(){

            clearInterval(adTimer);

        },function(){

            adTimer=setInterval(function(){

                //alert(index) ;

                showImgs(index);

                index++;

                if(index==len){

                    index=0;

                }

            },2000)

        }).trigger('mouseleave');

hover（）是一种代替mouseenter和mouseleave的方法，听说比较好用。trigger（）来触发当前对象的一个状态，这里要先触发一次mouseleave的状态来初始化计时器，因为这里的设定是当鼠标移到$("#banner")上就销毁定时器，锁定当前图片，移开鼠标就重新添加定时器。

再来看看jquery动画的实现：

function showImgs(index)

{

    $(".active").animate({"left": "-100%"},1000);

    $(".active").removeClass('active') ;

    $("#banner_img li").eq(index).css('left', '100%');

    $("#banner_img li").eq(index).animate({"left": "0%"},1000);

    $("#index li").removeClass('on').eq(index).addClass('on') ;

    $("#banner_img li").eq(index).addClass('active') ;

}

这里的主要思路就是把有class=active的图片，也就是正在显示的图片进行左移，并去掉active类，同时把传进来index的所对应的图片放在父元素右边，然后也左移，这样就造成了一个接一个从右往左移的假象。然后把从右边移过来的图片添加上active类。

我们还需要一个方法来添加图片索引：

function addIndex(n)

{

    var ul = $("<ul id=\"index\"></ul>") ;

    for(var i=1;i<=n;i++)

    {

        var li = $("<li></li>") ;

        li.append(function(num){

                return num

            }(i)) ;

        ul.append(li) ;

    }

    ul.children().first().addClass('on') ;

    $("#banner").append(ul);

}

基本上就是这样，需要注意图片的宽度要和父元素一样，不然会有无法连续衔接或者部分溢出的问题。

全部js：

init();

function init()

{

    $(function(){

        var index = 1 ;

        var adTime ;

        var len = $("#banner_img li").length ;

        addIndex(len) ;

        $(".active").css('left', '0%');

        var bannerLi = $("#index li");

        //handle index

        $("#index li").mouseover(function() {

            index = $("#index li").index(this) ;

            jumpImgs(index) ;

            index++ ;

            if(index==len)

            {

                index = 0 ;

            }

        });

        //toggleInterval

        $("#banner").hover(function(){

            clearInterval(adTimer);

        },function(){

            adTimer=setInterval(function(){

                //alert(index) ;

                showImgs(index);

                index++;

                if(index==len){

                    index=0;

                }

            },2000)

        }).trigger('mouseleave');

    });

}

//auto add index

function addIndex(n)

{

    var ul = $("<ul id=\"index\"></ul>") ;

    for(var i=1;i<=n;i++)

    {

        var li = $("<li></li>") ;

        li.append(function(num){

                return num

            }(i)) ;

        ul.append(li) ;

    }

    ul.children().first().addClass('on') ;

    $("#banner").append(ul);

}

function jumpImgs(index)

{

    $(".active").css('left', '-100%');

    $(".active").removeClass('active')  ;

    $("#banner_img li").eq(index).css('left', '0%');

    $("#banner_img li").eq(index).addClass('active') ;

}

function showImgs(index)

{

    $(".active").animate({"left": "-100%"},1000);

    $(".active").removeClass('active') ;

    $("#banner_img li").eq(index).css('left', '100%');

    $("#banner_img li").eq(index).animate({"left": "0%"},1000);

    $("#index li").removeClass('on').eq(index).addClass('on') ;

    $("#banner_img li").eq(index).addClass('active') ;

}

jquery实现简单轮播的更多相关文章

  1. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  2. jQuery.YesShow - 图片轮播插件（带图片放大功能）

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  3. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  4. jquery实现导航图轮播

    版权声明:作者原创,转载请注明出处! 下面的几个栗子是使用jquery实现Banner轮播的效果,直接将代码贴出来,从最初级没有任何优化和封装的写法,一直到最后一个栗子,一步步进行了优化,加大程序的可 ...

  5. 自适应图片宽度的jQuery焦点幻灯轮播代码

    自适应图片宽度的jQuery焦点幻灯轮播代码 注意要1.7.2版本的jq才支持点击后显示点击的图片,不然就是一直顺序播放 演示   XML/HTML Code <div id="sli ...

  6. jQuery补充，基于jQuery的bxslider轮播器插件

    基于jQuery的bxslider轮播器插件 html <!DOCTYPE html> <html lang="zh-cn"> <head> & ...

  7. （转）jquery实现图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jQuery五屏轮播手风琴切换代码

    jQuery五屏轮播手风琴切换代码 在线演示本地下载

  9. JS---案例：简单轮播图

    案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点 < ...

随机推荐

  1. PHP上传文件限制的大小

    修改PHP上传文件大小限制的方法 1. 一般的文件上传,除非文件很小.就像一个5M的文件,很可能要超过一分钟才能上传完.但在php中,默认的该页最久执行时间为 30 秒.就是说超过30秒,该脚本就停止 ...

  2. PHP 操作redis 详细讲解 转的 http://www.cnblogs.com/jackluo/p/3412670.html

    phpredis是redis的php的一个扩展,效率是相当高有链表排序功能,对创建内存级的模块业务关系 很有用;以下是redis官方提供的命令使用技巧: 下载地址如下: https://github. ...

  3. Kafka生产者各种启动参数说明

    首先是启动一个生产者 final String kafkazk="localhost:9092"; String topic="testAPI"; Proper ...

  4. java垃圾回收 - 为什么要进行垃圾回收

    1.为什么要进行垃圾回收:      在C++中,对象所占的内存在程序结束运行之前一直被占用,在明确释放之前不能分配给其它对象:而在Java中,当没有对象引用指向原先分配给某个对象 的内存时,该内存便 ...

  5. 【刷题】洛谷 P4142 洞穴遇险

    题目背景 ZRQ在洞穴中准备采集矿物的时候遇险了!洞穴要塌了! 题目来源:zhoutb2333 题目描述 整个洞穴是一个 \(N*N\) 的方格图,每个格子形如 \((X,Y),1 \le X,Y \ ...

  6. Unity3D for VR 学习(10): Unity LOD Group 组件

    LOD (Level of Detail), 远小近大思想. LOD,在Unity中是用到了空间换时间的优化方法:即程序加载2套模型,导致包会增大:在运行时刻,远处的用面数少的模型–模糊一些,近处用面 ...

  7. 纪念一个日子QAQ

    嗯事情是这样的 今天早上考试的时候不知道为什么特别累,精神并不是很好,T1半平面交裸题  T2当时没有仔细看题,T3想了一段时间后会正解(9:30),但是好像很难写的样子啊.. 但是似乎由于模拟考并不 ...

  8. 洛谷 P3157 [CQOI2011]动态逆序对 解题报告

    P3157 [CQOI2011]动态逆序对 题目描述 对于序列\(A\),它的逆序对数定义为满足\(i<j\),且\(A_i>A_j\)的数对\((i,j)\)的个数.给\(1\)到\(n ...

  9. （转）Ubuntu 17.04_64上搭建巡风扫描系统(资产信息漏洞扫描内网神器）

    巡风简介 巡风是一款适用于企业内网的漏洞快速应急.巡航扫描系统,通过搜索功能可清晰的了解内部网络资产分布情况,并且可指定漏洞插件对搜索结果进行快速漏洞检测并输出结果报表.其主体分为两部分:网络资产识别 ...

  10. 【BZOJ 2754 喵星球上的点名】

    Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 2512  Solved: 1092[Submit][Status][Discuss] Descript ...