<!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>
