自己写的轮播代码

来张样式效果图

先贴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. HNOI 2016 省队集训日记

    第一天 DeepDarkFantasy 从东京出发,不久便到一处驿站,写道:日暮里.  ——鲁迅<藤野先生> 定义一个置换的平方为对1~n的序列做两次该置换得到的序列.已知一个置换的平方, ...

  2. zznu 1052 前n项和

    这算是循环的入门题目了,因为n 是小于 10 的非负数,所以可以知道结果不过超出int范围. 等式左边的数每次自增一个a,可以用一个变量来表示 na = na * 10 + a, 意思就是每循环一次就 ...

  3. angularJS $watch $digest $apply

    一 简介AngularJS提供了一个非常酷的特性叫做双向数据绑定(Two-way Data Binding),这个特性大大简化了我们的代码编写方式.数据绑定意味着当View中有任何数据发生了变化,那么 ...

  4. webstrom开发微信小程序说明

    在操作之前,需要对webstrom做一些设置,如下 如果未安装node.js的朋友,请到如下地址 https://nodejs.org/en/ 安装(相信大家都是会的),如果安装完了之后,就使用如下的 ...

  5. Angular2学习

    1.新建项目 2.新建Model public class TodoItem { public int Id { get; set; } public string Key { get; set; } ...

  6. Ubuntu12.04安装hadoop

    1.      创建hadoop用户组和用户 a．  创建hadoop用户组 sudo addgroup hadoop b．  创建hadoop用户 sudo adduser –ingroup had ...

  7. SAP-MM：创建采购组织、采购组

    创建采购组织 路径:SPRO – IMG – 企业结构 – 定义 – 物料管理 – 维护采购组织   操作: Step 1.点击"新条目". Step 2.维护"采购组织 ...

  8. 基于SQL的日志分析工具myselect

    基本介绍 程序开发者常常要分析程序日志,包括自己打印的日志及使用的其他软件打印的日志,如php,nginx日志等,linux环境下分析日志有一些内置命令能够使用,如grep,sort,uniq,awk ...

  9. [转] 消息系统该Push/Pull模式分析

    信息推拉技术简介 “智能信息推拉(IIPP)技术”是在网上信息获取技术中加入了智能成份,从而有助于用户在海量信息中高效.及时地获取最新信息,提高了信 息系统主动信息服务的能力.如果引入基于IIPP的主 ...

  10. Linux Terminal 控制终端的使用

    1. Open new Terminal:Ctrl + Alt + T 或者 Ctrl + Shift + N 2. Open Tab:Ctrl + Shift + T 3. Close Tab:Ct ...