拖拽大图轮播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 ...
随机推荐
- bzoj 3778: 共鸣【计算几何+dp】
枚举起点,然后设f[i][j]为上凸壳上一个点是i当前点是j的最大面积,g是下凸壳,然后合并的时候枚举结束点t合并上下凸壳即可 这样的好处是每次转移都是往凸多边形里加一个三角形(s,i,j),所以判断 ...
- [Xcode 实际操作]九、实用进阶-(32)项目的打包上传和提交审核以及下架处理
目录:[Swift]Xcode实际操作 本文将演示如何将一个应用程序进行打包上传,并提交审核以及下架处理. 点击项目[DemoApp]->[Build Settings]编译设置->[Pr ...
- Promise对象深入理解
目录 基本用法 返回另一个 Promise 实例 Promise.prototypeof.then Promise.prototype.catch Promise.prototype.finally ...
- BZOJ3224普通平衡树
洛谷题面链接 很早就过了,太久没打了,原本是在noip前用来练emacs的手感的. noip炸了,就滚回来更博客了(安排的计数任务刷不动,学不会容斥,打发时间...) 众所周知,splay是个好算法, ...
- Python 去除列表中重复的元素（转载http://blog.csdn.net/zhengnz/article/details/6265282）
比较容易记忆的是用内置的set l1 = ['b','c','d','b','c','a','a']l2 = list(set(l1))print l2 还有一种据说速度更快的,没测试过两者的速度 ...
- Influxdb 时序数据库 centos 安装
Influxdb 环境搭建 操作系统:CentOS 7 X64 SSH工具:PuTTY 操作系统安装,请参照官网文档进行:https://www.centos.org/ 使用PuTTY 通过ssh连接 ...
- axios delete 请求
axios delete 请求 在传递一个参数的时候,直接把参数放在请求连接后面,用'/' 连接就可以了 this.axios.post(this.APIURL+'/'+ID) //http://ww ...
- hihocoder #1190 : 连通性·四 点双联通分量
http://hihocoder.com/problemset/problem/1190?sid=1051696 先抄袭一下 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描 ...
- php post提交超过1000个字段的时候服务器会截断多余部分
采取将子字段转化为json的形式,合并多个字段于一个字段
- Unity EditorWindow知识记录
1.创建EditorWindow using UnityEditor; using UnityEngine; public class ZZEditorWindow : EditorWindow { ...