<!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. 1206C Almost Equal

    题目大意 给你一个n 让你用1~2*n的数填满一个2*n个点的环 使得任意连续的n个位置的和的最大值减最小值不大于1 分析 我们通过瞎jb找规律发现n为偶数吴姐 而n为奇数我们设前n个位置为0组,后n ...

  2. Jenkins使用三：管理slave节点（配置SSH公钥和私钥）

    添加slave 给节点起个名字 1.远程工作目录:/test/workspace--这个地址是测试机的 jenkins 的 workspace 工作目录,自己随便写个本机的路径2.用法--尽可能的使用 ...

  3. C语言readdir()函数：读取目录函数

    相关函数:open, opendir, closedir, rewinddir, seekdir, telldir, scandir 头文件:#include <sys/types.h> ...

  4. tensorflow学习框架(炼数成金网络版学习记录)

    chapter1 #变量 import tensorflow as tf x = tf.Variable([1,2]) a = tf.constant([3,3]) #增加一个减法op sub = t ...

  5. python学习第九天数据类型列表创建，查找操作方法

    数据类型中列表是整个python最常用的数据类型,列表最常用的方法就是创建,增删改查,切片,循环以及排序等系列操作,任何操作都离不开增删改查操作,这样很容记住操作方法 1,列表的创建 list=[] ...

  6. POI之Excel文档增删改查

    需要引用apache第三方lib库poi 支持xls.xlsx格式excel读写操作 package com.hua.excel; import java.io.File;import java.io ...

  7. 基于mesos 安装 jenkins

    mesos master 机子上安装  jenkins git clone https://github.com/jenkinsci/mesos-plugin.git && cd me ...

  8. JavaScript深入之类数组对象与arguments（转载）

    类数组对象 所谓的类数组对象: 拥有一个 length 属性和若干索引属性的对象 举个例子: var array = ['name', 'age', 'sex']; var arrayLike = { ...

  9. 常见前端面试题JS部分

    1.闭包 2.JS操作和获取cookie //创建cookie function setCookie(name, value, expires, path, domain, secure) { var ...

  10. Beta-星期五

    所属课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass 作业要求  https://edu.cnblogs.com/camp ...