<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="jq22-container"> <article class="container">
<section> <figure id="full_feature" class="swipslider">
<ul class="sw-slides">
<li class="sw-slide">
<img src="" alt="">
</li>
<li class="sw-slide">
<img src="" alt="">
</li>
<li class="sw-slide">
<img src="" alt="Tiny Tina">
</li>
<li class="sw-slide">
<img src="" alt="">
</li>
<li class="sw-slide">
<img src="" alt="Redhead girl">
</li>
</ul>
</figure> </section> </div> <script type="text/javascript">
$(window).load(function() {
$('#full_feature').swipeslider();
$('#content_slider').swipeslider({
transitionDuration: 600,
autoPlayTimeout: 10000,
sliderHeight: '300px'
});
$('#responsiveness').swipeslider();
$('#customizability').swipeslider({
transitionDuration: 1500,
autoPlayTimeout: 4000,
timingFunction: 'cubic-bezier(0.38, 0.96, 0.7, 0.07)',
sliderHeight: '30%'});
});
</script>
</body>
</html>
css
.container{
margin: 0 auto;
max-width: 640px;
}
a:link {
color: #fff0d5; }
a:hover {
color: #aaa3fc; }
a:active {
color: #9289ff; }
a:visited {
color: #fff0d5; }
.swipslider {
margin: 0 auto; }
#content_slider {
background-color: #f0f0f0;
width: 640px; }
#content_slider .wanted {
padding: 25px; }
#content_slider .wanted:after {
display: table;
content: "";
clear: both; }
#content_slider .wanted img {
float: left;
position: relative;
height: 225px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.33);
margin-right: 15px; }
#content_slider .wanted .description {
float: left;
padding: 10px;
display: block;
font-size: 16px;
color: #343332;
background: #e5e5e5;
height: 225px;
width: 349px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.58);
white-space: normal; }
#content_slider .wanted .description h1 {
font-size: 18px;
margin:;
text-align: left;
color: #515f6c;
text-shadow: none; }
#content_slider .wanted .description::after {
display: table;
content: "";
clear: both; }
#content_slider .wanted .description p {
margin-bottom: 1px;
margin-top: 6px;
font-size: 14px; }
#content_slider .wanted .description p.award {
color: #be9a02; }
#content_slider .wanted .description ul {
list-style: square;
padding-left: 20px;
font-size: 14px; }
#content_slider .wanted .description strong {
color: #515f6c; }
#customizability .sw-next-prev {
width: 120px;
height: 60px;
background-color: rgba(82, 82, 82, 0);
color: rgba(255, 254, 235, 0.28);
border-radius: 3px;
font-size: 25px; }
#customizability .sw-next-prev:hover {
color: #fffeeb;
background-color: #525252;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.57); }
#customizability .sw-prev {
left: 0%; }
#customizability .sw-prev::after {
line-height: 60px;
content: '< back'; }
#customizability .sw-next {
right: 0%; }
#customizability .sw-next::after {
line-height: 60px;
content: 'next >'; }
#customizability .sw-bullet {
top: 4%; }
#customizability .sw-bullet li {
width: 10px;
height: 5px;
background-color: rgba(255, 254, 235, 0.28);
border-radius:;
vertical-align: middle; }
#customizability .sw-bullet li.active {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 10px solid #fffeeb;
background-color: transparent;
width:;
height:;
vertical-align: bottom; }
#customizability .sw-bullet li:hover {
height: 10px;
background-color: #fffeeb; }
.slide-number {
font-size: 60px;
display: inline-block;
position: absolute;
left: 50%;
top: 25%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.54); }
.swipslider {
position: relative;
overflow: hidden;
display: block;
padding-top: 60%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.swipslider .sw-slides {
display: block;
padding: 0;
list-style: none;
width: 100%;
height: 100%;
white-space: nowrap;
font-size: 0;
-webkit-transform: translateX(0);
transform: translateX(0);
position: absolute;
bottom: 0; }
.swipslider .sw-slide {
width: 100%;
height: 100%;
margin: auto;
display: inline-block;
position: relative; }
.swipslider .sw-slide > img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-height: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.swipslider .sw-slide .sw-content {
width: 100%;
height: 100%;
margin-left: 0;
margin-right: 0;
font-size: 14px; }
.sw-next-prev {
font-family: "Courier New", Courier, monospace;
height: 50px;
width: 50px;
text-align: center;
vertical-align: middle;
position: absolute;
line-height: 50px;
font-size: 30px;
font-weight: bolder;
color: rgba(160, 160, 160, 0.53);
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(255, 255, 255, 0);
border-radius: 50%;
text-decoration: none;
transition: all .2s ease-out;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.sw-next-prev:hover {
background-color: rgba(255, 255, 255, 0.74); }
.sw-next-prev:active {
background-color: rgba(255, 255, 255, 0.5); }
.sw-prev {
left: 2%; }
.sw-prev::after {
content: '<'; }
.sw-next {
right: 2%; }
.sw-next::after {
content: '>'; }
.sw-bullet {
position: absolute;
bottom: 2%;
list-style: none;
display: block;
width: 100%;
text-align: center;
padding: 0;
margin: 0; }
.sw-bullet li {
width: 10px;
height: 10px;
background-color: rgba(160, 160, 160, 0.53);
border-radius: 50%;
display: inline-block;
cursor: pointer;
transition: all .2s ease-out; }
.sw-bullet li:hover {
background-color: rgba(255, 255, 255, 0.74); }
.sw-bullet li.active {
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 2px rgba(160, 160, 160, 0.53); }
.sw-bullet li:not(:last-child) {
margin-right: 5px; }
(function ($) {
$.fn.swipeslider = function (options) {
var slideContainer = this;
var slider = this.find('.sw-slides');
var defaultSettings = {
transitionDuration: 500,
autoPlay: true,
autoPlayTimeout: 4000,
timingFunction: 'ease-out',
prevNextButtons: true,
bullets: true,
swipe: true,
sliderHeight: '60%'
};
var settings = $.extend(defaultSettings, options);
var slidingState = 0;
var startClientX = 0;
var startPixelOffset = 0;
var pixelOffset = 0;
var currentSlide = 0;
var slideCount = 0；
var slidesWidth = 0;
var allowSwipe = true;
var transitionDuration = settings.transitionDuration;
var swipe = settings.swipe;
var autoPlayTimeout = settings.autoPlayTimeout;
var animationDelayID = undefined;
var allowSlideSwitch = true;
var autoPlay = settings.autoPlay;
(function init() {
$(slideContainer).css('padding-top', settings.sliderHeight);
slidesWidth = slider.width();
$(window).resize(resizeSlider);
if(settings.prevNextButtons) {
insertPrevNextButtons();
}
slider.find('.sw-slide:last-child').clone().prependTo(slider);
slider.find('.sw-slide:nth-child(2)').clone().appendTo(slider);
slideCount = slider.find('.sw-slide').length;
if(settings.bullets) {
insertBullets(slideCount - 2);
}
setTransitionDuration(transitionDuration);
setTimingFunction(settings.timingFunction);
setTransitionProperty('all');
if(swipe) {
slider.on('mousedown touchstart', swipeStart);
$('html').on('mouseup touchend', swipeEnd);
$('html').on('mousemove touchmove', swiping);
}
jumpToSlide(1);
enableAutoPlay();
})();
function resizeSlider(){
slidesWidth = slider.width();
switchSlide();
}
function swipeStart(event) {
if(!allowSwipe) {
return;
}
disableAutoPlay();
if (event.originalEvent.touches)
event = event.originalEvent.touches[0];
if (slidingState == 0){
slidingState = 1;
startClientX = event.clientX;
}
}
function swiping(event) {
var pointerData;
if (event.originalEvent.touches) {
pointerData = event.originalEvent.touches[0];
} else {
pointerData = event;
}
var deltaSlide = pointerData.clientX - startClientX;
if (slidingState == 1 && deltaSlide != 0)
startPixelOffset = currentSlide * -slidesWidth;
}
if (slidingState == 2) {
var touchPixelRatio = 1;
if ((currentSlide == 0 && pointerData.clientX > startClientX) ||
(currentSlide == slideCount - 1 && pointerData.clientX < startClientX)) {
touchPixelRatio = 3;
}
pixelOffset = startPixelOffset + deltaSlide / touchPixelRatio;
enableTransition(false);
translateX(pixelOffset);
}
}
function swipeEnd(event) {
if (slidingState == 2) {
slidingState = 0;
currentSlide = pixelOffset < startPixelOffset ? currentSlide + 1 : currentSlide -1;
currentSlide = Math.min(Math.max(currentSlide, 0), slideCount - 1);
pixelOffset = currentSlide * -slidesWidth;
disableSwipe();
switchSlide();
enableAutoPlay();
}
slidingState = 0;
}
function disableSwipe() {
allowSwipe = false;
window.setTimeout(enableSwipe, transitionDuration)
}
function enableSwipe() {
allowSwipe = true;
}
function disableAutoPlay() {
allowSlideSwitch = false;
window.clearTimeout(animationDelayID);
}
function enableAutoPlay() {
if(autoPlay) {
allowSlideSwitch = true;
startAutoPlay();
}
}
function startAutoPlay() {
if(allowSlideSwitch) {
animationDelayID = window.setTimeout(performAutoPlay, autoPlayTimeout);
}
}
function performAutoPlay() {
switchForward();
startAutoPlay();
}
function switchForward() {
currentSlide += 1;
switchSlide();
}
function switchBackward() {
currentSlide -= 1;
switchSlide();
}
function switchSlide() {
enableTransition(true);
translateX(-currentSlide * slidesWidth);
if(currentSlide == 0) {
window.setTimeout(jumpToEnd, transitionDuration);
} else if (currentSlide == slideCount - 1) {
window.setTimeout(jumpToStart, transitionDuration);
}
setActiveBullet(currentSlide);
}
function jumpToStart() {
jumpToSlide(1);
}
function jumpToEnd() {
jumpToSlide(slideCount - 2);
}
function jumpToSlide(slideNumber) {
enableTransition(false);
currentSlide = slideNumber;
translateX(-slidesWidth * currentSlide);
window.setTimeout(returnTransitionAfterJump, 50);
}
function returnTransitionAfterJump() {
enableTransition(true);
}
function enableTransition(enable) {
if (enable) {
setTransitionProperty('all');
} else {
setTransitionProperty('none');
}
}
function translateX(distance) {
slider
// Prefixes are being set automatically.
// .css('-webkit-transform','translateX(' + distance + 'px)')
// .css('-ms-transform','translateX(' + distance + 'px)')
.css('transform','translateX(' + distance + 'px)');
}
function setTransitionDuration(duration) {
slider
// .css('-webkit-transition-duration', duration + 'ms')
.css('transition-duration', duration + 'ms');
}
function setTimingFunction(functionDescription) {
slider
// .css('-webkit-transition-timing-function', functionDescription)
.css('transition-timing-function', functionDescription);
}
function setTransitionProperty(property) {
slider
// .css('-webkit-transition-property', property)
.css('transition-property', property);
}
function insertPrevNextButtons() {
slider.after('<span class="sw-next-prev sw-prev"></span>');
slideContainer.find('.sw-prev').click(function(){
if(allowSlideSwitch){
disableAutoPlay();
switchBackward();
enableAutoPlay();
}
});
slider.after('<span class="sw-next-prev sw-next"></span>');
slideContainer.find('.sw-next').click(function(){
if(allowSlideSwitch) {
disableAutoPlay();
switchForward();
enableAutoPlay();
}
});
}
function insertBullets(count) {
slider.after('<ul class="sw-bullet"></ul>');
var bulletList = slider.parent().find('.sw-bullet');
for (var i = 0; i < count; i++) {
if (i == 0) {
bulletList.append('<li class="sw-slide-' + i + ' active"></li>');
} else {
bulletList.append('<li class="sw-slide-' + i + '"></li>');
}
var item = slideContainer.find('.sw-slide-' + i);
(function(lockedIndex) {
item.click(function() {
// Disable autoplay on time of transition.
disableAutoPlay();
currentSlide = lockedIndex + 1;
switchSlide();
enableAutoPlay();
});
})(i);
}
}
function setActiveBullet(number) {
var activeBullet = 0;
if(number == 0) {
activeBullet = slideCount - 3;
} else if (number == slideCount - 1) {
activeBullet = 0;
} else {
activeBullet = number - 1;
}
slideContainer.find('.sw-bullet').find('li').removeClass('active');
slideContainer.find('.sw-slide-' + activeBullet).addClass('active');
}
return slideContainer;
}
}(jQuery));