继续优化

  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.     .public_scroll {
  33.         position: relative;
  34.         min-width: 1100px;
  35.         max-width: 100%;
  36.         height: 793px; overflow: hidden;
  37.  
  38.     }
  39.     .public_s_list{ overflow: hidden;}
  40.  
  41.     .public_s_list a {
  42.         position: absolute;  display: block;
  43.         width: 100%;
  44.     }
  45.  
  46.     .public_s_list a img {
  47.         width: 100%;
  48.         display: block;
  49.  
  50.     }
  51.     .public_s_dot{ overflow: hidden; text-align: center; position: absolute; bottom:25px; z-index: 2; width: 100%; }
  52.     .public_s_dot i{ width: 10px; height: 10px; background-color: #fff; margin:0 8px; display: inline-block; cursor: pointer; border-radius: 50%;}
  53.     .public_s_dot .active{ background-color: #808080 }
  54.     </style>
  55. </head>
  56.  
  57. <body>
  58.     <div class="public_scroll" id="publicScroll">
  59.         <div class="public_s_list">
  60.             <a href="javascript:;" class="J_pic"><img src="http://www.emoi.com/media/pc-cn/201810/1540853894181026841.jpg" alt="1"></a>
  61.             <a href="javascript:;" class="J_pic"><img src="http://www.emoi.com/media/pc-cn/201805/1525203825936416255.jpg" alt="2"></a>
  62.             <a href="javascript:;" class="J_pic"><img src="http://www.emoi.com/media/pc-cn/201712/1513641621162167882.jpg" alt="3"></a>
  63.         </div>
  64.         <div class="public_s_dot" id="publicDot"></div>
  65.     </div>
  66.     <script type="text/javascript">
  67.     $(function() {
  68.         var index = 0;
  69.         var timer;
  70.         //获取id为publicScroll 所有的img
  71.         var imgList = $('#publicScroll .J_pic');
  72.         //img的个数
  73.         var imgNum = imgList.length;
  74.         if(imgNum>1){
  75.             //第一张图显示
  76.             $('.J_pic').eq(0).show().siblings().hide();
  77.             $('.J_pic').mouseover(function(){
  78.                 clearInterval(timer);  //鼠标经过停止自动播放
  79.             });
  80.             $('.J_pic').mouseout(function(){
  81.                 showTime(); //鼠标离开继续自动播放
  82.             });
  83.             // 填充分页
  84.             var bPage=$('#publicDot');
  85.             var html='';
  86.             for(var i=0,max=imgNum;i<max;i++){
  87.                 html+=(i==0)?'<i class="active"></i>':'<i></i>';
  88.             }
  89.             bPage.append(html);
  90.             // //鼠标点击分页
  91.             bPage.children('i').on('click',function(){
  92.                 index=$(this).index();
  93.                 showBg();
  94.             })
  95.             function showBg() {
  96.                 $('.J_pic').eq(index).fadeIn(300).siblings().fadeOut(300);
  97.                 bPage.children('i').eq(index).addClass('active').siblings().removeClass('active');
  98.             }
  99.             function showTime() {
  100.                 timer = setInterval(function() {
  101.                     index++;
  102.                     if (index == imgNum) {
  103.                         index = 0;
  104.                     }
  105.                     showBg();
  106.                 }, 4000);
  107.             }
  108.             //自动播放图片
  109.             showTime();
  110.         }
  111.     });
  112.     </script>
  113. </body>
  114.  
  115. </html>

jquery优化轮播图2的更多相关文章

  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改造轮播图1

    g改造轮播图1:https://www.cnblogs.com/huanghuali/p/8677338.html <!DOCTYPE html> <html lang=" ...

  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. Android开发之通过包管理器获取安装应用信息

    最近在自己写一个APP,有一个模块需要获取手机应用的一些信息.坑还是有,但都基本踩过了,自己把他实现了出来,实现方法还是很需要掌握的.底部弹出的对话框中四个选项的实现不多做说明,主要讲讲如何获取这些安 ...

  2. ConcurrentHashMap的简单理解

    一.效率低下的HashTable容器HashTable容器使用synchronized来保证线程安全,但在线程竞争激烈的情况下HashTable的效率非常低下.因为当一个线程访问HashTable的同 ...

  3. JS 将json数组转为嵌套层级数组

    ele UI 的树级菜单的数据要求是这种嵌套的,但是Ztree的老用发的是 var zNodes =[ { id:, pId:, name:"zTree Home", pid:0} ...

  4. 链表求和12 · Add Two Numbers

    反向存储,从左往右加 ［抄题］: 你有两个用链表代表的整数,其中每个节点包含一个数字.数字存储按照在原来整数中相反的顺序,使得第一个数字位于链表的开头.写出一个函数将两个整数相加,用链表形式返回和.给 ...

  5. SVG脚本编程简介

    本文主要介绍SVG的脚本编程,并分别给出放大.缩小,查询,鼠标事件等实例. 一. SVG简介 SVG,全称为Scalable Vector Graphics(可伸缩矢量图形).它是W3C制定的.用矢量 ...

  6. Redis 安装配制

    Redis 安装配制 redis 安装分为单机安装.伪集群安装.集群安装. Redis 下载地址:http://www.redis.cn/download.html Redis 在线测试工具:http ...

  7. .net分布在指定文件夹的web.confgi或者app.config

    .Net里面,ConfigurationManager默认读取的是Web.config或者App.config但是,什么都放在这两个文件里面,感觉太多了,也不好管理配置.于是参考了下别人的资料,自己写 ...

  8. Android Studio修改默认Activity继承AppCompatActivity

    在Android Studio中新建Activity默认继承AppCompatActivity,感觉这点十分不爽,找了很久,终于发现在android Studio安装目录下有个模板文件,修改其中的参数 ...

  9. Redis是可以安装成windows服务-开机自启 win7 64位

    其实Redis是可以安装成windows服务的,开机自启动,命令如下: redis-server --service-install redis.windows.conf 安装完之后,就可看到Redi ...

  10. Hdu4280 Island Transport 2017-02-15 17:10 44人阅读 评论(0) 收藏

    Island Transport Problem Description In the vast waters far far away, there are many islands. People ...