自己写的轮播代码

来张样式效果图

先贴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. Visual Studio Code尝试体验

    背景了解 偶然间看到一篇大赞Visual Studio Code的文章,就搜索了一下,发现网上基本一致的好评.虽然微软在2015年4月29号 Build 2015 大会上才发布,但免费,轻量,跨平台版 ...

  2. 测试使用wiz来发布blog

    晚上尝试了下用wiz写随笔并发布,貌似成功了,虽然操作体验和方便性上不如word,但起码它集成了这个简单的功能可以让我用:如果能让我自动新建blog文章并自动定时更新发布就完美了.2013年7月5日1 ...

  3. 数据结构（Splay平衡树）：HAOI2008 排名系统

    [HAOI2008] 排名系统 [题目描述] 排名系统通常要应付三种请求:上传一条新的得分记录.查询某个玩家的当前排名以及返回某个区段内的排名记录.当某个玩家上传自己最新的得分记录时,他原有的得分记录 ...

  4. IOI 2009：Mecho

    IOI2009 Mecho Time Limit: 10000ms Memory Limit: 262144KB This problem will be judged on SPOJ. Origin ...

  5. select的使用（二）

    多表查询 /*基本连接*/ select a.Name,b.Name from T_Employee a,T_Department b where a.DepartmentId=b.Id /*内连接, ...

  6. 光学字符识别OCR

    1.功能: 光学字符识别(OCR,Optical Character Recognition)是指对文本资料进行扫描,然后对图像文件进行分析处理,获取文字及版面信息的过程 2.典型应用: 名片扫描 3 ...

  7. [OSX] 取消开机启动

    以Pulse Secure为例 参考:https://kb.pulsesecure.net/articles/Pulse_Secure_Article/KB26679 输入指令: launchctl ...

  8. linux内网机器访问外网代理设置squid

    公司一般出于安全考虑, 在同一局域网中只有一台机器可以访问外网,运维进行了整体的限制, 但是在后面的工作中,需要在机器上安装一些软件,及命令,所以其他的机器需要访问外网来简化工作, 但又不能打乱原有运 ...

  9. Spring与SpringMVC的容器关系分析

    Spring和SpringMVC作为Bean管理容器和MVC层的默认框架,已被众多WEB应用采用,而实际使用时,由于有了强大的注解功能,很多基于XML的配置方式已经被替代,但是在实际项目中,同时配置S ...

  10. ab测试

    PS:网站性能压力测试是性能调优过程中必不可少的一环.只有让服务器处在高压情况下才能真正体现出各种设置所暴露的问题.Apache中有个自带的,名为ab的程序,可以对Apache或其它类型的服务器进行网 ...