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. ubuntu用作开发办公平台的完美体验

    2016年6月3日 对于使用使用linux操作系统作为办公平台的新手来说很不适应,需要在多种方式中找到自己喜欢,适合自己的方式比较难.摸索了很久终于发现了一个适合我自己的使用方式了.这种方式也适合其他 ...

  2. Chrome 开发工具之Timeline

    之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline更多的是用在性能优化方面,它的作用就是记录与分析应用程 ...

  3. 让 FreeBSD 和 Gentoo Linux 在 ZFS 存储卷上共存

    自我回归到 Librem 15 已经有段时间了.我一般会选择 FreeBSD 来处理所有的事情,但有时会要访问一个运行在 Librem 平台上的 Linux OS,以便用它来帮助我对一些遗留的设备驱动 ...

  4. Jmeter插件监控服务器性能

    处理利用jmeter实施监控压测时受压机的各项性能 操作步骤: 施压机上的jmeter/lib/ext中放入下载的插件包 jmeter-plugins-perfmon-2.1.jar 受压机上放入Se ...

  5. 使用django开发博客过程记录1——数据库设计

    1.数据库设计 2.插入测试数据 3.配置相关问题 1.数据库设计 数据库有简单的三张表:Article.Category.Tag以下是代码 # -*- coding:utf-8 -*- from _ ...

  6. nuget包重装

    Update-Package -Reinstall Update-Package -reinstall -ProjectName Cardin.HeartCare.Service.ChatServic ...

  7. 阿里云推送SDK在某些机型（某米为主）下崩溃问题的解决方法

    引言 最近APP上线,遇到一个比较诡异的问题.最后竟然和dex文件有关,也是醉了,看来还得深入底层学习啊. 问题描述 在集成阿里推送SDK时,需要在Application中进行初始化,大多数Andro ...

  8. iOS视频边下边播--缓存播放数据流

    实现视频边下边播,这里的边下边播不是单独开一个子线程去下载,而是把视频播放的数据给保存到本地.简而言之,就是使用一遍的流量,既播放了视频,也保存了视频. 用到的框架:<AVFoundation/ ...

  9. [Asp.net]常见word，excel，ppt，pdf在线预览方案，有图有真相，总有一款适合你！

    引言 之前项目需要,查找了office文档在线预览的解决方案,顺便记录一下,方便以后查询. 方案一 直接在浏览器中打开Office文档在页面上的链接.会弹出如下窗口: 优点:主流浏览器都支持. 缺点: ...

  10. iOS面试题

    一个区分度很大的面试题 考察一个面试者基础咋样,基本上问一个 @property 就够了: @property 后面可以有哪些修饰符? 线程安全的: atomic,nonatomic 访问权限的 re ...