拖拽大图轮播pc 移动兼容
<!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: 0; 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: 0; 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: 0; height: 0; 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));
