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. SP14932 LCA - Lowest Common Ancestor

    Description: 一棵树是一个简单无向图,图中任意两个节点仅被一条边连接,所有连通无环无向图都是一棵树.\(-Wikipedia\) 最近公共祖先(\(LCA\))是--(此处省去对\(LCA ...

  2. xxe漏洞分析

    xxe漏洞总结 xxe漏洞就是xml外部实体注入攻击,所以一定是针对xml编写的服务. xxe漏洞是把参数经过php输入流或者$HTTP_RAW_POST_DATA直接读入xml实体当中,参数可控且没 ...

  3. AtCoder Beginner Contest 071 ABCD

    1001 求个绝对值比较大小喽 1002 把字符串出现的字母记录一下,然后遍历a-z,谁第一个没出现就输出谁 1003 Problem Statement We have N sticks with ...

  4. JavaScript读取文本,并渲染在html

    html <pre id="myText" style="word-wrap: break-word; white-space: pre-wrap; white-s ...

  5. 开启 PHP 错误提示配置步骤详解

    PHP编码出错不提示,这对于开发来说,是很不方便的.下面讲解如何开启错误提示步骤: 1. 打开php.ini文件. 以我的ubuntu为例,这个文件在: /etc/php5/apache2 目录下. ...

  6. 老技术，UrlRewriter实现全站伪静态

    看人家做淘宝客很火,就做了个网站.seo的话当然需要全站伪静态了,问了下空间商不支持mvc,尼玛,好吧,isapi_rewrite支持吗?“额,不支持!” -_-! 额,好吧,搬出n年前的东西了:微软 ...

  7. zk实现服务选举

    非公平选举算法1)首先通过zk创建一个 /server 的PERSISTENT节点 2)多台机器同时创建 /server/leader EPHEMERAL子节点 3)子节点只能创建一个,后创建的会失败 ...

  8. feign hystrix加仪表盘

    Hystrix-dashboard是一款针对Hystrix进行实时监控的工具,通过Hystrix Dashboard我们可以在直观地看到各Hystrix Command的请求响应时间, 请求成功率等数 ...

  9. 【css】css2实现两列三列布局的方法

    前言 对于 flex 弹性布局相信大家都有所了解,它是 css3 中的属性,然而它具有一定的兼容性问题.楼主前几天面试时遇到了面试官需要设计一个两列布局,我当然就说父元素 flex 吧哩吧啦,然而需要 ...

  10. JS根据选择的日期计算年龄

    本例中用的是easyUI的datebox $('#cal_birthday').datebox({ onSelect: function(date){ //根据选则的日期计算年龄 //alert(da ...