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. Javascript动态执行JS（new Function与eval比较）

    new Function与eval可以动态执行JS,只要把拼接好的JS方法,然后以字符串的形式传入到这两个函数,可以执行,其中new Function用在模板引擎比较多. 用 Function 类直接 ...

  2. div+css:div中图片垂直居中

    div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  3. (转)C# Enum,Int,String的互相转换 枚举转换

    Enum为枚举提供基类,其基础类型可以是除 Char 外的任何整型.如果没有显式声明基础类型,则使用 Int32.编程语言通常提供语法来声明由一组已命名的常数和它们的值组成的枚举. 注意:枚举类型的基 ...

  4. Nginx是一款面向性能设计的HTTP服务器，相较于Apache、lighttpd具有占有内存少，稳定性高等优势。

    ######Nginx配置文件nginx.conf中文详解######定义Nginx运行的用户和用户组user www www;#nginx进程数,建议设置为等于CPU总核心数.worker_proc ...

  5. javascript的console.log用法

    f1.html代码 <iframe id="frame2" name="frame1" src="ww.html"></i ...

  6. NFS 文件系统

    NFS的安装是非常简单的,只需要两个软件包即可,而且在通常情况下,是作为系统的默认包安装的. NFS服务的主要配置文件 /etc/exports /etc/exports文件内容格式: <输出目 ...

  7. juery学习总结——例子

    1.select元素在选择是找到选择的值和option中的值 <!DOCTYPE html> <html> <head lang="en"> & ...

  8. [asp.net core]定义Tag Helpers

    原文地址 https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/authoring Getting started wi ...

  9. MVC中渲染页面

    mvc中当返回的字符带有html代码的时候,可以直接使用@Html.Raw(Model.description)这句代码的意思就是返回不是html编码,因此用了这句代码就不需要单独再转换一次

  10. webpack 配置文件

    现如今,webpack非常的受欢迎,比较火的几款js框架都推荐使用webpack来构建项目,而webpack也确实非常强大,但是配置webpack缺常常带来很多问题,接下来就写一下我自己遇到的一些坑. ...