<!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. Centos7开机自动启动服务和联网

    虚拟机设置选择NAT模式,默认情况下,Centos不是自动连接上网的,需要点击右上角,手动连接上网. 可以修改开机启动配置修改: 1. cd 到/etc/sysconfig/network-scrip ...

  2. ubuntu python3相关

    安装pip3 sudo apt install python3-pipsudo apt-get install python3-virtualenv sudo pip3 install virtual ...

  3. CentOS7.4下载与安装 、使用

    CentOS7.4下载与安装 1:安装步骤这篇博客挺详细的就不多说了: https://blog.csdn.net/qq_39135287/article/details/83993574 2:安装好 ...

  4. Nginx+Tomcat实现单IP、多域名、多站点的访问

    最近帮朋友做了两个网站,预算很小很小.小到两个网站只能跑在一台512M内存的公网服务器上(tomcat+MySQL,由于内存太小了,只能把两个网站部署在同一个tomcat上),每个网站有自己的域名,初 ...

  5. IntelliJ IDEA 2018 2.X破解

    一 下载idea 官网 :https://www.jetbrains.com/idea/ 二 下载破解包 IntelliJ IDEA 2018.1.X--2.X(2.6可用,图就不改了) 链接: ht ...

  6. 将IDEA工程代码提交到Github

    1.git安装配置 1.下载git https://git-scm.com/download/win 2.安装 傻瓜式安装即可,记住安装的目录 3.配置 2.配置git SSH 1.首先申请一个Git ...

  7. 基于Netty重构RPC框架

    下面的这张图,大概很多小伙伴都见到过,这是Dubbo 官网中的一张图描述了项目架构的演进过程.随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在 ...

  8. Struts2之下载

    下载页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnco ...

  9. CentOS下编译Lua使得其支持动态链接

    在Linux下编译Lua时,我一般都是使用的make generic,这样编译没有什么问题,运行lua的程序也都OK,但是,这样在加载外部的C动态 链接库,却总是报下面的错误 dynamic libr ...

  10. python开发之路-day02

    一.数据类型 1 什么是数据? name='sunkedong'#字符串类型 age=24 #整型 date=2017.9#浮点型 dic={'name':'sunkedong','age':16}# ...