示意图:

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. Java中将字符串转为驼峰格式

    本文不再更新,可能存在内容过时的情况,实时更新请移步我的新博客:Java中将字符串转为驼峰格式: 使用CaseUtils 对Java字符串进行转换为驼峰格式: CaseUtils.toCamelCas ...

  2. Odoo中Qweb使用入门

    参考 可参考官网例子https://doc.odoo.com/trunk/web/qweb/或 http://thierry-godin.developpez.com/openerp/tutorial ...

  3. Elasticsearch系列(二)--query、filter、aggregations

    本文基于ES6.4版本,我也是出于学习阶段,对学习内容做个记录,如果文中有错误,请指出. 实验数据: index:book type:novel mappings: { "mappings& ...

  4. CA证书制作

    目录 手动制作CA证书 1.安装 CFSSL 2.初始化cfssl 3.创建用来生成 CA 文件的 JSON 配置文件 4.创建用来生成 CA 证书签名请求(CSR)的 JSON 配置文件 5.生成C ...

  5. Java爬虫的实现

    距离上一次写爬虫还是几年前了,那时候一直使用的是httpclient. 由于最近的项目又需要使用到爬虫,因此又重新查询了一些爬虫相关的框架,其中最合适的是WebMagic 官方文档:https://g ...

  6. KOA 学习（二）

    app.listen(...) Koa 应用并非是一个 1-to-1 表征关系的 HTTP 服务器. 一个或多个Koa应用可以被挂载到一起组成一个包含单一 HTTP 服务器的大型应用群. var ko ...

  7. HTML5中类jQuery选择器querySelector和querySelectorAll的使用

    支持的浏览IE8+,Firefox3.5+,Safari3.1+ Chrome和Opera 10+ 1.querySelector()方法接收一个选择符,返回第一个匹配的第一个元素,如果没有返回nul ...

  8. 2019-8-31-C#-程序集数量对软件启动性能的影响

    title author date CreateTime categories C# 程序集数量对软件启动性能的影响 lindexi 2019-08-31 16:55:58 +0800 2018-10 ...

  9. GVEdit中使用graphviz

    官方文档 安装完graphviz后,文档在安装目录下,位置如下 E:\Gra2.38\share\graphviz\doc\html 中文乱码解决 将文件保存为utf-8编码 fontname=&qu ...

  10. 删除n天前的文件或文件夹 bat批处理

    @echo off @echo deleting... FORFILES /p "D:\a" /D -1 /C "cmd /c echo deleting @file . ...