自己写的轮播代码

来张样式效果图

先贴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. hdoj 4552 怪盗基德的挑战书【求前缀在字符串中出现的次数之和】

    怪盗基德的挑战书 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total Su ...

  2. [置顶] ruby变量详解(收集+整理)

    ruby的变量有局部变量,全局变量,实例变量,类变量,常量. 1.局部变量 局部变量以一个小写字母开头或下划线开头 局部变量有局部作用域限制(比如一个block内),它的作用域起始于声明处,结束于该声 ...

  3. CentOS6.5 mini开启网络

    1.编辑network配置 vim /etc/sysconfig/network-scripts/ifcfg-eth0 1 2 3 4 5 6 7 DEVICE=eth0 HWADDR=00:0C:2 ...

  4. .NET中的程序集（Assembly）

    在.NET 中,新引入了一个程序集的概念,就是指经由编译器编译得到的,供CLR进一步编译执行的那个中间产物,在WINDOWS系统中,它一般表现为.dll,或者是.exe的格式,但是要注意,它们跟普通意 ...

  5. 安卓四大组件之一activity

    概要说明 Activity是Android组件中最基本也是最为常见用的四大组件(Activity,Service服务,Content Provider内容提供者,BroadcastReceiver广播 ...

  6. Python监控日志程序

    一个简易的日志监控的脚本,功能如下:1.windows环境2.当匹配日志关键字时会发出声音,匹配的关键字不同,播放的声音不同3.能做到实时响应 注意:是在win环境下哦 直接上代码吧 1 2 3 4 ...

  7. WinForm(C#)CheckedlistBox绑定数据，并获得选中的值(ValueMember)和显示文本(DisplayMember)

    本文中我将和大家讨论关于在WinForm开发中给CheckedlistBox空间绑定数据源,并获取控件中选中的所有元素的显示文本(DisplayMember)和对应的实际值(ValueMember)的 ...

  8. 卸载Symantec Endpoint Protection, 无需password的卸载方法

    近期一次偶然的机会, 被人装了个Symantec在电脑上, 搞得各种报警, 验证, 烦死. 然后就自然而然的想卸载掉这个该死的杀毒软件, 没想到这个杀毒软件竟然还是个流氓杀毒软件, 卸载还须要pass ...

  9. inux 安装中文支持包及中文字符集配置 +i18n

    由于某些原因系统安装时未安装中文支持,导致后续应用出现中文方块乱码现象, 解决方法很简单,当然不是重装,只需以下三步即可搞定. .安装中文包: yum -y groupinstall chinese- ...

  10. Android系统移植与驱动开发--第四章

    第四章 源代码的下载和编译 一个android内核相当于4G,而一个Linux内个只有几百M,Linux内核相对于android内核来说实在是小巫见大巫.了解android源代码不一定要详细了解,只去 ...