<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>SuperSlide自动分页控制</title>

     <link rel="stylesheet" href="css/reset.css">

     <style>

 /* 本案例CSS样式 */

 #banner    .slideBox{ width:100%; height:auto; overflow:hidden; position:relative; }

 #banner    .slideBox .hd{ width: 100%;height:15px; overflow:hidden; position:absolute; right:0px; bottom:5px; z-index:1; }

 #banner    .slideBox .hd ul{ overflow:hidden; zoom:1; display: table;margin: 0 auto; }

 #banner    .slideBox .hd ul li{float:left;margin-right:2px;width:60px;height:4px;line-height:14px;text-align:center;background:#fff;cursor:pointer;opacity:0.5;}

 #banner    .slideBox .hd ul li.on{opacity:1}

 #banner    .slideBox .bd{ position:relative; height:100%; z-index:0;   }

 #banner    .slideBox .bd li{ zoom:1; vertical-align:middle; }

 #banner    .slideBox .bd img{ width:100%; height:auto; display:block;  }

     /* 下面是前/后按钮代码，如果不需要删除即可 */

 #banner    .slideBox .prev,

 #banner    .slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; filter:alpha(opacity=50);opacity:0.5;   }

 #banner    .slideBox .next{ left:auto; right:3%; background-position:8px 5px; }

 #banner    .slideBox .prev:hover,

 #banner    .slideBox .next:hover{ filter:alpha(opacity=100);opacity:1;  }

 #banner    .slideBox .prevStop{ display:none;  }

 #banner    .slideBox .nextStop{ display:none;  }

     </style>

 </head>

 <body>

 <!-- banner -->

     <!-- banner -->

     <div id="banner">

         <div id="slideBox" class="slideBox">

             <div class="hd">

                 <ul></ul>

             </div>

             <div class="bd">

                 <ul>

                     <li><img src="img/1.jpg" alt=""></li>

                     <li><img src="img/2.jpg" alt=""></li>

                     <li><img src="img/3.jpg" alt=""></li>

                     <li><img src="img/4.jpg" alt=""></li>

                 </ul>

             </div>

             <!-- 下面是前/后按钮代码，如果不需要删除即可 -->

             <a class="prev" href="javascript:void(0)"> <img src="img/left.png" alt="上一页"></a>

             <a class="next" href="javascript:void(0)"> <img src="img/right.png" alt="下一页"></a>

         </div>

     </div>

     <script src="js/jquery1.42.min.js"></script>

     <script src="js/jquery.SuperSlide.2.1.3.js"></script>

     <script>

     // #banner轮播图控制

     $("#banner > .slideBox").slide({ titCell:".hd ul",mainCell: ".bd ul",effect: "leftLoop", autoPlay: true, scroll: 1, vis: "auto",interTime:5000,autoPage:'<li></li>' });

     </script>

 <!-- banner END-->

 </body>

 </html>

前端-SuperSlide自动分页控制、自适应轮播图的更多相关文章

  1. JavaScript 自适应轮播图

    代码 话不多说,先上代码,方便复制粘贴.演示 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. Web前端原生JavaScript浅谈轮播图

    1.一直来说轮播图都是困扰刚进业内小白的一大难点,因为我们不仅需要自己作出一个比较完美的运动框架(虽然网上一抓一大把,但是哪有比自己做出来实现的有成就感,不是吗?^_^),还必须需要非常关键性的把握住 ...

  3. 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

  4. bootstrap轮播图组件

    一.轮播图组件模板(官方文档) <div id="carousel-example-generic" class="carousel slide" dat ...

  5. 自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图

    引言 学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了.现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改mar ...

  6. 第124天：移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...

  7. Bootstrap中轮播图

    Bootstrap中轮播图插件叫作Carousel,为了清晰的表明每个标签在这里是什么意思,我把解释写在了下面的代码中. <!-- 以下容器就是整个轮播图组件的整体, 注意该盒子必须加上 cla ...

  8. 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

    未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...

  9. iview Carousel 轮播图自适应宽高；iview 轮播图 图片重叠问题；iview tabs 高度互相影响问题；vue this问题；

    最终效果图: 一.轮播图中图片自适应宽高:  <Carousel loop v-bind:height="imgHeight+'px'" v-model="caro ...

随机推荐

  1. jQuery FileUpload doesn't trigger 'done'

     https://stackoverflow.com/questions/14674999/jquery-fileupload-doesnt-trigger-done   If your server ...

  2. vs2019里没有linq to sql或EF工具，导致dbml或者edmx无法通过设计器浏览

    点击:工具->获取工具或功能 选择需要安装的工具,然后点击底部的修改按钮就可以了,等待安装完成,如下图:

  3. anki2.1中使用latex，使用 MathJax 渲染latex格式的数学公式，化学公式

    说说mathJax的优点: 不在anki媒体库生成图片,有利于节约手机空间. 再说说它的缺点:需要学习latex,需要一些时间去掌握latex语法. 1.去MathJax的github下载源码包 2. ...

  4. Invalid bound statement (not found)--spring boot集成mybatis

    问题: {"timestamp":"2019-07-02T10:21:32.379+0000","status":500,"err ...

  5. Codeforces 1197 E (dp+sort+二分) (Rust)

    原题链接 2300分 大意 俄罗斯套娃,每个有内容半径in和外围半径out in_i<out_i 如果 in_i >= out_j ,那么j可以放在i内 定义残留空间 = 一列嵌套的套娃 ...

  6. C#计算两个日期的相隔天数

    DateTime start = Convert.ToDateTime(dateStart.ToShortDateString()); DateTime end = Convert.ToDateTim ...

  7. 20190815 On Java8 第五章 控制流

    第五章 控制流 迭代语句 逗号操作符 在 Java 中逗号运算符(这里并非指我们平常用于分隔定义和方法参数的逗号分隔符)仅有一种用法:在 for 循环的初始化和步进控制中定义多个变量.我们可以使用逗号 ...

  8. [未解决]报错: crawlab启动失败

    拉取镜像 docker pull tikazyq/crawlab:latest 一键启动 docker-compose up 报错提示:

  9. Python自学第二天学习之《字符串与数字》

    一.基本数据类型: 数字:int类型,不可变类型 格式 : a=10 1.其他类型转换成int型 : b=“123” c=int(b) #转换类型 print(c)----- 123 print(ty ...

  10. spark连接hive找不到table

    Caused by: org.apache.spark.sql.catalyst.analysis.NoSuchTableException: Table or view 'xxxx' not fou ...