流畅度非常好的jQ图片切换代码轮播滚动特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是流畅度非常好的jQ图片切换代码轮播滚动特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>流畅度非常好的图片切换代码</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/gallery.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/TweenMax.min.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filters hidden">
	<defs>
	  <filter id="blur">
		  <feGaussianBlur in="SourceGraphic" stdDeviation="0,0" />
	  </filter>
	</defs>
</svg>
<div class="container">
	<div class="content">
		<div class="gallery">
			<ul class="gallery-pictures">
				<li class="gallery-picture">
					<img src="img/1.jpg" alt="img01">
				</li>
				<li class="gallery-picture">
					<img src="img/2.jpg" alt="img02">
				</li>
				<li class="gallery-picture">
					<img src="img/3.jpg" alt="img03">
				</li>
				<li class="gallery-picture">
					<img src="img/4.jpg" alt="img04">
				</li>
				<li class="gallery-picture">
					<img src="img/5.jpg" alt="img05">
				</li>
				<li class="gallery-picture">
					<img src="img/6.jpg" alt="img06">
				</li>
				<li class="gallery-picture">
					<img src="img/7.jpg" alt="img07">
				</li>
				<li class="gallery-picture">
					<img src="img/8.jpg" alt="img08">
				</li>
				<li class="gallery-picture">
					<img src="img/9.jpg" alt="img09">
				</li>
			</ul>
			<div class="gallery-pagination">
				<button class="gallery-pagination-dot"></button>
				<button class="gallery-pagination-dot"></button>
				<button class="gallery-pagination-dot"></button>
				<button class="gallery-pagination-dot"></button>
				<button class="gallery-pagination-dot"></button>
				<button class="gallery-pagination-dot"></button>
				<button class="gallery-pagination-dot"></button>
				<button class="gallery-pagination-dot"></button>
				<button class="gallery-pagination-dot"></button>
			</div>
		</div>
		<p>鼠标点击拖到查看效果！</p>
	</div>
</div>
<script src="js/gallery.js"></script>
</body>
</html>

JS代码(gallery.js):

$(document).ready(function(){
	var $gallery = $(".gallery"),$galleryPictures = $(".gallery-pictures"),$galleryPicture = $(".gallery-picture"),lastPos ={
	x:0}
,galleryPos ={
	x:0}
,currentImage = -1,imageWidth = 700,imageSpacing = 120,imageTotalWidth=imageWidth+imageSpacing,speedLog=[],speedLogLimit=5,minBlur=2,maxBlur=200,blurMultiplier=0.25,lastBlur=0,dragging=false,lastDragPos={
	x:0}
,dragPos={
	x:0}
,totalDist=0,distThreshold=10,distLog=[],distLogLimit=10,momentumTween=null;
	function setBlur(v){
	if(v<minBlur) v=0;
	if(v>maxBlur) v=maxBlur;
	if(v!=lastBlur){
	$("#blur").get(0).firstElementChild.setAttribute("stdDeviation",v+",0");
}
lastBlur=v;
}
$galleryPictures.css({
	webkitFilter:"url('#blur')",filter:"url('#blur')"}
);
	$galleryPicture.each(function(i){
	var cur = $(this);
	cur.click(function(){
	if(Math.abs(totalDist)<distThreshold)setGalleryPos(i);
}
);
	$(".gallery-pagination-dot").eq(i).click(function(){
	setGalleryPos(i);
}
)}
);
	function setGalleryPos(v,anim){
	if(typeof anim=="undefined") anim=true;
	stopMomentum();
	TweenMax.to(galleryPos,anim?0.8:0,{
	x:-v*imageTotalWidth,ease:Quint.easeOut,onUpdate:updateGalleryPos,onComplete:updateGalleryPos}
);
}
function updateGalleryPos(){
	TweenMax.set($galleryPictures,{
	x:galleryPos.x+(($(window).width()-imageWidth)/2),force3D:true,lazy:true}
);
	var speed=lastPos.x-galleryPos.x;
	var blur=Math.abs(Math.round(speed*blurMultiplier));
	setBlur(blur);
	lastPos.x=galleryPos.x;
	var _currentImage=Math.round(-galleryPos.x/imageTotalWidth);
	if(_currentImage!=currentImage){
	currentImage=_currentImage;
	$(".gallery-pagination-dot-selected").removeClass('gallery-pagination-dot-selected');
	$(".gallery-pagination-dot").eq(currentImage).addClass('gallery-pagination-dot-selected')}
}
$gallery.mousedown(function(event){
	event.preventDefault();
	dragging=true;
	dragPos.x=event.pageX;
	lastDragPos.x=dragPos.x;
	totalDist=0;
	distLog=[];
	stopMomentum();
	updateGalleryPosLoop();
}
);
	$(document).mousemove(function(event){
	if(dragging){
	dragPos.x=event.pageX;
}
}
);
	function updateGalleryPosLoop(){
	if(dragging){
	updateGalleryPos();
	var dist=dragPos.x-lastDragPos.x;
	lastDragPos.x=dragPos.x;
	totalDist+=dist;
	distLog.push(dist);
	while(distLog.length>distLogLimit){
	distLog.splice(0,1);
}
;
	galleryPos.x+=dist;
	requestAnimationFrame(updateGalleryPosLoop)}
}
$(document).mouseup(function(event){
	if(dragging){
	dragging=false;
	var releaseSpeed=0;
	for (var i = 0;
	i < distLog.length;
	i++){
	releaseSpeed+=distLog[i];
}
;
	releaseSpeed/=distLog.length;
	var targetX=galleryPos.x+(releaseSpeed*20);
	targetX=Math.round(targetX/imageTotalWidth)*imageTotalWidth;
	var targetImage=-targetX/imageTotalWidth;
	var excess=0;
	if(targetImage<0){
	excess=targetImage;
	targetImage=0;
}
else if(targetImage>=$galleryPicture.length){
	excess=targetImage-($galleryPicture.length-1);
	targetImage=$galleryPicture.length-1;
}
if(excess!=0){
	targetX=-targetImage*imageTotalWidth;
}
momentumTween=TweenMax.to(galleryPos,1-(Math.abs(excess)/20),{
	x:targetX,ease:Quint.easeOut,onUpdate:updateGalleryPos,onComplete:updateGalleryPos}
);
	if(Math.abs(totalDist)>=distThreshold){
	event.preventDefault();
	event.stopPropagation();
}
}
}
);
	function stopMomentum(){
	if(momentumTween!=null){
	momentumTween.kill();
	momentumTween=null;
	updateGalleryPos();
}
}
setGalleryPos(0,false);
}
)

CSS代码(demo.css):

body{margin:0;background:#52545A;color:#B2B5BD;font-size:1em;font-family:'Quattrocento Sans','Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{color:#999;text-decoration:none;}
a:hover,a:focus{color:#7D87AE;outline:none;}
button:focus{outline:none;}
.hidden{position:absolute;overflow:hidden;width:0;height:0;pointer-events:none;}
.note{padding:1.5em 1.5em 2.5em;font-size:1.75em;}
/* Header */
.codrops-header{padding:3em 1em 4em;text-align:center;}
.codrops-header h1{margin:0.5em 0 0 0;font-weight:400;font-size:3em;line-height:1;font-family:'Lustria','Goudy Old Style',Garamond,'Big Caslon','Times New Roman',serif;}
.codrops-header h1 span{display:block;padding:1em;color:#999;font-weight:400;text-transform:uppercase;letter-spacing:2px;font-size:0.275em;font-family:'Quattrocento Sans','Helvetica Neue',Helvetica,Arial,sans-serif;}
/* Top Navigation Style */
.codrops-links{position:relative;display:inline-block;text-align:center;white-space:nowrap;}
.codrops-links::after{position:absolute;top:0;left:50%;width:1px;height:100%;background:#ddd;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.codrops-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.codrops-icon span{display:none;}
.codrops-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'codropsicons';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
.codrops-icon--drop:before{content:"\e001";}
.codrops-icon--prev:before{content:"\e004";}
/* Demo links */
.codrops-demos{margin:2em 0 0;font-size:1.35em;}
.codrops-demos a{display:inline-block;margin:0.5em;border-width:1px 0;border-style:solid;padding:0.35em;min-width:120px;font-family:'Lustria','Goudy Old Style',Garamond,'Big Caslon','Times New Roman',serif;}
.codrops-demos a.current-demo{color:#7D87AE;}
/* Related demos */
.content{text-align:center;}
.content--related{padding:5em 0;}
.media-item{display:inline-block;padding:1em;vertical-align:top;-webkit-transition:color 0.3s;transition:color 0.3s;}
.media-item__img{max-width:100%;opacity:0.3;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;}
.media-item:hover .media-item__img,.media-item:focus .media-item__img{opacity:1;}
.media-item__title{margin:0;padding:0.5em;font-size:1em;}
@media screen and (max-width:50em){.codrops-header{padding:3em 10% 4em;}
}
@media screen and (max-width:40em){.codrops-header h1{font-size:2.8em;}
}

CSS代码(gallery.css):

.gallery{width:100%;overflow:hidden;position:relative;margin:1em 0 2.5em;}
.gallery-pictures{list-style-type:none;margin:0;padding:0;background:transparent;cursor:-webkit-grab;-webkit-transform:rotateY(0);white-space:nowrap;font-size:0;}
.gallery-picture{width:700px;margin-right:120px;display:inline-block;-webkit-transform:rotateY(0);transform:rotateY(0);}
.gallery-pagination{margin-top:30px;text-align:center;font-size:0;}
.gallery-pagination-dot{background:#333;border-radius:50%;width:16px;height:16px;border:none;margin:0 7px;-webkit-transition:background 0.3s;transition:background 0.3s;}
.gallery-pagination-dot-selected{background:#7D87AE;}

附件:下载该文件资源,减少时间成本(增值服务)