拖拽大图轮播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 ...
随机推荐
- hdu1850(nim博弈)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1850 题意:中文题诶- 思路:nim博弈 可以将本题抽象成一般nim博弈,那么有: 1. 对于所有元素 ...
- 00 | QPS
每秒查询率 QPS Query Per Second 某个查询服务器 在 规定时间内 处理了多少流量 对应的fetches/sec,即每秒响应请求数,就是最大吞吐量 原理:每天80%的访问集中在20% ...
- pycharm中模块matplolib生成图表出现中文乱码解决方法
在python文件中加入如下两行 import matplotlib.pyplot as plt plt.rcParams['font.sans-serif']=['SimHei'] #用来正常显示中 ...
- 一篇文章带你搞懂 SpringBoot与Swagger整合
Swagger使用由于不喜欢csdn的markwoen编辑器,对代码样式支持不好,看着不舒服,对审美要求比较高的同学移步github:https://github.com/itguang/swagge ...
- JS异常捕获和抛出
try...catch 用来异常捕获(主要适用于IE5以上内核的浏览器,也是最常用的异常捕获方式) 使用onerror时间捕获异常,这种捕获方式是比较古老的一中方式,目前一些主流的浏览器暂不支持这种 ...
- css-原理详解
语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器一般使用id或者class选择器,声明由{}包含,每条声明由一个属性和一个值组成. .city { float:left; ...
- C# 获取当前ip
1.获取局域网ip IPAddress ipAddr = Dns.Resolve(Dns.GetHostName()).AddressList[0];//获得当前IP地址 string ip=ipAd ...
- Hive_Hive的管理_远程服务
远程服务启动方式 - 端口号10000 - 启动方式: #hive --service hiveserver & 以JDBC或ODBC的程序登陆到hive中操作数据时,必须选用远程服务启动方式 ...
- 转 测试linux中expect的timeout参数的作用
http://blog.csdn.net/msdnchina/article/details/50638818
- Spring Security LDAP简介
1.概述 在本快速教程中,我们将学习如何设置Spring Security LDAP. 在我们开始之前,了解一下LDAP是什么? - 它代表轻量级目录访问协议.它是一种开放的,与供应商无关的协议,用于 ...