拖拽大图轮播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 ...
随机推荐
- python 如何在 command 中能够找到 其他module
部分代码如下: __author__ = 'norsd' # coding=utf8 # 上句说明使用utf8编码 try: import os import sys import time #关键语 ...
- hdu3949XOR（线性基）
传送门 不知道线性基是什么东西的可以看看蒟蒻的总结 题目大意:求一堆数字能异或出的第$k$大的数是多少 线性基求第k大好珂怕…… 据大佬们说就是把$k$给二进制拆分,如果$k$的第$i$位为1,那么$ ...
- [Xcode 实际操作]八、网络与多线程-(16)使用网址会话对象URLSession下载图片并显示下载进度
目录:[Swift]Xcode实际操作 本文将演示如何通过网址会话对象URLSession显示下载图片的进度. 网址会话对象URLSession具有在后台上传和下载.暂停和恢复网络操作.丰富的代理模式 ...
- 远程kafka通信实例，各种bug解决----虚拟机+本地电脑
为了实现远程kafka通信,我可谓是呕心沥血.期间各种bug各种调,太煎熬了 (T.T) 介绍: 我用一台虚拟机作为远程消息的发送方,用本地电脑主机作为消息的接收方 虚拟机:安装java,kafka, ...
- GPDB外部表创建示例
创建以|为分隔符的外部表CREATE EXTERNAL TABLE ext_expenses ( name text,date date, amount float4, category text, ...
- icekingdom(2018.10.17)
一句话题意:给你一颗n个点的树,节点初始状态下都是白色,有q次修改,每次修改会把[li,ri]区间内的点染成黑色,并且问黑色点能形成几个联通块,然后会将所有点染回白色.(也就是说每次都只有[li,ri ...
- XML学习2 xml生产式
- Python + request接口测试中Cookie和Session的获取和使用
Cookie和Session的简单理解 由于Http协议是无状态的,所以产生了cookie和session进行状态的管理. 从哪里来,在哪里,到哪里去: --> Cookie是由服务端生成,存 ...
- nodejs express session用法（含保存到redis）
普通用法: var express = require('express'); var session = require('express-session'); var app = express( ...
- DDX和DDV——控件与变量之间值的传递
DoDataExchange由框架调用,作用是交互并且验证对话框数据,主要由(DDX) 和 (DDV)宏实现. 永远不要直接调用这个函数,而是通过UpdateData(TRUE/FALSE)实现控件与 ...