示意图:

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. Odoo的权限

    Odoo的权限的核心是权限组(res_groups).对每个权限组,可以设置权限组的菜单表示,对象表示,记录规则表示,字段表示. 1．菜单/对象级别 设置哪些人可以访问哪些菜单/对象,对象的访问权限包 ...

  2. JEECMS自定义标签

    查看JEECMS的源代码发现开发者版本还没有类似现成的统计标签,一种解决的办法是使用现有的JEECMS标签,像这样Struts( [@cms_content_list channel=id]${tag ...

  3. [jeecms]获取父栏目下的子栏目名称

    [@cms_channel_list parentId='父栏目id'] [#list tag_list as c] <a href="${c.url}">${c.na ...

  4. PAT甲级——A1044 Shopping in Mars

    Shopping in Mars is quite a different experience. The Mars people pay by chained diamonds. Each diam ...

  5. 016-WebDriver API（2）

    1. 多表单切换 WebDriver只能在一个页面上对元素进行识别和定位,无法直接定位frame/iframe表单内嵌页面上的元素,这是就需要通过switch_to.frame()方法将当前定位的主体 ...

  6. swoole入门abc

    1. 入门abc 1.1 github账号添加 第一步依然是配置git用户名和邮箱 git config user.name "用户名" git config user.email ...

  7. js 获取复选框 和 并改变状态

    function checkAll() { var checkbox = document.getElementById('vegeids');// var boxes = document.getE ...

  8. hadoop2.2 window下报错的问题（winutils.exe）

    在windows下开发hadoop一直正常,但把hadoop集群升级到2.0版本以上,在eclipse下执行程序会报打不到winutils.exe的错误,这是因为hadoop2.2没有发布winuti ...

  9. 入门servlet：request请求转发和共享数据

    request 请求转发:一种在服务器内部的资源跳转方式 步骤: 1.通过request对象获取请求转发器对象:RequestDispatcher getRequestDispatcher(Strin ...

  10. Luogu P1311 选择客栈(前缀和)

    P1311 选择客栈 题意 题目描述 丽江河边有\(n\)家很有特色的客栈,客栈按照其位置顺序从\(1\)到\(n\)编号.每家客栈都按照某一种色调进行装饰(总共\(k\)种,用整数\(0\)~\(k ...