g改造轮播图1：https://www.cnblogs.com/huanghuali/p/8677338.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>轮播图</title>
  7.     <!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
  8.     <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  9.     <!-- <script type="text/javascript" src="js/lunbo.js"></script> -->
  10.     <style type="text/css">
  11.     *{
  12.         margin: 0;
  13.         padding: 0;
  14.     }
  15.  
  16.     body {
  17.         font-size: 14px;
  18.         line-height: 1.5;
  19.         font-family: 'Microsoft Yahei', 'arial', 'tahoma', 'simsun';
  20.         color: #666;
  21.         background-color: #fff
  22.     }
  23.  
  24.     img {
  25.         border: 0;
  26.     }
  27.  
  28.     a {
  29.         text-decoration: none;
  30.         color: #666;
  31.     }
  32.  
  33.     .wrapper_lb {
  34.         position: relative;
  35.         width: 640px;
  36.         height: 480px;
  37.     }
  38.  
  39.     .lb_pic_list a {
  40.         position: absolute;  display: block;
  41.     }
  42.  
  43.     .lb_pic_list a img {
  44.         width: 640px;
  45.         height: 480px;
  46.         display: block;
  47.     }
  48.  
  49.     .arrow_left {
  50.         position: absolute;
  51.         top: 50%;
  52.         margin-top: -18px;
  53.         left: 10px;
  54.         background: red;
  55.         width: 80px; height: 30px;
  56.         color: #fff;
  57.     }
  58.  
  59.     .arrow_right {
  60.         position: absolute;
  61.         top: 50%;
  62.         margin-top: -18px;
  63.         right: 10px;
  64.         background: red;
  65.          width: 80px; height: 30px;
  66.         color: #fff;
  67.     }
  68.     .scoll_dot{ overflow: hidden; text-align: center; position: absolute; bottom:0; z-index: 9; }
  69.     .scoll_dot i{ width: 16px; height: 6px; background: blue; margin:0 3px; display: inline-block; cursor: pointer;}
  70.     .scoll_dot .active{ background-color: red }
  71.     </style>
  72. </head>
  73.  
  74. <body>
  75.     <div class="wrapper_lb">
  76.         <div class="lb_pic_list" id="scrollWrap">
  77.             <a href="javascript:;" class="J_pic"><img src="https://img.d1xz.net/d/2018/12/5c10a30eb359a.jpg" alt="1"></a>
  78.             <a href="javascript:;" class="J_pic"><img src="https://img.d1xz.net/d/2018/12/5c10a2bd253bd.jpg" alt="2"></a>
  79.             <a href="javascript:;" class="J_pic"><img src="https://img.d1xz.net/d/2018/12/5c10a321a708b.jpg" alt="3"></a>
  80.         </div>
  81.         <div class="scoll_dot J_bannerPage"></div>
  82.         <div class="arrow_left J_arrow">向左</div>
  83.         <div class="arrow_right J_arrow">向右</div>
  84.     </div>
  85.     <script type="text/javascript">
  86.     $(function() {
  87.         var index = 0;
  88.         var timer;
  89.         //获取id为scrollWrap 所有的img
  90.         var imgList = $('#scrollWrap .J_pic');
  91.         //img的个数
  92.         var imgNum = imgList.length;
  93.         if(imgNum>1){
  94.         //第一张图显示
  95.         $('.J_pic').eq(0).show().siblings().hide();
  96.  
  97.         $('.J_pic').mouseover(function(){
  98.             clearInterval(timer);  //鼠标经过停止自动播放
  99.         });
  100.         $('.J_pic').mouseout(function(){
  101.             showTime(); //鼠标离开继续自动播放
  102.         });
  103.         //点击向左按钮
  104.         $('.arrow_left').click(function() {
  105.             clearInterval(timer);
  106.             if (index == 0) {
  107.                 index = imgNum;
  108.             }
  109.  
  110.             index--;
  111.             showBg();
  112.             showTime();
  113.         });
  114.  
  115.         //点击向右按钮
  116.         $('.arrow_right').click(function() {
  117.             clearInterval(timer);
  118.             if (index == imgNum - 1) {
  119.                 index = -1;
  120.             }
  121.  
  122.             index++;
  123.             showBg();
  124.             showTime();
  125.         });
  126.         // 填充分页
  127.         var bPage=$(".wrapper_lb").find('.J_bannerPage');
  128.         var html='';
  129.         for(var i=0,max=imgNum;i<max;i++){
  130.             html+=(i==0)?'<i class="active"></i>':'<i></i>';
  131.         }
  132.         bPage.append(html);
  133.         // //鼠标点击分页
  134.         bPage.children('i').on('click',function(){
  135.  
  136.             index=$(this).index();
  137.             showBg();
  138.         })
  139.  
  140.         function showBg() {
  141.             $('.J_pic').eq(index).fadeIn(300).siblings().fadeOut(300);
  142.             bPage.children('i').eq(index).addClass('active').siblings().removeClass('active');
  143.         }
  144.  
  145.         function showTime() {
  146.             timer = setInterval(function() {
  147.                 index++;
  148.                 // if (index == imgNum) {
  149.                 //     index = 0;
  150.                 // }
  151.                 index=(index==imgNum)?0:index;
  152.                 showBg();
  153.             }, 2000);
  154.         }
  155.         //自动播放图片
  156.         showTime();
  157.     }
  158.     });
  159.     </script>
  160. </body>
  161.  
  162. </html>

jquery改造轮播图1的更多相关文章

  1. 用jQuery实现轮播图效果，js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

  2. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  3. 自实现PC端jQuery版轮播图

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...

  4. JQuery实现轮播图及其原理

    源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="vi ...

  5. Jquery无缝轮播图的制作

    轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...

  6. jquery优化轮播图2

    继续优化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  7. jQuery无缝轮播图思路详解-唯品会

    效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap" ...

  8. jQuery封装轮播图插件

    // 布局要求,必须有一个容器,图片和两个按钮,布局方式自定,小圆点样式固定 // <div class="all"> // <img src="img ...

  9. 自己随意写了个简单的依赖jquery的轮播图

    //轮播图 function Switcher(obj){ this.box = $(obj.box); this.width = this.box.width(); this.banner = $( ...

随机推荐

  1. 跟我学算法-match-LSTM(向唐老师看齐)

    对于match-lstm,将hi文本与输出的match-lstm(由si,hi,qi)组合重新输入到LSTM网络中,以端对端的操作理念. 参考的博客:https://blog.csdn.net/lad ...

  2. PO BO VO DTO POJO DAO概念及其作用

    J2EE开发中大量的专业缩略语很是让人迷惑,尤其是跟一些高手讨论问题的时候,三分钟就被人家满口的专业术语喷晕了,PO VO BO DTO POJO DAO,一大堆的就来了(听过老罗对这种现象的批判的朋 ...

  3. MVC-READ2

    框架设计模式 契约式设计.元编程.元数据驱动设计.管道模型.远程代理模式.提供程序模型:

  4. 归纳整理Linux下C语言常用的库函数----时间日期数学及算法

    在没有IDE的时候,记住一些常用的库函数的函数名.参数.基本用法及注意事项是很有必要的. 参照Linux_C_HS.chm的目录,我大致将常用的函数分为一下几类: 1. 内存及字符串控制及操作 2. ...

  5. CCS5配置使用GenCodecPkg生成CODEC SERVER

    1. 引言 CCS5中集成了算法生成工具的插件,使用XDAIS Tools条目里面的GenAlg命令生成的算法框架如下: 不过,我没找到如何在CCS中使用这个工程.难不成要把这个框架文件放在Linux ...

  6. Glow Shader

    [Glow Shader] Glow Shader基于BlurShader来实现.总的来说分为2步: 1.利用BlurShader渲染出BlurTexture. 2.将BlurTexture与SrcT ...

  7. java线程池相关接口Executor和ExecutorService

    在线程池的api中,Executor接口是最上层的接口,内部只有一个方法.如下: public interface Executor { void execute(Runnable command); ...

  8. NPOI工具类

    NPOI调用方法 DataTable dt = new DataTable(); Dictionary<string, string> header = new Dictionary< ...

  9. jquery去掉click事件

    1:使用removeAttr( )和attr( ) $("a").attr("click",test()); $("a").removeAt ...

  10. for 续2

    --------siwuxie095             (二)skip=n 忽略(屏蔽.隐藏)文本前 N 行的内容. (N 必须大于 0,不能等于 0)     格式: FOR /F " ...