<!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. [CSP-S模拟测试]:Equation（数学+树状数组）

    题目描述 有一棵$n$个点的以$1$为根的树,以及$n$个整数变量$x_i$.树上$i$的父亲是$f_i$,每条边$(i,f_i)$有一个权值$w_i$,表示一个方程$x_i+x_{f_i}=w_i$ ...

  2. ubuntu14编译安装qt5.0.1

    http://hi.baidu.com/houxn22/item/d652f29dec4a701f924f41a0 1.进入官网:http://qt-project.org/downloads下载对应 ...

  3. Sparse PCA: reproduction of the synthetic example

    The paper: Hui Zou, Trevor Hastie, and Robert Tibshirani, Sparse Principal Component Analysis, Journ ...

  4. Linux-磁盘配额

    磁盘配额作用是限制普通用户使用的磁盘空间和创建文件的个数,不至于因为个别人的浪费而影响所有人的使用,需要内核的支持 注意:目前只有 ext2 ext3文件系统支持 需要用户程序quota程序包 先查看 ...

  5. jmeter测试https请求

    测试https请求时,需要添加证书 目录 1.下载证书 2.导入 3.执行https请求 1.下载证书 在浏览器中打开要测试的https协议的网站,以谷歌为例打开,下载证书到桌面 4.一直点击下一步 ...

  6. JAVA模拟Spring实现IoC过程(附源码)

    前言:本人大四学生,第一次写博客,如果有写得不好的地方,请大家多多指正 一.IoC(Inversion of Control)反转控制 传统开发都是需要对象就new,但这样做有几个问题: 效率低下,创 ...

  7. python------生产者消费者模型 和 管道

    一.为什么要使用生产者和消费者? 在线程世界里,生产者就是生产数据的线程,消费者就是消费数据的线程,在多线程开发当中,如果生产者处理速度很快,而消费者处理速度很慢,那么生产者就必须等待消费者处理完,才 ...

  8. python读取ini文件时，特殊字符的读取

    前言: 使用python在读取配置文件时,由于配置文件中存在特殊字符,读取时出现了以下错误: configparser.InterpolationSyntaxError: '%' must be fo ...

  9. 如何用latex画一个简单的表格

    latex毫无疑问是一个十分强大的论文写作工具,所以掌握它就显得非常有意义,讲一下如何画一个简单的表格,代码如下: \begin{table}\centering\begin{tabular}{||c ...

  10. Mata标签，og标签

    一.Mata标签 meta是用来在HTML文档中模拟HTTP协议的响应头报文,meta 标签用于网页的<head>与</head>中.meta 的属性有两种:name和http ...