response slider
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="Scripts/jquery-ui-1.10.4.custom.js"></script>
<style>
html, body, img, ul, p {
margin: 0;
padding: 0;
} body {
} .content {
position: fixed;
height: 100%;
width: 100%;
} .img {
height: 100%;
width: 100%;
position: relative;
} .img img {
position: absolute;
top: 50%;
left: 50%;
} .info {
position: fixed;
z-index: 999;
background: #000;
color: #fff;
left: 50%;
top: 50%;
} .super-slider {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
} .super-slider .super-content li {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
} .super-slider .super-content li img {
width: 100%;
border: 0;
} .super-content li > span {
position: absolute;
line-height: 1.5;
background: rgba(0,0,0,0.5);
bottom: 12px;
left: 0;
color: #fff;
padding: 0px;
width: 100%;
z-index: 999;
} .sp-slider-text {
padding: 20px;
display: block;
} .super-nav {
width: 20px;
display: block;
position: absolute;
right: 20px;
top:45%;
z-index: 999;
} .super-nav li {
list-style: none;
display: block;
height: 20px;
width:20px;
background: #ccc;
border-radius:50%; margin:5px; } .super-nav li:hover {
background: #aaa !important;
} .super-nav li.selected {
background: #aaa;
} .super-nav li:last-child {
border-right: 0;
}
</style> <script> ; (function ($) {
"use strict"
$.fn.superSlider = function (options) { var setting = $.extend({
bars: ".super-nav",
items: ".super-content li",
speed: 3000
}, options); var $_self = this,
$items = $(setting.items, $_self),
$bars = $(setting.bars, $_self),
count = 0,
sliterTimer = null,
bars = [],
itemCount = $items.length,
width = $(window).width(); for (var i = 0 ; i < itemCount; i++) {
bars.push("<li></li>");
} $bars.html(bars.join(" "));
var $barItems = $bars.find("li"); $barItems.eq(0).addClass("selected");
$items.css({ left: width }).eq(0).css({ left: 0 }); var _start = function () {
sliterTimer = setInterval(function () { console.log(count);
$barItems.siblings().css('background-color', 'rgba(220, 142, 34,0.5)'); $items.eq(count % itemCount).removeClass("selected").stop().animate({
left: -$(window).width()
}, function () {
$items.css({ left: $(window).width(), "z-index": -1 }); var next = count % itemCount;
if (next == itemCount - 1) next = 0;
$items.eq(next).css({ "z-index": 1 });
}); $barItems.eq(count % itemCount).removeClass("selected").stop().animate({
backgroundColor: "rgba(220, 142, 34, 0.5)"
}); count++; $items.eq(count % itemCount).css({ "z-index": 1 }).addClass("selected").stop().animate({
left: 0
}); $barItems.eq(count % itemCount).addClass("selected").stop().animate({
backgroundColor: "rgba(220, 142, 34,1)"
}); count = count % 100; }, setting.speed);
} var _stop = function () {
window.clearInterval(sliterTimer);
sliterTimer = null;
} $barItems.on("click", function () { if (count == $(this).index()) return; $barItems.siblings().css('background-color', 'rgba(220, 142, 34,0.5)');
$(this).css('background-color', 'rgba(220, 142, 34,1)');
count = $(this).index();
var next = count + 1;
if (next == itemCount) next = 0;
$items.siblings().css("z-index", "-1");
$items.eq(next).css("z-index", "99"); $items.each(function (i) {
if (i != count) {
$items.eq(i).stop().animate({
left: -$(window).width()
}, 300, function () {
$(this).css({ left: $(window).width() });
});
}
}); $items.eq(count).stop().animate({
left: 0
}, 300); }); $_self.start = _start;
$_self.stop = _stop;
$barItems.on("mouseenter", _stop).on("mouseleave", _start);
return this;
}; })(jQuery); ; (function ($) {
"use strict"
$.fn.responseImg = function (options) { var _cfg = $.extend({
width: 1920,
height: 1080
}, options); return this.each(function () { var $_self = $(this),
winWidth = $(window).width(),
winHeight = $(window).height(); var _resetImgSize = function () { winWidth = $(window).width();
winHeight = $(window).height(); var winWH = winWidth / winHeight;
var imgWH = _cfg.width / _cfg.height; if (winWH > imgWH) {
$_self.width(winWidth);
$_self.height(winWidth * _cfg.height / _cfg.width);
} else {
$_self.height(winHeight);
$_self.width(winHeight * _cfg.width / _cfg.height);
} var imgH = $_self.height();
var imgW = $_self.width(); $_self.css({ "margin-top": (-(imgH) / 2) + "px" });
$_self.css("margin-left", (-(imgW - 10) / 2) + "px"); $(".info").text(winWidth + "----" + winHeight + "dddd"); }; $(window).resize(_resetImgSize); $_self.resize = _resetImgSize; }); };
})(jQuery); $(function () { $("img").responseImg({
width: 1920,
height: 1080,
selector: 'img1'
}).resize(); $(".super-slider").superSlider({ speed: 3000 }).start(); });
</script>
</head>
<body>
<div id="info" class="info">
asdasd
</div>
<div class="content">
<div class="img">
<div class="super-slider">
<ul class="super-nav">
<li></li>
<li></li>
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="super-content">
<li>
<span><span class="sp-slider-text">This is a content.This is a content.This is a content.This is a content.This is a content.This is a content.This is a content.</span></span>
<img src="http://creativewebsites.me/pageAnimate/images/slide1.jpg" />
</li>
<li>
<span><span class="sp-slider-text">This is a content.2</span></span>
<img src="http://creativewebsites.me/pageAnimate/images/slide2.jpg" />
</li>
<li>
<span><span class="sp-slider-text">This is a content.3</span></span>
<img src="http://creativewebsites.me/pageAnimate/images/slide3.jpg" />
</li>
<li>
<span><span class="sp-slider-text">This is a content.4</span></span>
<img src="http://creativewebsites.me/pageAnimate/images/slide4.jpg" />
</li>
<li>
<span><span class="sp-slider-text">This is a content.6</span></span>
<img src="http://creativewebsites.me/pageAnimate/images/slide6.jpg" />
</li>
</ul>
</div>
</div>
</div> </body>
</html>
response slider的更多相关文章
- 网络编程---(数据请求+slider)将网络上的大文件下载到本地，并打印其进度
网络编程---将网络上的大文件下载到本地,并打印其进度. 点击"開始传输"button.将网络上的大文件先下载下来,下载完毕后,保存到本地. UI效果图例如以下: watermar ...
- Response.Redirect引起的性能问题分析
现象: 最近做的一个系统通过单点登录(SSO) 技术验证用户登录.用户在SSO 系统上通过验证后,跳转到该系统的不同模块.而跳转的时间一直维持子啊几分钟左右. 分析步骤: 在问题复现时抓取Hang d ...
- windows charles response 乱码解决办法
使用windows 版本的charles来做代理,发现服务端返回的response会出现中文乱码的情况, 查看软件设置,遗憾的是并没有关于编码的选项. 好在charles windows版本安装目录下 ...
- 谈一谈Http Request 与 Http Response
写在前面的话:今天来总结一下http相关的request和response,就从以下几个问题入手吧. ======正文开始======== 1.什么是HTTP Request 与HTTP Respon ...
- ashx中Response.ContentType的常用类型
ashx中Response.ContentType的常用类型: text/plaintext/htmltext/xmlapplication/jsonimage/GIFapplication/x-cd ...
- 一个由Response.Redirect 引起的性能问题的分析
现象: 某系统通过单点登录(SSO) 技术验证用户登录.用户在SSO 系统上通过验证后,跳转到某系统的主页上面.而跳转的时间很长,约1分钟以上. 分析步骤: 在问题复现时抓取Hang dump 进行分 ...
- request 对象和 response 对象
Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象 HttpServletResponse HttpServletR ...
- C#、JAVA操作Hadoop（HDFS、Map/Reduce）真实过程概述。组件、源码下载。无法解决：Response status code does not indicate success: 500。
一.Hadoop环境配置概述 三台虚拟机,操作系统为:Ubuntu 16.04. Hadoop版本:2.7.2 NameNode:192.168.72.132 DataNode:192.168.72. ...
- response和request的区别以及常见问题解决
request是请求,即客服端发来的请求 response是响应,是服务器做出的响应 --------------------------------------------------------- ...
随机推荐
- 《mysql必知必会》学习_第17章_20180807_欢
第17章:组合查询 P114 select vend_id ,prod_id,prod_price from products where prod_price <=5 ; select ven ...
- @WebFilter怎么控制多个filter的执行顺序
转自:http://blog.csdn.net/liming_0820/article/details/53332070 之前我们控制多个filter的执行顺序是通过web.xml中控制filter的 ...
- PB窗口根据分辨率的大小调整窗口大小
//来自:http://topic.csdn.net/u/20070105/09/88f3c417-6882-4e26-b622-0f9a0a9a65e0.html //给你个通用函数,在窗口的OPE ...
- Django View 进阶
返回404 from django.http import HttpResponse, HttpResponseNotFound def not_found(request): ) 或 return ...
- 1.Spring框架入门案例
一.简单入门案例 入门案例:IoC 1.项目创建与结构 2.接口与实现类 User.java接口 package com.jd.ioc; /** * @author weihu * @date 201 ...
- .NET Core微服务之路：基于Consul最少集群实现服务的注册与发现（二）
重温Consul最少化集群的搭建
- Linux程序设计：进程通信
日期:忘了. 关键词:Linux程序设计:System-V:进程通信:共享内存:消息队列. 一.共享内存 1.1 基本知识 (待补充) 1.2 代码 一个基于share memory实现的 ...
- Navicat Premium Mac V12.0.22.0 中英文破解 亲测可用
换了Mac电脑后网上找了好些个 Navicat Premium 破解版本, 特别是CSDN上要积分下载的也不能用,浪费积分下,都是些坑爹破解方法,浪费了好些时间,今天介绍看到的一套有效的破解过程 1. ...
- OpenStack-Ocata版+CentOS7.6 云平台环境搭建 — 6.在计算节点上安装并配置计算服务Nova
安装和配置计算节点这个章节描述如何在计算节点上安装和配置计算服务. 计算服务支持几种不同的 hypervisors.为了简单起见,这个配置在计算节点上使用 :KVM <kernel-based ...
- inception安装使用
一个集审核.执行.备份及生成回滚语句于一身的MySQL自动化运维工具,由去哪网开源 安装 CentOS 7 Python 3.6 安装基础环境 yum -y install cmake libncur ...