<!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. react-native 异常处理 Execution failed for task ':app:mergeDebugResources'.

    1.react-native run-android 失败 * What went wrong:Execution failed for task ':app:mergeDebugResources' ...

  2. 连接超时(connect timed out)和读取超时(Read timed out)

    设置连接超时和读取超时方法: RequestConfig config=RequestConfig.custom() .setConnectTimeout(10000) // 设置连接超时时间 10秒 ...

  3. nginx配置多个虚拟主机（mac）

    1 . 安装  通过homebrew安装nginx,默认安装在:/usr/local/Cellar/nginx/版本号.配置文件在路径:/usr/local/etc/nginx ,默认配置文件ngin ...

  4. quick BI 修改列名备注

    有些列名太长了,所以造成些影响.注意修改即可.

  5. 使用Xmanager远程CentOS 7服务器（XDMCP）

    0. 前言 基本概念 简略概述 Display Manager 提供登录需求 在文字界面下可以通过startx来启动Xwindows 在runlevel 5下,在tty7处有可以使用的图形登录界面(方 ...

  6. DEDECMS为文章添加NEW标志图片

    找到extend.func.php添加自定义函数: function shownewimg($pubtime){$ntime = time();$tagtime = $pubtime;$day3 = ...

  7. 进程之间的通讯Queue简单应用

    #进程间通讯--Queue #Process有时需要通信的,操作系统提供了很多机制来实现进程之间的通讯 #而Queue就是其中一个 #1.Queue的使用 #可以使用multiprocessing模块 ...

  8. springboot启动脚本

    #!/bin/sh JAVA_HOME="/ulic1/jdk/jdk1.8.0_201/bin" export JAVA_HOME lsof -i:9010 |awk '{pri ...

  9. exports、module.exports和export、export default到底是咋回事

    地址1:https://segmentfault.com/a/1190000010426778 地址2:https://blog.csdn.net/caixiaowang/article/detail ...

  10. 【洛谷p1025】数的划分

    数的划分[传送门] 算法的话,dfs+剪枝: 据说是01年之前的NOIp提高组: 思路: 这道题是求把n无序的划分成k份的方案数,最直接的搜索方法是依次枚举x1,x2……xk的值,然后判断,显然这么搜 ...