示意图:

demo

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>首页</title>

     <style>

         *{margin:0px;padding:0px;}

         .wrap{width:700px;height:400px;margin:50px auto 0;position: relative;}

         .imgList img{width:700px;height:400px;position: absolute;left:0px;top:0px;}

         .btn {width:200px;height:20px;position: absolute;bottom: 10px;right:250px;}

         .btn ul li{width:18px;height:18px;border: 1px solid #ddd;list-style: none;border-radius: 9px;float: left;margin:0 6px;

         background: #3DB1FA;color: #ddd;text-align: center;cursor: pointer;}

         .btn ul li:hover{background: #0e23f0}

         .btn ul li.hov{background: #0e23f0}

         .btnL{position: absolute;left:20px;top:150px;width:50px;height:100px;line-height: 100px;font-size: 60px;color: #ddd;text-align: center;cursor: pointer}

         .btnR{position: absolute;right:20px;top:150px;width:50px;height:100px;line-height: 100px;font-size: 60px;color: #ddd;text-align: center;cursor: pointer;}

         .btnL:hover,.btnR:hover{background: rgba(0,0,0,.3)}

     </style>

 </head>

 <body>

 <div class="wrap">

     <div class="imgList">

         <img src="img/1.jpg" alt="" style="display: block">

         <img src="img/2.jpg" alt="" style="display: none">

         <img src="img/3.jpg" alt="" style="display: none">

         <img src="img/4.jpg" alt="" style="display: none">

         <img src="img/5.jpg" alt="" style="display: none">

     </div>

     <div class="btn">

         <ul>

             <li class="hov"></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

         </ul>

     </div>

     <div class="btnL">&lt;</div>

     <div class="btnR">&gt;</div>

 </div>

 <script src="../lib/jquery-1.12.2.js"></script>

 <script>

     var timer = null;

     var _index = 0;

     //小圆点hover切换

     $('.btn>ul>li').hover(function () {

         clearInterval(timer);

          _index = $(this).index();

         changImg(_index);

     },function () {

         autoPlay();

     });

      //左右切图

     $('.btnR').click(function () {

         clearInterval(timer);

         _index++;

         if(_index >4) {

            _index = 0;

         }

         changImg(_index);

     });

     $('.btnL').click(function () {

         clearInterval(timer);

         _index--;

         if(_index < 0) {

             _index = 4;

         }

         changImg(_index);

     });

     $('.btnR,.btnL').hover(function () {

         clearInterval(timer);

     },function () {

         autoPlay();

     });

     function changImg(_index) {

         $('.btn>ul>li').eq(_index).addClass('hov').siblings('li').removeClass('hov');

         $('.imgList>img').eq(_index).stop().fadeIn().siblings('img').stop().hide();

     }

     // 自动轮播

     function  autoPlay() {

         timer = setInterval(function () {

             _index++;

             if(_index >4) {

                 _index = 0;

             }

             changImg(_index);

         },2000);

     }

     autoPlay();

 </script>

 </body>

 </html>

JQuery-- 实例:小米左右切图,淡入淡出,自动，小圆点触发轮播图的更多相关文章

  1. 微信小程序的轮播图swiper问题

    微信小程序的轮播图swiper,调用后,怎样覆盖系统的 点,达到自己想要的效果 不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class=" ...

  2. 【自定义轮播图】微信小程序自定义轮播图无缝滚动

    先试试效果,可以通过设置参数调整样式 微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...

  3. JQuery的使用案例（二级联动，隔行换色，轮播图，广告插入）

    JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...

  4. 自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图

    引言 学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了.现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改mar ...

  5. CSS-用伪类制作小箭头（轮播图的左右切换btn）

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  6. js原生选项卡（自动播放无缝滚动轮播图）二

    今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...

  7. swiper轮播问题之一：轮播图内容为动态数据生成时轮播图无法自动轮播

    本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助.        首先,new Swiper的初始化最 ...

  8. 如何自定义微信小程序swiper轮播图面板指示点的样式

    https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...

  9. CSS-用伪元素制作小箭头（轮播图的左右切换btn）

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

随机推荐

  1. 08.Hibernate的一级缓存-->>Session

    Hibernate提供了两种缓存: 1.一级缓存:自带的不可卸载的,一级缓存的生命周期与Session一致,一级缓存成为Session级别的缓存 2.二级缓存:默认没有开启,需要手动配置才可以使用,二 ...

  2. [Swoole系列入门教程 4] 定时器与心跳demo

  3. 原生微信小程序的生命周期

    小程序的生命周期函数:onLaunch:function(){当启动小程序时触发小程序只会启动1次,一般为初次打开时一般只会触发一次},onShow:function(){当小程序从后台切入到前台时触 ...

  4. IE6下extjs 弹窗不加载内容（无法执行内部js）的解决方案

    //需要导入的文件,这里的路径需要些你自己的路径 <link rel="stylesheet" type="text/css" href="ex ...

  5. SQL Server中存储过程与函数的区别

    本质上没区别.只是函数有如:只能返回一个变量的限制.而存储过程可以返回多个.而函数是可以嵌入在sql中使用的,可以在select中调用,而存储过程不行.执行的本质都一样. 函数限制比较多,比如不能用临 ...

  6. 转I/O多路复用之select

    源地址:http://my.oschina.net/pathenon/blog/64090 select的功能可以用一句话来描述: 实现基于I/O多路复用的异步并发编程. 在具体讲解select之前我 ...

  7. 使用em为单位制作两列弹性布局

    一.DIV布局按照定位的方法分为:浮动方法(float),坐标定位方法(position),还有就是两者相结合的方法. 二.DIV布局按照定义单位的不同可分为:固定宽度布局.流体布局.弹性布局和混合布 ...

  8. pycharm2018激活

    pyCharm最新2018最新激活码 选择 Activate new license with License server (用license server 激活) 在 License sever ...

  9. TZ_07_SSM整合

    1.坐标版本控制: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...

  10. ESB介绍

    通过使用ESB,可以在几乎不更改代码的情况下,以一种无缝的非侵入方式使企业已有的系统具有全新的服务接口,并能够在部署环境中支持任何标准.更重要的是,充当“缓冲器”的ESB(负责在诸多服务之间转换业务逻 ...