JQuery-- 实例:小米左右切图,淡入淡出,自动，小圆点触发轮播图

示意图:

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-- 实例:小米左右切图,淡入淡出,自动，小圆点触发轮播图的更多相关文章

微信小程序的轮播图swiper问题
微信小程序的轮播图swiper,调用后,怎样覆盖系统的点,达到自己想要的效果不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class=" ...
【自定义轮播图】微信小程序自定义轮播图无缝滚动
先试试效果,可以通过设置参数调整样式微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...
JQuery的使用案例（二级联动，隔行换色，轮播图，广告插入）
JQuery的使用案例 (一)利用JQuery完成省市二级联动第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份第二步:创建二维数组来存储省份和城市第三步:遍历二维数组中的 ...
自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图
引言学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了.现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改mar ...
CSS-用伪类制作小箭头（轮播图的左右切换btn）
先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...
js原生选项卡（自动播放无缝滚动轮播图）二
今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...
swiper轮播问题之一：轮播图内容为动态数据生成时轮播图无法自动轮播
本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助. 首先,new Swiper的初始化最 ...
如何自定义微信小程序swiper轮播图面板指示点的样式
https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...
CSS-用伪元素制作小箭头（轮播图的左右切换btn）
先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

随机推荐

如何解决mysql服务器load高
.登录主机 # ssh hostname .确定是否是mysql导致 # top .查看是哪些sql正在慢查询 # mysql -h hostname -P port -u username # sh ...
html常用标签6-表单标签
1.表单的初始化标签 <form action="#" method="get"> </form> ...
BZOJ 1933 [Shoi2007]Bookcase 书柜的尺寸
神奇的dp优化. 考虑6维状态的dp,分别表示三行高和宽,显然MLE&&TLE. 把高排个序,从大到小往架上放,那么若不是重开一行便对高度没有影响. 然后求出宽度的sum,dp[i][ ...
python图像翻转
准备跟着台湾的一个机器学习课程好好学学python,链接在这http://speech.ee.ntu.edu.tw/~tlkagk/courses_ML16.html 该课程开始有一个作业,叫做HW0 ...
Django--csrf跨站请求伪造、Auth认证模块
form表单中使用跨站请求伪造 { % csrf_token % } 会动态生成一个input框,内部的value是随机刷新的如果不想校验csrf from django.views.decorat ...
mysql api 不支持source命令
今天写了个代码 <?php ..... mysql_query("source /tmp/cr.sql",$link); ..... ?> 结果死活cr.sql的SQL ...
Hadoop 伪分布式安装配置
LA3902 Networlk
Network Consider a tree network with n nodes where the internal nodes correspond to servers and the ...
Django项目：CRM(客户关系管理系统)--51--42PerfectCRM实现AJAX全局账号注册
#urls.py """PerfectCRM URL Configuration The `urlpatterns` list routes URLs to views. ...
ES6学习笔记之数组的扩展
✏️1. 扩展运算符扩展运算符(spread)是三个点(...),将一个数组转为用逗号分隔的参数序列. 普通用法 console.log(...[1,2,3]);//1 2 3 数组拷贝(普通类型深 ...

JQuery-- 实例:小米左右切图,淡入淡出,自动，小圆点触发轮播图

示意图:

demo

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

随机推荐

热门专题