自己写的轮播代码

来张样式效果图

先贴HTML样式

<body>

    <div id = "wrap">

        <div id="lunbo-img">

            <img src="data:images/lunbo01.jpg" alt="" width="500" height="750">

            <img src="data:images/lunbo02.jpg" alt="" width="500" height="750">

            <img src="data:images/lunbo03.jpg" alt="" width="500" height="750">

            <img src="data:images/lunbo04.jpg" alt="" width="500" height="750">

            <img src="data:images/lunbo05.jpg" alt="" width="500" height="750">

            <img src="data:images/lunbo06.jpg" alt="" width="500" height="750">

            <img src="data:images/lunbo07.jpg" alt="" width="500" height="750">

        </div>

    <ul id = "lunboNum">

        <li class="currentNum">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

    </ul>

    </div>

</body>

css样式

*{

            margin:0px; padding:0px;

        }

        body{

            background: #999;

        }

        li{

            line-height: 50px;

            margin:5px auto;

            list-style: none;

            width:80px;

            height: 50px;

            color:#C0FF3E;

            font-size: 30px;

            background: #9370DB;

            cursor: pointer;

        }

        img{

            cursor: pointer;

        }

        div#wrap{/*包裹层*/

            width:600px;

            height:750px;

            background:#312347;

            margin:0px auto;

        }

        div#lunbo-img img:not(:first-of-type){/*除了第一张图片其他全部隐藏*/

            display:none;

        }

        div#lunbo-img img{

            float:left;

        }

        div#wrap ul{

            text-align:center;

            width:100px;

            float:right;

        }

        .currentNum{

            background:#90EE90;

            color:#8A2BE2;

        }

    </style>

jquery 代码

<script >

    $(function() { 

         var currentIndex;//当前索引值

         var picTotal = $("img").length;//当前照片数量

         var ToDisplayPicNumber = 0;//当前自动轮播索引值

         $("li").each(function() {//获取li并且绑定点击事件

             $(this).click(function(){

                 displayPic(this);

                 ToDisplayPicNumber = $(this).index();

             })

         })

         function displayPic(obj){

             currentIndex = $(obj).index();

             //ToDisplayPicNumber = currentIndex;

             $(obj).siblings().removeClass("currentNum").end().addClass("currentNum");

            $("#lunbo-img").children().hide();

             $("#lunbo-img img").eq(currentIndex).fadeIn();

        }

        var l = setInterval(function(){//定时器

            autoDisplayPic();

        },2000);

        function autoDisplayPic(){//轮播代码

            ToDisplayPicNumber = (ToDisplayPicNumber + 1) % picTotal;

            $("li").eq(ToDisplayPicNumber).trigger("click");

        }

        $("img").mouseover(function() {//鼠标移入图片清除定时器

            clearInterval(l);

        }).mouseout(function() {

            l = setInterval(function(){//鼠标移出图片恢复定时器

                autoDisplayPic();

            },2000);

        })

    })

    </script>

jquery图片轮播代码的更多相关文章

  1. jQuery轻量级京东图片轮播代码等

    http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码   查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...

  2. 基于jQuery可悬停控制图片轮播代码

    基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览   源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...

  3. 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码

    css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...

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

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

  5. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  6. jquery图片轮播插件slideBox

    效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...

  7. Jquery 图片轮播实现原理总结

    Jquery 图片轮播实现原理总结 以前要做图片轮播效果的时候,总是在网上找一段jquery的复制粘贴进去,只索取不奉献,今个就把我对这个的实现原理讲解一下. 首先说下,我在网上找的例子全是用的UL ...

  8. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  9. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

随机推荐

  1. bzoj3438

    很容易想到是最小割模型首先对于一个点i,从s到i连一条容量为ai的边,再从i连一条容量为bi的边到t然后就是处理附加权的问题了一开始受到之前的思维定势的影响,一直在思考怎么在作物之间连边由于每种额外收 ...

  2. CF-164C. Machine Programming(最小费用最大流)

    题意: 给你n个任务,k个机器,n个任务的起始时间,持续时间,完成任务的获利 每个机器可以完成任何一项任务,但是同一时刻只能完成一项任务,一旦某台机器在完成某项任务时,直到任务结束,这台机器都不能去做 ...

  3. 字符串（后缀自动机）：NOI 2016 优秀的拆分

    [问题描述] 如果一个字符串可以被拆分为 AABB 的形式,其中 A 和 B 是任意非空字符串, 则我们称该字符串的这种拆分是优秀的. 例如,对于字符串 aabaabaa,如果令 A = aab, B ...

  4. selenuim ide回放时出现的问题

    [error] Unexpected Exception: fileName -> chrome://selenium-ide/content/selenium-core/scripts/htm ...

  5. QTP自传之描述性编程

    描述性编程,即采用描述性的语言定位对象,不需要事先将对象添加到对象库中.下面,就说说如何使用描述性编程,我们将继续使用对象库编程中的网页. 使用描述性编程的两种方法 直接描述 对象("属性名 ...

  6. HDOJ 2056 Rectangles

    Problem Description Given two rectangles and the coordinates of two points on the diagonals of each ...

  7. [Locked] Meeting Room I && II

    Meeting Room Given an array of meeting time intervals consisting of start and end times [[s1,e1],[s2 ...

  8. 用Myeclipse 编写struts.xml时，自动提示

    之所以不自动提示,是因为这个xml它不知道自己的xml格式是什么有哪些标签,所以不知道该怎么提示 所以就要给它引入格式,所以要引入XSD或者DTD文件 1.首先打开MyEclipse的窗口,选择“Wi ...

  9. 【索引】Volume 0. Getting Started

    AOAPC I: Beginning Algorithm Contests (Rujia Liu) Volume 0. Getting Started 10055 - Hashmat the Brav ...

  10. ios中框架介绍

    ios中框架介绍 参考博客: 参考文章:框架介绍 框架介绍 框架就是一个目录,一个目录包含了共享库,访问共享库里面的代码的头文件,和其他的图片和声音的资源文件.一个共享库定义的方法和函数可以被应用程序 ...