jquery輪播的實(shí)現(xiàn)方式 附完整實(shí)例
更新時(shí)間：2016年07月28日 08:37:26 作者：chua1989
這篇文章主要介紹了jquery輪播的實(shí)現(xiàn)方式，文中分享了jQuery輪播完整實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jquery輪播實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下
1.閃現(xiàn)方式的輪播
不論述，實(shí)現(xiàn)比較簡(jiǎn)單，效果也比較好
2.滑動(dòng)輪播
以下面的html代碼為例（向左滑動(dòng)）
<div class="example" style="overflow: hidden; width: 266px;"> <ul style="width: 798px; float: left; height: 216px; margin-left: 0px;"> <li style="width: 266px; float: left; height: 216px;"></li> <li style="width: 266px; float: left; height: 216px;"></li> <li style="width: 266px; float: left; height: 216px;"></li> </ul> </div>
插件源碼：實(shí)現(xiàn)向左和向上輪播，手動(dòng)切換也是向左和向上切換（手動(dòng)切換關(guān)鍵源碼）
var all = $panel.find('>li'),
prevAll = new Array();
prevAll[0] = all.eq(0);
//將目標(biāo)節(jié)點(diǎn)前的所有節(jié)點(diǎn)都保存到prevAll中，動(dòng)畫結(jié)束后將這些節(jié)點(diǎn)一一按順序加到容器的后面
for(var i = 1; i < len; i++){
all.eq(i).css({display: 'none'});
prevAll[i] = all.eq(i);
}
...
$panel.animate({ 'marginLeft': -options.width + 'px' }, options.duration, function() {
for(var i = 0; i < prevAll.length; i++){
$panel.append($(prevAll[i]).css({display: 'block'})); //將當(dāng)前展示節(jié)點(diǎn)前的所有節(jié)點(diǎn)都加載到最后
}
$panel.css({ marginLeft: 0 });
})
滑動(dòng)輪播的實(shí)現(xiàn)方式主要有兩種
1)切換父元素margin-left,將第一個(gè)子元素不斷添加到父容器結(jié)尾
簡(jiǎn)單實(shí)現(xiàn)
var $panel = $('example');
var scrollTimer = setInterval(function() {
scrollNews($panel);
}, 3000);
function $scrollNews(){
$panel.animate({ 'marginLeft': '-266px' }, 500, function() {
$panel.css({ marginLeft: 0 }).find('>li:first').appendTo($panel);
})
}
這種方式有一個(gè)問題就是在老IE上可能存在兼容問題。
2) 累計(jì)方式設(shè)置父元素margin-left
不過在margin-left設(shè)置到最小的時(shí)候（滑動(dòng)到最后一個(gè)元素），將第一個(gè)子元素的位置設(shè)置為最后一個(gè)子元素的后面，當(dāng)最后一個(gè)元素滾動(dòng)到第一個(gè)元素后，父元素margin-left置為0且第一個(gè)子元素的位置歸位。舉個(gè)簡(jiǎn)單代碼例子
var $panel = $('.example'),
index = 0;
var scrollTimer = setInterval(function() {
scrollNews($panel);
}, 3000);
function scrollNews(){
if(++index >= 2){
$panel.css({
'paddingLeft': 266 + 'px'
})
$panel.find('>li:first').css({
'position': 'absolute',
'left': 266*index + 'px'
});
}
$panel.animate({ 'marginLeft': -266*index + 'px' }, 500, function() {
if(++index > 3){
$panel.css({ marginLeft: 0 });
}
if(index >= 3){
index = 0;
$panel.css({
marginLeft: 0,
'paddingLeft': 0
});
$panel.find('>li:first').css({
'position': 'static',
'left': 'auto'
});
}
})
}
更復(fù)雜的滾動(dòng)插件需要支持水平和垂直方向的滾動(dòng)（四個(gè)方向）、可以手動(dòng)切換焦點(diǎn)、可以翻上一個(gè)下一個(gè)。附上本人寫完整的插件源碼
插件源碼jquery.nfdscroll.js：支持水平和垂直方向（四個(gè)方向）滾動(dòng)，手動(dòng)切換會(huì)隨切換方向滾動(dòng)
/**
* @author '陳樺'
* @date '2016-5-10'
* @description 滑動(dòng)輪播插件，支持水平和垂直方向滑動(dòng)輪播
*
* @example
html:
<div class="nfdnews_topnews example">
<!-- 滾動(dòng)內(nèi)容ul -->
<ul>
<li><a href="xxx" target="_blank" title="xxx"></a></li>
<li><a href="xxx" target="_blank" title="xxx"></a></li>
<li><a href="xxx" target="_blank" title="xxx"></a></li>
<li><a href="xxx" target="_blank" title="xxx"></a></li>
</ul>
<!-- 焦點(diǎn)列表，可選 -->
<ol>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
</ol>
<!-- 上一個(gè)和下一個(gè)，可選 -->
<div>
<a class="nfdscroll-prev" href="javascript:void(0);"></a>
<a class="nfdscroll-next" href="javascript:void(0);"></a>
</div>
</div>
js:
$('.example').nfdscroll({
startIndex:0,
width:'266',
height:'216',
interval:2000,
selected:'circle',
prevText:'',
nextText:'',
deriction:'left',
callback: function(index,$currentNode){
console.log(index)
}
});
* @param startIndex {Number} 默認(rèn)從第幾個(gè)滾動(dòng)體開始滾動(dòng),可選（0-n,0表示第一個(gè)，默認(rèn)為0）
* @param width {Number} 滾動(dòng)體寬度,可選（當(dāng)寬度為0時(shí)表示不設(shè)置寬度）
* @param height {Number} 滾動(dòng)體高度,可選（當(dāng)高度為0時(shí)表示不設(shè)置高度）
* @param interval {Number} 間隔時(shí)間，單位毫秒, 當(dāng)值為負(fù)時(shí)表示不進(jìn)行自動(dòng)滾動(dòng)
* @param duration {Number} 動(dòng)畫持續(xù)時(shí)間
* @param selected {String} 滾動(dòng)切換小圖標(biāo)（焦點(diǎn)列表）當(dāng)前class
* @param deriction {String} 滾動(dòng)方向，支持left/right和top/bottom
* @param callback {Function} 滑動(dòng)動(dòng)畫結(jié)束時(shí)觸發(fā)的回調(diào)，參數(shù)(index,$currentNode),index:輪播結(jié)束后展示的節(jié)點(diǎn)的索引；currentNode：輪播結(jié)束后當(dāng)前展示的節(jié)點(diǎn)的jquery對(duì)象
* @param prevText {String} 上一個(gè)按鈕的文本，默認(rèn)是"上一個(gè)"
* @param nextText {String} 下一個(gè)按鈕的文本，默認(rèn)是"下一個(gè)"
*/
jQuery.fn.extend({nfdscroll: function(options) {
var defaultOpt = {
startIndex: 0,
width: 0,//滾動(dòng)體寬度,可選（當(dāng)寬度為0時(shí)表示不設(shè)置寬度）
height: 0,//滾動(dòng)體高度,可選（當(dāng)高度為0時(shí)表示不設(shè)置高度度）
interval: 1000,//間隔時(shí)間毫秒
duration: 400,//動(dòng)畫持續(xù)時(shí)間
selected:'selected',//滾動(dòng)切換小圖標(biāo)當(dāng)前class
prevText:'上一個(gè)',
nextText:'下一個(gè)',
deriction:'left',//滾動(dòng)方向
callback: function(index,$currentNode){//每次滾動(dòng)到新節(jié)點(diǎn)后馬上觸發(fā)，currentNode是當(dāng)前展示的節(jié)點(diǎn)的jquery對(duì)象
}
},
$this = this,
$panel = $this.find('>ul'),//滾動(dòng)容器
$panelList = $panel.find('>li'),
$selectList = $this.find('>ol>li'),//選擇容器
options = jQuery.extend(defaultOpt,options),
animateFn,//滾動(dòng)動(dòng)畫
max = $panel.find(">li").length,//要滾動(dòng)的節(jié)點(diǎn)的數(shù)量
focusIndex = 0,//當(dāng)前展示的節(jié)點(diǎn)的索引
nfdscrollTimer = 0,//計(jì)時(shí)器
inAnimation = false,//動(dòng)畫過程中不再響應(yīng)其他動(dòng)畫
isWaitting = false,//是否有未執(zhí)行的等待動(dòng)畫
waittingIndex;//未執(zhí)行的等待動(dòng)畫的目標(biāo)index
$('.nfdscroll-prev').text(options.prevText);
$('.nfdscroll-next').text(options.nextText);
//只有一個(gè)展示，不需要輪播
if($panelList.length <= 1){
return;
}
//當(dāng)前動(dòng)畫沒有做完但是焦點(diǎn)已經(jīng)切換到下一個(gè)地方，這個(gè)函數(shù)就是用來執(zhí)行保障當(dāng)前顯示的頁面和鼠標(biāo)指定的目標(biāo)一致的處理
function doWaitting(){
if(isWaitting){
startScroll(waittingIndex);
}
}
//開始輪播
function startScroll(toIndex){
stopScroll();
if(inAnimation) {
isWaitting = true;
waittingIndex = toIndex;
return;//動(dòng)畫過程中不再響應(yīng)其他動(dòng)畫
}else{
isWaitting = false;
}
if(toIndex == undefined){
if(options.interval > 0){
nfdscrollTimer = setInterval(function(){
animateFn(toIndex);
},options.interval);
}
//跳到指定index后再計(jì)時(shí)
}else{
animateFn(toIndex);
if(options.interval > 0){
nfdscrollTimer = setInterval(function(){
animateFn();
},options.interval);
}
}
}
//停止輪播
function stopScroll(){
clearInterval(nfdscrollTimer);
}
//向左向右滾動(dòng)動(dòng)畫
//參數(shù)toIndex: number,滾動(dòng)到指定index
function leftRightAnimate(toIndex){
//默認(rèn)滾動(dòng)方式
if(toIndex == undefined){
if(options.deriction == 'left'){
toIndex = focusIndex + 1;
}else{
toIndex = focusIndex - 1;
}
}
if(toIndex != focusIndex){
inAnimation = true;
//當(dāng)前為最后一個(gè)輪播體時(shí)的處理
var tInd = 0;
if(toIndex >= max){//最后一張圖片繼續(xù)滾動(dòng)時(shí)
$panel.css({
'paddingLeft': options.width + 'px'
})
$panelList.eq(0).css({
'position': 'absolute',
'left': options.width*toIndex + 'px'
});
tInd = 0;
}else if(toIndex < 0){//僅僅在當(dāng)前圖片是第一個(gè)圖片，然后點(diǎn)擊上一個(gè)圖片的時(shí)候出現(xiàn)
//當(dāng)前為最后一個(gè)輪播體時(shí)的處理
$panelList.eq(max - 1).css({
'position': 'absolute',
'left': -options.width + 'px'
});
tInd = max - 1;
}else{
tInd = toIndex;
}
//先將焦點(diǎn)切換過去
$selectList.filter('.' + options.selected).removeClass(options.selected)
.end().eq(tInd).addClass(options.selected);
$panel.animate({ 'marginLeft': -options.width*toIndex + 'px' }, options.duration, function() {
focusIndex = tInd;
if(toIndex >= max){//最后一張圖片繼續(xù)滾動(dòng)時(shí)
$panel.css({
'marginLeft': 0,
'paddingLeft': 0
});
$panelList.eq(0).css({
'position': 'static',
'left': 'auto'
});
}else if(toIndex < 0){//僅僅在當(dāng)前圖片是第一個(gè)圖片，然后點(diǎn)擊上一個(gè)圖片的時(shí)候出現(xiàn)
$panel.css({
'marginLeft': -options.width*focusIndex + 'px',
'paddingLeft': 0
});
$panelList.eq(max - 1).css({
'position': 'static',
'left': 'auto'
});
}
options.callback(focusIndex,$panelList.eq(focusIndex));
inAnimation = false;
doWaitting();
})
}
}
//向上向下滾動(dòng)動(dòng)畫
function topBottomAnimate(toIndex){
//默認(rèn)滾動(dòng)方式
if(toIndex == undefined){
if(options.deriction == 'top'){
toIndex = focusIndex + 1;
}else{
toIndex = focusIndex - 1;
}
}
if(toIndex != focusIndex){
inAnimation = true;
//當(dāng)前為最后一個(gè)輪播體時(shí)的處理
var tInd = 0;
if(toIndex >= max){
$panel.css({
'paddingTop': options.height + 'px'
})
$panelList.eq(0).css({
'position': 'absolute',
'top': options.height*toIndex + 'px'
});
tInd = 0;
}else if(toIndex < 0){//僅僅在當(dāng)前圖片是第一個(gè)圖片，然后點(diǎn)擊上一個(gè)圖片的時(shí)候出現(xiàn)
//當(dāng)前為最后一個(gè)輪播體時(shí)的處理
$panelList.eq(max - 1).css({
'position': 'absolute',
'top': -options.height + 'px'
});
tInd = max - 1;
}else{
tInd = toIndex;
}
//先將焦點(diǎn)切換過去
$selectList.filter('.' + options.selected).removeClass(options.selected)
.end().eq(tInd).addClass(options.selected);
$panel.animate({ 'marginTop': -options.height*toIndex + 'px' }, options.duration, function() {
focusIndex = tInd;
if(toIndex >= max){
$panel.css({
marginTop: 0,
'paddingTop': 0
});
$panelList.eq(0).css({
'position': 'static',
'top': 'auto'
});
}else if(toIndex < 0){//僅僅在當(dāng)前圖片是第一個(gè)圖片，然后點(diǎn)擊上一個(gè)圖片的時(shí)候出現(xiàn)
$panel.css({
'marginTop': -options.height*focusIndex + 'px',
'paddingTop': 0
});
$panelList.eq(max - 1).css({
'position': 'static',
'top': 'auto'
});
}
options.callback(focusIndex,$panelList.eq(focusIndex));
inAnimation = false;
doWaitting();
})
}
}
function bindEvent(){
//綁定事件
$this.on('mouseover',function(){
stopScroll();
}).on('mouseout',function(){
startScroll();
}).on('click', '.nfdscroll-prev', function(){
stopScroll();
startScroll(focusIndex - 1);
}).on('click', '.nfdscroll-next', function(){
stopScroll();
startScroll(focusIndex + 1);
})
$selectList.on('mouseover',function(){
stopScroll();
if(!$(this).is('.' + options.selected)){
startScroll($(this).index());
}
});
}
function init(){
$this.css({
position: 'relative',
overflow: 'hidden'
});
$panel.css({
position: 'relative'
})
focusIndex = options.startIndex;//默認(rèn)從startIndex開始滾動(dòng)
$selectList.eq(focusIndex).addClass(options.selected);//先將焦點(diǎn)切換過去
if(options.deriction == 'left' || options.deriction == 'right'){
//初始化樣式,實(shí)際上不應(yīng)該插件里面來做樣式，應(yīng)該使用者自己就保證樣式?jīng)]有問題
var cssO = {
width: options.width,
'float': 'left'
}
$this.css({
width: options.width
});//只需要管寬度即可
if(options.height){
cssO.height = options.height;
}
var leng = $panel.find('>li').css(cssO).length;
$panel.css({
width: options.width * leng + 'px',
'marginLeft': -options.width*focusIndex + 'px'
});
animateFn = leftRightAnimate;
}else if(options.deriction == 'top' || options.deriction == 'bottom'){
var cssO = {
height: options.height
}
$this.css({
height: options.height
});//只需要管高度度即可
if(options.width){
cssO.width = options.width;
}
var leng = $panel.find('>li').css(cssO).length;
$panel.css({
height: options.height * leng + 'px',
'marginTop': -options.height*focusIndex + 'px'
});
animateFn = topBottomAnimate;
}else{
alert('插件只支持left/right/top/bottom四種方向上的滾動(dòng)');
return;
}
startScroll();
}
bindEvent();
init();
return {
'stopScroll': stopScroll,
'startScroll': startScroll
}
}
});
一個(gè)完整的例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>輪播測(cè)試?yán)?lt;/title>
<style type="text/css">
body,ul,ol{margin: 0; padding: 0;}
ul,ol{list-style: none;}
.li1{background-color: #000;}
.li2{background-color: #333;}
.li3{background-color: #666;}
.li4{background-color: #999;}
.example{margin-left: 300px;}
.example ol {
position: absolute;
padding-left: 80px;
width: 186px;
height: 20px;
top: 186px;
left: 0px;
background: #fff;
cursor: pointer;
}
ol li{
float: left;
width: 10px;
height: 10px;
margin: 5px;
background: #ff0;
border-radius: 10px;
}
ol li.circle{
background: #f00;
}
</style>
</head>
<body>
<div class="example">
<!-- 滾動(dòng)內(nèi)容ul -->
<ul>
<li class="li1"><a href="xxx" target="_blank" title="xxx"></a></li>
<li class="li2"><a href="xxx" target="_blank" title="xxx"></a></li>
<li class="li3"><a href="xxx" target="_blank" title="xxx"></a></li>
<li class="li4"><a href="xxx" target="_blank" title="xxx"></a></li>
</ul>
<!-- 焦點(diǎn)列表，可選 -->
<ol>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
</ol>
<!-- 上一個(gè)和下一個(gè)，可選 -->
<div>
<a class="nfdscroll-prev" href="javascript:void(0);"></a>
<a class="nfdscroll-next" href="javascript:void(0);"></a>
</div>
</div>
<script type="text/javascript" src="common/jquery.js"></script>
<script type="text/javascript" src="common/jquery.nfdscroll.js"></script>
<script type="text/javascript">
$('.example').nfdscroll({
startIndex:0,
width:'266',
height:'216',
interval:-1,//2000,
selected:'circle',
prevText:'上一個(gè)',
nextText:'下一個(gè)',
deriction:'left',
callback: function(index,$currentNode){
console.log(index)
}
});
</script>
</body>
</html>
實(shí)現(xiàn)效果：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了jquery簡(jiǎn)單圖片輪播特效，圖片輪播效果特別適合做產(chǎn)品展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-09-09
jQuery判斷元素是否顯示 是否隱藏的簡(jiǎn)單實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨Query判斷元素是否顯示 是否隱藏的簡(jiǎn)單實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
jquery數(shù)組之存放checkbox全選值示例代碼
使用jquery數(shù)組可以存放checkbox全選值，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-12-12
jQuery插件MovingBoxes實(shí)現(xiàn)左右滑動(dòng)中間放大圖片效果
本篇文章主要介紹jQuery中MovingBoxes左右滑動(dòng)放大圖片插件示例，實(shí)現(xiàn)左右滑動(dòng)和放大效果，有興趣的可以了解一下。2017-02-02
基于jQuery實(shí)現(xiàn)帶動(dòng)畫效果超炫酷的彈出對(duì)話框(附源碼下載)
這是一款基于jQuery的彈出對(duì)話框插件，這個(gè)jQuery對(duì)話框插件的最大特點(diǎn)是彈出和關(guān)閉都帶有非常炫酷的動(dòng)畫特效,需要的朋友參考下吧2016-02-02
jQuery.uploadify文件上傳組件實(shí)例講解
這篇文章主要介紹了jQuery.uploadify文件上傳組件實(shí)例講解的相關(guān)資料,本文圖文并茂介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
本文主要介紹了獲取jqGrid中選擇的行的數(shù)據(jù)的語法和獲取簡(jiǎn)例，需要的朋友可以看下2016-11-11
jQuery操作Dom元素與遍歷以及JS遍歷詳細(xì)講解
這篇文章主要介紹了jQuery操作Dom元素、jQuery遍歷、JavaScript遍歷，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)掃雷小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
html文件中jquery與velocity變量中的$沖突的解決方法
在使用velocity模版引擎的環(huán)境下，使用jquery時(shí)其中$與velocity變量中的$沖突，下面有個(gè)不錯(cuò)的解決方法，感興趣的朋友可以參考下2013-11-11