jQuery圖片無縫滑動效果的兩種實現方式

阿新 • • 發佈：2019-02-05

這是一個非常實用的效果，原理也很簡單，網上的外掛也很多，但是在我看來別人的始終是別人的，於是，我自己也寫了個demo，在這裡和大家分享一下

效果：平滑、無縫銜接切換

原理：把第一張新增在最後張的後面，最後張新增在第一張的前面，當圖片運動到最後張的時候（也就是新增的第一張）運動結束同時返回第一張

下面是第一種方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.slider_wrap{width:800px;height:450px;position:relative;overflow:hidden;margin:20px auto;}
.slider_wrap .slider_content{width:4000px;height:100%;position:absolute;top:0;}
.slider_wrap .slider_item{width:800px;height:100%;float:left;}
.slider_wrap .slider_item img{width:100%;height:100%;}

.slider_wrap .slider_btn{position:absolute;padding:10px;background:#ccc;top:207px;}
.slider_wrap .slider_btn.slider_prev{left:0;}
.slider_wrap .slider_btn.slider_next{right:0;}
.slider_wrap .slider_btnList{width:100%;position:absolute;bottom:5px;left:0;text-align:center;}
.slider_wrap .btnList{width:10px;height:10px;display:inline-block;background:#fff;border-radius:50%;margin:0 3px;}
.slider_wrap .btnList.active{background:#ccc;}
</style>
</head>
<body>
<div class="slider_wrap">
<div class="slider_content">
<div class="slider_item">
<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1308/15/c6/24496455_1376533836899_800x600.jpg" alt="">
</div>
<div class="slider_item">
<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1308/17/c2/24561035_1376699709480_800x600.jpg" alt="">
</div>
<div class="slider_item">
<img src="http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/0F/ChMkJ1ZpMZGIB4seAB2BJTKeeGUAAF_IwH1XDcAHYE9922.jpg" alt="">
</div>
<div class="slider_item">
<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1308/17/c2/24561037_1376699725171_800x600.jpg" alt="">
</div>
<div class="slider_item">
<img src="http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/03/ChMkJ1bKxo2IUKlMABBGn3PconAAALHnABsvKEAEEa3344.jpg" alt="">
</div>
</div>
<div class="slider_btn slider_prev">prev</div>
<div class="slider_btn slider_next">next</div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var setting = {
'index':0,
'interval':3000,
'duration':500,
'autoPlay':true
};
var sliderWrap = $(".slider_wrap");
var sliderCont = sliderWrap.find(".slider_content");
var sliderItem = sliderWrap.find(".slider_item");
var sliderPrev = sliderWrap.find(".slider_prev");
var sliderNext = sliderWrap.find(".slider_next");

//建立點選按鈕

var btnListDom = '';
sliderItem.each(function(){
btnListDom += '<div class="btnList"></div>';
});
var sliderBtnList = '<div class="slider_btnList">'+btnListDom+'</div>';
sliderWrap.append(sliderBtnList);
var btnList = sliderWrap.find('.btnList');
var sliderWidth = sliderWrap.width();

//最後一張新增到第一張前面，第一張新增到最後一張後面

var firstItem = sliderItem.first().clone();
var lastItem  = sliderItem.last().clone();
sliderCont.append(firstItem).prepend(lastItem);
sliderItem = sliderCont.children();
var index = 0 ;


//這裡的長度是程式新增後的長度

var length = sliderItem.length;
var timer = null;
sliderCont.css({
'width':length*sliderWidth,
'left':-sliderWidth
});
showBtn();
sliderPrev.click(function(){
animateFn('prev');
});
sliderNext.click(function(){
animateFn('next');
});
btnList.on('click',function(){
index = $(this).index();
animateFn('list');
});
sliderWrap.hover(clearIntervalFn,setIntervalFn);
setIntervalFn();

function showBtn(){
btnList.eq(index).addClass('active').siblings().removeClass('active');
}


function animateFn(dir){
//判斷是否正在動畫
if(!sliderCont.is(":animated")){
// 判斷傳入引數是否為上一張
if(dir === 'prev'){
index -- ;
//如果當前張是否為第一張 運動到新增的最後一張，運動結束回撥left值為最後張
if(index<0){
sliderCont.animate({
'left':0
},setting.duration,function(){
$(this).css('left',-(length-2)*sliderWidth);
});
index = length-3;
}else{
move();
}
}else if(dir === 'next'){
index ++ ;
if(index>length-3){
sliderCont.animate({
'left':-(length-1)*sliderWidth
},setting.duration,function(){
$(this).css('left',-sliderWidth);
});
index = 0;
}else{
move();
}
}else if(dir === 'list'){
move();
}
showBtn();
function move(){
sliderCont.animate({
'left':-(index+1)*sliderWidth
},setting.duration);
}
}
}
function setIntervalFn(){
clearIntervalFn();
if(setting.autoPlay){
timer = setInterval(function(){
animateFn('next');
},setting.interval);
}
}
function clearIntervalFn(){
clearInterval(timer)
}
});
</script>
</html>

下面是第二種方法，這裡用的是css3的transition過渡，但是這裡要注意的是，在移動到最後一個的時候新增一個和多度時長相同的計時器來回到第一個，再利用transitionend事件來控制使用者點選過快出現bug

下面是程式碼部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}
		.slider_wrap{width:800px;height:450px;position:relative;overflow:hidden;margin:20px auto;}
		.slider_wrap .slider_content{width:4000px;height:100%;position:absolute;top:0;}
		.slider_wrap .slider_item{width:800px;height:100%;float:left;}
		.slider_wrap .slider_item img{width:100%;height:100%;}

		.slider_wrap .slider_btn{position:absolute;padding:10px;background:#ccc;top:207px;}
		.slider_wrap .slider_btn.slider_prev{left:0;}
		.slider_wrap .slider_btn.slider_next{right:0;}
		.slider_wrap .slider_btnList{width:100%;position:absolute;bottom:5px;left:0;text-align:center;}
		.slider_wrap .btnList{width:10px;height:10px;display:inline-block;background:#fff;border-radius:50%;margin:0 3px;}
		.slider_wrap .btnList.active{background:#ccc;}
	</style>
</head>
<body>
	<div class="slider_wrap">
		<div class="slider_content">
			<div class="slider_item">
				<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1308/15/c6/24496455_1376533836899_800x600.jpg" alt="">
			</div>
			<div class="slider_item">
				<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1308/17/c2/24561035_1376699709480_800x600.jpg" alt="">
			</div>
			<div class="slider_item">
				<img src="http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/0F/ChMkJ1ZpMZGIB4seAB2BJTKeeGUAAF_IwH1XDcAHYE9922.jpg" alt="">
			</div>
			<div class="slider_item">
				<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1308/17/c2/24561037_1376699725171_800x600.jpg" alt="">
			</div>
			<div class="slider_item">
				<img src="http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/03/ChMkJ1bKxo2IUKlMABBGn3PconAAALHnABsvKEAEEa3344.jpg" alt="">
			</div>
		</div>
		<div class="slider_btn slider_prev">prev</div>
		<div class="slider_btn slider_next">next</div>
	</div>
</body>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
	$(document).ready(function(){
		var setting = {
			'index':0,
			'interval':3000,
			'duration':500,
			'autoPlay':true
		};
		var sliderWrap = $(".slider_wrap");
		var sliderCont = sliderWrap.find(".slider_content");
		var sliderItem = sliderWrap.find(".slider_item");
		var sliderPrev = sliderWrap.find(".slider_prev");
		var sliderNext = sliderWrap.find(".slider_next");

		//建立點選按鈕
		
		var btnListDom = '';
		sliderItem.each(function(){
			btnListDom += '<div class="btnList"></div>';
		});
		var sliderBtnList = '<div class="slider_btnList">'+btnListDom+'</div>';
		sliderWrap.append(sliderBtnList);
		var btnList = sliderWrap.find('.btnList');
		var sliderWidth = sliderWrap.width();

		//最後一張新增到第一張前面，第一張新增到最後一張後面
		
		var firstItem = sliderItem.first().clone();
		var lastItem  = sliderItem.last().clone();
		sliderCont.append(firstItem).prepend(lastItem);
		sliderItem = sliderCont.children();
		var index = 0 ;

		//這裡的長度是程式新增後的長度
		
		var length = sliderItem.length;
		var timer = null;
		var isTransition = true;
		sliderCont.css({
			'width':length*sliderWidth,
			'left':-sliderWidth
		});
		showBtn();
		sliderPrev.click(function(){
			animateFn('prev');
		});
		sliderNext.click(function(){
			animateFn('next');
		});
		btnList.on('click',function(){
			index = $(this).index();
			animateFn('list');
		});
		sliderWrap.hover(clearIntervalFn,setIntervalFn);
		setIntervalFn();
		
		function showBtn(){
			btnList.eq(index).addClass('active').siblings().removeClass('active');
		}

		function animateFn(dir){
			//判斷是否正在動畫
			if(isTransition){
				isTransition = false;
				var timer = null;
				// 判斷傳入引數是否為上一張
				if(dir === 'prev'){
					index -- ;
					//如果當前張是否為第一張 運動到新增的最後一張，運動結束回撥left值為最後張
					if(index<0){
						sliderCont.css({
							'left':0,
							'transition':setting.duration+'ms'
						});
						setTimeout(function(){
							sliderCont.css({
								'left':-(length-2)*sliderWidth,
								'transition':'0ms'
							});
							isTransition = true;
						},setting.duration);
						index = length-3;
					}else{
						move();
					}
				}else if(dir === 'next'){
					index ++ ;
					if(index>length-3){
						sliderCont.css({
							'left':-(length-1)*sliderWidth,
							'transition':setting.duration+'ms'
						});
						setTimeout(function(){
							sliderCont.css({
								'left':-sliderWidth,
								'transition':'0ms'
							});
							isTransition = true;
						},setting.duration);
						index = 0;
					}else{
						move();
					}
				}else if(dir === 'list'){
					move();
				}
				showBtn();
				function move(){
					sliderCont.css({
						'left':-(index+1)*sliderWidth,
						'transition':setting.duration+'ms'
					});
				}
				sliderCont.on('transitionend webkitTransitionEnd mozTransitionEnd OTransitionEnd',function(){
					isTransition = true;
				});
			}
		}
		function setIntervalFn(){
			clearIntervalFn();
			if(setting.autoPlay){
				timer = setInterval(function(){
					animateFn('next');
				},setting.interval);
			}
		}
		function clearIntervalFn(){
			clearInterval(timer)
		}
	});
</script>
</html>

這個效果非常實用，需要的朋友在明白原理後自己封裝成外掛來使用吧，如果本文幫助到了你別忘了點個贊喲！

jQuery圖片無縫滑動效果的兩種實現方式

這是一個非常實用的效果，原理也很簡單，網上的外掛也很多，但是在我看來別人的始終是別人的，於是，我自己也寫了個demo，在這裡和大家分享一下效果：平滑、無縫銜接切換原理：把第一張新增在最後張的後面，最後張新增在第一張的前面，當圖片運動到最後張的時候（也就是新增的第一

js實現上傳圖片並顯示的兩種實現方式(無需上傳到伺服器再顯示)

方法一： <input type='file' id='chooseFile'> <img src='' id='picToCheck'/> document .querySelector('#chooseFile'

生成圖片驗證碼的兩種實現方式

最近工作中，需求讓新加一個圖片驗證碼功能，其實這個功能之前自己寫過，想必跟大家現在心裡想到的實現方式一樣，要麼是通過servlet實現請求操作，要麼是通過get請求實現操作。然後在後臺通過session儲存圖片上的字串，和之後前臺請求過來的帶的輸入的字串引數，做比較，判斷是

Android開發——彈性滑動的兩種實現方式

0. 前言我們在Android開發——View滑動的三種實現方式中學習瞭如何進行View滑動，在第一種方法，利用ScrollBy和ScrollTo進行滑動時，滑動效果是瞬間完成的，為了更好的使用者體驗，

圖片輪播的兩種實現方式（一）

專案中用到的第一種方法，學習借鑑了https://github.com/qingse/ImageSlideshow 自定義ImageSlideshow，繼承自FrameLayout，在構造方法中，初始化資料： public ImageSlideshow(Context c

iOS 圖片模糊效果三種實現方式

1.實現效果依次如圖：原圖、iOS8效果、Core Image效果、 VImage 效果 - 2. 程式碼 #import "ViewController.h" #import <Accelerate/Accelerate.h> @interface Vi

【Android】Android開發之常用的loading等待效果實現，仿微博等待動畫。兩種實現方式詳解

長期維護的Android專案，裡面包括常用功能實現，以及知識點詳解，當然還有Java中的知識點。具體請看github：https://github.com/QQ986945193/DavidAndroidProjectTools 首先大家都知道，當我

jQuery中JSONP的兩種實現方式

利用innerHTML實現隱顯效果-兩種實現方法

最近對JavaScript非常感興趣，可能因為是它和JAVA差不多吧。原來看到一些網頁上的隱顯效果，心理面真是佩服，心想自己能夠做就爽了。現在對innerHTML有一點的瞭解，做這個東西就相對簡單了，下面就是我自己弄來玩的一個例子，我相信你看了過後，如果你原來

Android中將方形圖片擷取成圓形的兩種實現方式

以下兩種方法均有不足，僅供參考第一種實現方式是通過設定畫筆的渲染方式對圖片進行處理：首先要了解幾種渲染方式 1.BitmapShader（影象渲染）　　BitmapShader的作用是

[轉]Web APi之認證（Authentication）兩種實現方式【二】（十三）

用戶數 ted das 客戶元素基礎目標開始 net 本文轉自：http://www.cnblogs.com/CreateMyself/p/4857799.html 前言上一節我們詳細講解了認證及其基本信息，這一節我們通過兩種不同方式來實現認證，並且分析如

多線程兩種實現方式的區別

http [] tick 避免 main 單繼承 style 區別 tar 請解釋Thread類與Runnable接口實現多線程的區別？（請解釋多線程兩種實現方式的區別？） 1. Thread類時Runnable接口的子類，使用Runnable接口實現多線程可以避免單繼承局

JPA 派生標識符的兩種實現方式

string column public tid man pri one embed page 方法一：@Entity@IdClass(ModuleId.class)public class Module { @Id private Integer index;

14、Fibonacci的兩種實現方式

等於 cheng pos art log ref clas gpo tar 斐波納契數列，又稱黃金分割數列，指的是這樣一個數列：1、1、2、3、5、8、13、21、……在數學上，斐波納契數列以如下被以遞歸的方法定義：F0=0，F1=1，Fn=F(n-1)+F(n-2)（n&

Web APi之認證（Authentication）兩種實現方式【二】（十三）

基於web 推薦 zed {0} scheme sage https 函數 ges 原文:Web APi之認證（Authentication）兩種實現方式【二】（十三）前言上一節我們詳細講解了認證及其基本信息，這一節我們通過兩種不同方式來實現認證，並且分析如何合理的利用

spring ----> aop的兩種實現方式

select imp ack exe readv expr gpo for public 實現1：基於xml 1 package com.rr.spring3.interf; //接口 2 3 public interface SayHello { 4 5

Ajax的兩種實現方式

enc () != 部分 pen clas servlet 瀏覽器 pop //ajax的jquery實現 function aclick(){//alert("測

圖形驗證碼的兩種實現方式

ava 輸入 urn color deb rect lac prev 後臺情形一：圖形驗證碼跟短信驗證碼一起，只需要將後臺提供的動態鏈接填到（id="img"）的src中即可生成動態驗證碼。然後，在需要請求接口的地方，只需把（id="imgCode"）中用戶輸入的信息通

前端路由的兩種實現方式

color 前端路由 his 頁面無刷新原理 range window 使用什麽是路由？路由是根據不同的 url 地址展示不同的內容或頁面早期的路由都是後端直接根據 url 來 reload 頁面實現的，即後端控制路由。後來頁面越來越復雜，服務器壓力越來越大，隨

題目24-多線程兩種實現方式

類重寫直接解決方案做的子類是否為空缺點多線程同步弊端 1、多線程兩種實現方式 (1)繼承Thread 定義類繼承Thread 重寫run方法把新線程要做的事寫在run方法中創建線程對象開啟新線程, 內部會自動執行run方法(2)實現Runnable

jQuery圖片無縫滑動效果的兩種實現方式

相關推薦