superSlider实现美女轮播图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style>
*{
margin:0;
padding:0;
}
.slider-cotainer{
overflow: hidden;
position: relative;
height:450px;
width: 800px ;
margin:0 auto;
}
.slider-content{
position: absolute;
left:-800px;
top:0px;
list-style: none;
width:4800px;

overflow: hidden;
}
.slider-content li{
float:left;
height:450px;
position:relative;
}
.slider-content li span{
position:absolute;
display:inline-block;
font-size:60px;
color:orange;
left:50%;
top:50%;
width:100px;
height:100px;
margin-left:-50px;
margin-top:-50px;
}
.slider-content li img{
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.slider-cotainer i{
position: absolute;
width:81px;
height:136px;
cursor: pointer;
}
.slider-cotainer .prev{
top:200px;
left:0px;
background: url("http://cdn.attach.qdfuns.com/notes/pics/201701/01/203002r9xaaszztjtx222m.png") no-repeat;
}
.slider-cotainer .next{
top:200px;
right:0px;
background: url("http://cdn.attach.qdfuns.com/notes/pics/201701/01/202950gm3cwv62v54h3lp4.png") no-repeat;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="slider-cotainer">
<ul class="slider-content">
<li>
<span>4</span>
<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/01/203003jb9nsxmbr9zcocil.jpg" alt="">
</li>
<li>
<span>1</span>
<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/01/202956d1ezc8bfzddc40dq.jpg" alt="">
</li>
<li>
<span>2</span>
<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/01/202955yls92s9w5uygwy19.jpg" alt="">
</li>
<li>
<span>3</span>
<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/01/202958pm4nddlzy7lyd4z4.jpg" alt="">
</li>
<li>
<span>4</span>
<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/01/203003jb9nsxmbr9zcocil.jpg" alt="">
</li>
<li>
<span>1</span>
<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/01/202956d1ezc8bfzddc40dq.jpg" alt="">
</li>
</ul>
<i class="prev"></i>
<i class="next"></i>
</div>
<script>
var num = 1;
var slider = $('.slider-content');
$('.next').click(function () {
animate(1);
})
$('.prev').click(function () {
animate(-1);
})
function animate(dir) {
slider.stop(!0, !0).animate({"left": -(num+dir) * 800}, 500, "swing", function () {
if (dir> 0) {
if (num>=4) {
slider.css({"left": -800})
num = 0;
}
num++;
}
if (dir < 0) {
if (num<=1) {
slider.css({"left": -3200})
num = 5;
}
num--;
}
});
}
</script>
</body>
</html>

superSlider实现美女轮播图的更多相关文章

  1. jquery 广告轮播图

    轮播图 /*轮播图基本功能: * 1图片切换 * 1.1图片在中间显示 * 1.2图片淡入淡出 * 2左右各有一个按钮 * 2.1点击左按钮,图片切换上一张 * 2.2点击右按钮,图片切换下一张 * ...

  2. js 基础篇（点击事件轮播图的实现）

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  3. 实现下来ScrollView放大轮播图

    创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...

  4. ViewPager轮播图

    LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...

  5. CSS-用伪类制作小箭头（轮播图的左右切换btn）

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  6. phpcms首页实现轮播图

    1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...

  7. React视角下的轮播图

    天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...

  8. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

  9. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

随机推荐

  1. lightbox使用

    使用方法: 1.在页面头部包含 lightbox.js 文件并加载 lightbox.css 样式表文件 <script type="text/javascript" src ...

  2. WA题集

    #include <iostream> #include <cstring> #include <cstdio> #include <algorithm> ...

  3. Linux下安装 MySQL

    Ubuntu环境 使用二进制安装包安装,相对简单绿色 1.到官网下载二进制压缩包http://dev.mysql.com/downloads/mysql/ 2.选择需要的版本 目前最新为5.7.之后选 ...

  4. 分享公司DAO层动态SQL的一些封装

    主题 公司在DAO层使用的框架是Spring Data JPA,这个框架很好用,基本不需要自己写SQL或者HQL就能完成大部分事情,但是偶尔有一些复杂的查询还是需要自己手写原生的Native SQL或 ...

  5. 2MyBatis入门--深入浅出MyBatis技术原理与实践(笔记)

    什么是 MyBatis ? MyBatis 是支持定制化 SQL.存储过程以及高级映射的优秀的持久层框架.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis ...

  6. 使用 Weinre 调试移动网站及 PhoneGap 应用

    在 PC 端,我们可以使用 Firebug 或者 Chrome 开发人员工具方便的调试网站或者 Web 应用.但是,当我们想在移动端调试站点或者应用的时候,这些工具就派不上用场了.因此,移动开发人员都 ...

  7. [Data Structure] LCSs——最长公共子序列和最长公共子串

    1. 什么是 LCSs? 什么是 LCSs? 好多博友看到这几个字母可能比较困惑,因为这是我自己对两个常见问题的统称,它们分别为最长公共子序列问题(Longest-Common-Subsequence ...

  8. Linux htop工具使用详解

    一．Htop的使用简介 大家可能对top监控软件比较熟悉,今天我为大家介绍另外一个监控软件Htop,姑且称之为top的增强版,相比top其有着很多自身的优势.如下: 两者相比起来,top比较繁琐 默认 ...

  9. 用Python生成测试数据

    转载自:http://blog.csdn.net/caz28/article/details/45972109 有时我们需要大量的数据,一般编个程序生成一堆随机数据,Python很适合文本处理,干这个 ...

  10. BluetoothChat用于蓝牙串口通信的修改方法

    本人最近在研究嵌入式的串口通信,任务是要写一个手机端的遥控器用来遥控双轮平衡小车.界面只用了一个小时就写好了,重要的问题是如何与板子所带的SPP-CA蓝牙模块进行通信. SPP-CA模块自带代码,在这 ...