HTML+CSS代码：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>图片轮播</title>

<style>

    *{ margin:0; padding:0;}

    ul{ list-style:none;}

    .clear{ clear:both;}

    #box{

        width:500px;

        height:320px;

        margin:100px auto;

        border:#999 5px solid;

        position:relative;

        overflow:hidden;

    }

    .m_unit{

        width:10000px;

        height:320px;

        position:absolute;

        left:0px;

        top:0px;

    }

    .m_unit ul{overflow:hidden; list-style:none;}

    .m_unit ul li{float:left;}

    .btn{}

    .btn .btn_icon{ width:60px; height:60px; overflow:inherit; background:url(images/btn.png) no-repeat;}

    .btn #b_left{ position:absolute;top:50%;left:0;}

    .btn #b_right{ position:absolute;top:50%;right:0; background-position:-60px 0;}

    .dot{position:absolute; bottom:5px; right:10px;}

    .dot ul li{ width:20px; height:20px; float:left; margin-right:2px; background:#000; opacity:0.3;}

    .dot ul .initial{ background:#F00;opacity:0.8;}

</style>

</head>

<body>

    <div id="box">

        <div class="m_unit">

            <ul>

                <li><a href="#"><img src="data:images/a1.png"/></a></li>

                <li><a href="#"><img src="data:images/a2.png"/></a></li>

                <li><a href="#"><img src="data:images/a3.png"/></a></li>

                <li><a href="#"><img src="data:images/a4.png"/></a></li>

            </ul>

            <div class="clear"></div>

        </div>

        <div class="btn">

            <div id="b_left" class="btn_icon"></div>

            <div id="b_right" class="btn_icon"></div>

        </div>

        <div class="dot">

            <ul>

                <li class="initial"></li>

                <li></li>

                <li></li>

                <li></li>

            </ul>

        </div>

    </div>

</body>

</html>

JAVAScript+JQuery代码：

    <!--导入JQuery-->

    <script src="js/jquery-1.12.4.min.js"></script>

    <script>

        //获取图片长度

        var imgLength = $('.m_unit ul li').length;

        //拼接假0

        $('.m_unit ul').append($('.m_unit ul li').eq(0).clone());

        //信号量

        var idx =0;

        //自动轮播

        var timer = setInterval(rightBtn,2000);

        //鼠标进入box

        $('#box').mouseenter(function(){

            clearInterval(timer);

        });

        //鼠标离开box

        $('#box').mouseleave(function(){

            timer = setInterval(rightBtn,2000);

        });

        //右按钮的点击事件

        $('#b_right').click(rightBtn);

        function rightBtn(){

            idx++;

            $('.m_unit').animate({'left':-500 * idx},1000,function(){

                if(idx > imgLength-1){

                    idx = 0;

                    $(this).css('left','0px');

                }

            });

            dotChange();

        }

        //左按钮的点击事件

        $('#b_left').click(function(){

            idx--;

            if(idx < 0){

                idx =imgLength-1;

                $('.m_unit').css('left',-500 * imgLength);

            }

            $('.m_unit').animate({'left':-500 * idx},1000);

            dotChange();

        });

        //设置小圆点击事件

        $('.dot ul li').each(function(i) {

            $(this).click(function(){

                idx =i;

                $('.m_unit').animate({'left':-500 * idx},1000);

                dotChange();

            });

        });

        //设置小红点跟随轮播

        function dotChange(){

            var idxx=idx;

            if(idxx > imgLength-1) idxx=0;

            $('.dot ul li').eq(idxx).css({'background':'#F00','opacity':0.8}).siblings().css({'background':'#000','opacity':0.3});

        }

    </script>

JQuery图片轮播实例的更多相关文章

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

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

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

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

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

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

  4. jquery图片轮播插件slideBox

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

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

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

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

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

  7. jquery 图片轮播demo实现

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 图片轮播demo,弄清楚过程其实是一个很简单的东西,看网上都没有什么实质性的代码,就自己把过程捋了一遍实现了. 这次因为随手写的,所以没有做 ...

  8. jquery图片轮播效果(unslider)

    今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货un ...

  9. Jquery图片轮播和CSS图片轮播

    学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...

随机推荐

  1. linux查找工具(find,locate,whrers)

    find whereis locate 一.whereis whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件(参数-s).如果省略参数, ...

  2. 有关xerosploit运行报错问题的有效解决方案

    [安装xerosploit]安装xerosploit的步骤如下,我是将xerosploit直接克隆到了根目录下(使用“cd /”到达根目录) git clone https://github.com/ ...

  3. git push error: ! [rejected] failed to push some refs to . . .

    报错情况: 报错原因:远程库与本地库不一致造成的,需要把远程库同步到本地库! 解决办法: git pull --rebase origin master 这条指令是将远程库中的更新合并到本地库,--r ...

  4. mac 安装cocoapods

    按主command+空格 输入ter 就能看到终端 左键单机(直接点回车键也可以)打开即可 需要先安装ruby环境 安装rvm curl -sSL https://get.rvm.io | bash ...

  5. Djano调试工具debug-toolbar

    Djano调试工具debug-toolbar   django-debug-toolbar 调试工具使用文档 安装 pip install django-debug-toolbar 配置 在setti ...

  6. C-晾衣服

    链接:https://ac.nowcoder.com/acm/contest/892/C 题意: 鸡尾酒从杭州回来,囤积了许多衣服,洗好之后,他发现晾衣服是一件麻烦的事. 晾衣绳的长度只有L,而鸡尾酒 ...

  7. Netty（7-2）传List

    ObjectEchoServer protected void initChannel(SocketChannel ch) throws Exception { ChannelPipeline p = ...

  8. 单周期cpu设计代码解读

    目录 写在前面 单周期cpu设计代码讲解 概念回顾 Verilog代码讲解 写在前面 欢迎转载,转载请说明出处. 单周期cpu设计代码讲解 概念回顾 一.电子计算机的部件 分为:中央处理器(cpu). ...

  9. [转]c# 泛类型(泛型) 以及强类型与弱类型的 理解及优化

    [泛型的概念](1)没有泛型的时候,所有的对象都是以object为基础,如果要使用时必须进行强制类型转换,如果对于值类型,则会导致不断拆箱装箱的过程,对系统消耗很大.(2)使用泛型时不需要通过obje ...

  10. Java Lambda表达式教程与示例

    Lambda表达式是Java 8中引入的一个新特性.一个lambda表达式是一个匿名函数,而且这个函数没有名称且不属于任何类.lambda表达式的概念最初是在LISP编程语言中引入的. Java La ...