拖拽大图轮播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:;
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));
拖拽大图轮播pc 移动兼容的更多相关文章
- iOS-UICollectionView快速构造/拖拽重排/轮播实现
代码地址如下:http://www.demodashi.com/demo/11366.html 目录 UICollectionView的定义 UICollectionView快速构建GridView网 ...
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
- [DBW]大图轮播，可通过两种方法实现
通过在div中加入表格,实现大图轮播,代码如下: 整体的思路: 1.在div中嵌入表格,设置div的宽和高,设置成图片大小,确定其位置,将图片插入表格,超出div部分隐藏 2.在js中定义一个变量接受 ...
- 利用JS做网页特效——大图轮播
大图轮播完整流程代码操作: <style> * { margin: 0px; padding: 0px; ...
- bootstrap大图轮播手机端不能手指滑动解决办法
网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上 ...
- Jsoup开发网站客户端第二篇，图片轮播，ScrollView兼容ListView
最近一段日子忙的焦头烂额,代码重构,新项目编码,导致jsoup开发网站客户端也没时间继续下去,只能利用晚上时间去研究了.今天实现美食网首页图片轮播效果,网站效果图跟Android客户端实现如图: 从浏 ...
- JQUERY写大图轮播；附jquery的hover()方法、animate()方法、find()方法
思想:黑框设置超出部分隐藏. 红框往左移动,通过判断红框左边框距离黑框左边框的像素值,来实现红框的移动. 绿框在最上层,放每张图片的说明和序号. 一:html部分(大框.图片部分.箭头部分.图片介绍部 ...
- 纯原生JS大图轮播
CSS部分: CSS: <style type="text/css"> #banner { position: relative; width: 500px; heig ...
- jQuery实现大图轮播
css样式: *{ margin: 0; padding: 0;}ul{ list-style:none;}.slideShow{ width: 620px; heigh ...
随机推荐
- Mybatis源码解读-设计模式总结
虽然我们都知道有26个设计模式,但是大多停留在概念层面,真实开发中很少遇到,Mybatis源码中使用了大量的设计模式,阅读源码并观察设计模式在其中的应用,能够更深入的理解设计模式. Mybatis至少 ...
- 什么是socket ??
socket起源于Unix, 而Unix/Linux基本哲学之一就是"一切皆文件", 都可以用"打开open -> 读写write/read -> 关闭clo ...
- 网络编程WebSocket 和socket、HTTP的区别和联系
一.WebSocket 是什么? WebSocket是HTML5规范提出的一种协议:目前除了完犊子的IE浏览器,其他浏览器都基本支持.他是一种协议,万变不离其宗,也是基于TCP协议的:和HTTP协议是 ...
- SpringBlade 2.0-RC3 发布，全新的微服务开发平台
经过了十天的艰苦奋斗,SpringBlade 2.0-RC3发布了,此版本增加了很多有用的功能,距离正式版本更近一步! SpringBlade简介: SpringBlade 2.0 是一个基于 Spr ...
- 关于java和python同时使用rabbitmq时队列同名问题的探讨
问题引出: 我们知道,进程之间是不能直接通信的,但是今天学习rabbitmq时发现一个奇怪的问题,即当我开启rabbitmq,用java写好的代码给rabbitmq发送完消息后并没有急着使用java去 ...
- shell与aw的简单交互示例
先来看一段shell代码 word=“a test name” selectword=“test"lineitem=`echo "$word" | awk 'match( ...
- oracle GROUP BY rollup
1.ROW_NUMBER() OVER函数的基本用法用法 http://www.cnblogs.com/fxgachiever/archive/2010/09/15/1826792.html 2.De ...
- Spark Mllib里如何将预测结果如0或1，转换为文字描述来显示预测结果输出（图文详解）
不多说,直接上干货! 具体,见 Hadoop+Spark大数据巨量分析与机器学习整合开发实战的第13章 使用决策树二元分类算法来预测分类StumbleUpon数据集
- javascript要点(上)
立即执行函数 即Immediately Invoked Function Expression (IIFE),正如它的名字,就是创建函数的同时立即执行.它没有绑定任何事件,也无需等待任何异步操作: ( ...
- ueditor单独调用图片上传
很多人在问ueditor,如何单独使用图片上传功能,但是网上没有一篇能用的文档,没办法,我刚好也需要这个功能,花了3天时间(本人水平太菜,哎)终于知道怎么处理了,发出来给大家共享: 效果如下: 页面效 ...