示意图:

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. 【codeforces 499C】Crazy Town

    [题目链接]:http://codeforces.com/problemset/problem/499/C [题意] 一个平面,被n条直线分成若干个块; 你在其中的某一块,然后你想要要到的终点在另外一 ...

  3. Inoic 滚动条问题

    1.看图说话 2.没有超过一个页,怎样去掉图中的滚动条? 3修改后预览效果

  4. python基础---递归函数 知识点自查填空题

    什么是递归函数:在函数中调()叫递归函数. 递归函数最大递归深度是997或998----是()设的限制. 注:如果递归次数太多,就不适合使用递归来解决问题. 递归的缺点: 占(). 递归的优点:会让代 ...

  5. Python，anaconda及pycharm安装过程笔记

    1.Python Python有2.X和3.X版本,可以在Windows系统下共存.方法为:Windows下Python多版本共存 可参考: Python及pycharm安装 安装Python后可在c ...

  6. java基础之自定义单链表练习

    一.单链表 1.单链表是一种链式存取的数据结构,用一组地址任意的存储单元存放线性表中的数据元素.链表中的数据是以结点来表示的,每个结点的构成:元素(数据元素的映象) + 指针(指示后继元素存储位置), ...

  7. ubuntu下编译安装poco

    系统环境: ubuntu版本:Linux jfcai-VirtualBox 4.15.0-29-generic #31-Ubuntu SMP Tue Jul 17 15:39:52 UTC 2018 ...

  8. 逻辑备份(mysqldump/select into outfile)

    #mysqldump备份 shell> mysqldump -uroot -p -P4306 sakila actor>E:\sakila-actor.sql shell> mysq ...

  9. Linux Shell脚本经典案例

    开头加解释器:#!/bin/bash    语法缩进,使用四个空格:多加注释说明.    命名建议规则:变量名大写.局部变量小写,函数名小写,名字体现出实际作用.    默认变量是全局的,在函数中变量 ...

  10. ES6学习笔记之Symbol

    新的数据类型Symbol 1. 概述 ES5 的对象属性名都是字符串,这容易造成属性名的冲突.比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与 ...