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. php：比较两个txt文件，格式如下，分别取出a.txt有的b.txt没有的，b.txt有的a.txt没有的及两个都有的

    <?php /*比较两个txt文件,格式如下,分别取出a.txt有的b.txt没有的,b.txt有的a.txt没有的及两个都有的 * a.txt: * A * B * C * D * b.txt ...

  2. windows关闭端口方法

    windows关闭端口方法 在介绍各种端口的作用前,这里先介绍一下在Windows中如何关闭/打开端口,因为默认的情况下,有很多不安全的或没有什么用的端口是开启的,比如Telnet服务的23端口.FT ...

  3. 2016-2017 ACM-ICPC, NEERC, Southern Subregional Contest A. Toda 2 贪心 + 暴力

    A. Toda 2 time limit per test 2 seconds memory limit per test 512 megabytes input standard input out ...

  4. MapReduce实战项目：查找相同字母组成的字谜

    实战项目:查找相同字母组成的字谜 项目需求:一本英文书籍中包含有成千上万个单词或者短语,现在我们要从中找出相同字母组成的所有单词. 数据集和期望结果举例: 思路分析: 1)在Map阶段,对每个word ...

  5. springboot使用schedule定时任务

    定时任务一般会存在中大型企业级项目中,为了减少服务器.数据库的压力往往会采用时间段性的去完成某些业务逻辑.比较常见的就是金融服务系统推送回调,一般支付系统订单在没有收到成功的回调返回内容时会持续性的回 ...

  6. 文件操作函数及光标,tell,truncate

    一丶文件基本操作 1.打开文件 open(文件名(路径),mode = "?",encoding = "字符集") 2.文件路径: 1.绝对路径,从磁盘的根目录 ...

  7. $.ajax同步/异步（async:false/true）

    虽然说ajax用来执行异步请求的比较多,但有时还是存在需要同步执行的情况的. 比如:我需要通过ajax取执行请求以返回一个值,这个值在ajax后面是需要使用到的,这时就不能用异步请求了.这时候就需要使 ...

  8. Android 虚拟导航挡住应用底部解决方案（屏幕底部的三个按键）

    我在华为P6测试机上测试,发现底部的三个虚拟按钮遮挡了我的应用.类似效果如:https://www.zhihu.com/question/35292413#answer-28473700 解决方案 在 ...

  9. python中的构造函数和构造函数和析构函数的作用

    构造函数和构造函数和析构函数都属于python中的特殊方法 其中的“__del__”就是一个析构函数了,当使用del 删除对象时,会调用他本身的析构函数,另外当对象在某个作用域中调用完毕,在跳出其作用 ...

  10. Windows服务管理

    按键:win+R 输入:services.msc “服务和应用程序”界面选项打开 * sc命令的使用:create(创建) delete(删除)等 * service可执行文件路径的修改:win+R ...