自己写的轮播代码

来张样式效果图

先贴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. Qt入门（16）——组装窗口部件

    这个例子显示了创建几个窗口部件并用信号和槽把它们连接起来,和如何处理重新定义大小事件. #include <qapplication.h> #include <qpushbutton ...

  2. C# dll玩注入！.net运行时库内置！？

    Contents Introduction Back To Fundamentals Load The CLR Fundamentals Advanced DLL Injection Fundamen ...

  3. freemarker使用map

    freemaker强大的地方是还可以使用map. 一个场景就是对应后端的type类型,  type=01,02,03,04,   我们可以在controller定义一个map  typeMap,好处就 ...

  4. [转] 关于C++中模板中的typename和class的区别比较

    C++箴言:理解typename的两个含义 转自http://blog.csdn.net/dick_china/article/details/4522253 问题:在下面的 template dec ...

  5. Android监听ScrollView滑动到顶端和底部

    Android监听ScrollView滑动到顶端和底部     package cn.testscrollview; import android.os.Bundle; import android. ...

  6. C++ 求阶乘 四种方法

    来总结下求阶乘的各种方法哈. 写在最前:①各个代码仅仅是提供了求阶乘的思路,以便在实际须要时再来编码,代码并不健壮!②各个程序都在1到10内測试正确. 代码一: #include<iostrea ...

  7. Windows环境下安装IPython NoteBook

    本文的环境:64位windows8,32位python2.7.首先你要保证电脑上装有python,并且设置成环境变量. 1.windows命令行进入到python目录下的Scripts文件,或者在该目 ...

  8. Android的Touch系统简介（一）

    一.Android touch事件的相关概念 用户的Touch事件被包装成MotionEvent 用户当前的touch事件主要类型有: ACTION_DOWN: 表示用户开始触摸. ACTION_MO ...

  9. 三星笔记本R428安装xp win7双系统，切换系统重启才能进入系统解决办法。

    三星笔记本 XP win7 双系统切换重启解决方法 三星笔记本有个奇怪的现象,就是装有XP和win7双系统    xp切换到win7.进系统是会重启一次,并且bios回复光驱为第一启动项,win7切换 ...

  10. 你好，C++（12）怎样管理多个类型同样性质同样的数据？3.6 数组

    3.6  数组 学过前面的基本数据类型之后,我们如今能够定义单个变量来表示单个的数据.比如,我们能够用int类型定义变量来表示公交车的216路:能够用float类型定义变量来表示西红柿3.5元一斤. ...