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. axios 跨域配置

    axios跨域设置 找到项目config文件夹下的index.js文件,将dev中的proxyTable项中添加配置 proxyTable: { '/api': { target: 'https:// ...

  2. p标签间距问题

    用<p></p>标签写文本时,控制行与行之间的高度最好用line-height,不要用margin或padding:   因为P标签本身就带有一定的上下间距,且自带的间距在模拟 ...

  3. vue中做出购物车的功能

    效果展示: 一:html结构 <div id="buyButton" class="btn-buy"> <button onclick=&qu ...

  4. 从I/O事件到阻塞、非阻塞、poll到epoll的理解过程

    I/O事件   I/O事件 非阻塞I/O.在了解非阻塞I/O之前,需要先了解I/O事件 我们知道,内核有缓冲区.假设有两个进程A,B,进程B想读进程A写入的东西(即进程A做写操作,B做读操作).进程A ...

  5. (转)nginx应用总结（1）--基础认识和应用参数优化配置

    在linux系统下使用nginx作为web应用服务,用来提升网站访问速度的经验已五年多了,今天在此对nginx的使用做一简单总结. 一.nginx服务简介Nginx是一个高性能的HTTP和反向代理服务 ...

  6. JS filter使用

    filter 用于筛选数组中符合条件的所以元素,filter只能接受函数 注意:filter只返回筛选结果,不会对原来数组改变 实现方法: <html lang="en"&g ...

  7. js监听页面的scroll事件，当移到底部时触发事件

    //页面拉到底时自动加载更多 $(window).scroll(function(event){ var wScrollY = window.scrollY; // 当前滚动条位置 var wInne ...

  8. Vue的computed和methods区别

    1,computed里面定义的方法是以属性的方式(当然也可以以函数调用的方式)出现在html里面,而methods里面定义的方法是以函数的方式: 2,computed依赖于data里面的数据,只有相关 ...

  9. 代码管理_Git中获取两个标签之间的变更代码行数

    操作步骤: 1.先进入git的服务器,定位到 repositories 目录 2.再定位到具体的项目目录(登录bitbucket查看项目属性可以看到项目的存放目录),如下图: 3.浏览项目的标签,命令 ...

  10. Windows Azure 配置Active Directory 主机（3）

    步骤 4:在 CloudSite 中安装附加域控制器 1.登录到 YourVMachine,单击“开始”,键入“dcpromo”,然后按 Enter. 2.在“欢迎使用”页上,单击“下一步”. 3.在 ...