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)畫(huà)結(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è)問(wèn)題就是在老IE上可能存在兼容問(wèn)題。
2) 累計(jì)方式設(shè)置父元素margin-left
不過(guò)在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è)。附上本人寫(xiě)完整的插件源碼
插件源碼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)體開(kāi)始滾動(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)畫(huà)持續(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)畫(huà)結(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)畫(huà)持續(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)畫(huà)
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)畫(huà)過(guò)程中不再響應(yīng)其他動(dòng)畫(huà)
isWaitting = false,//是否有未執(zhí)行的等待動(dòng)畫(huà)
waittingIndex;//未執(zhí)行的等待動(dòng)畫(huà)的目標(biāo)index
$('.nfdscroll-prev').text(options.prevText);
$('.nfdscroll-next').text(options.nextText);
//只有一個(gè)展示，不需要輪播
if($panelList.length <= 1){
return;
}
//當(dāng)前動(dòng)畫(huà)沒(méi)有做完但是焦點(diǎn)已經(jīng)切換到下一個(gè)地方，這個(gè)函數(shù)就是用來(lái)執(zhí)行保障當(dāng)前顯示的頁(yè)面和鼠標(biāo)指定的目標(biāo)一致的處理
function doWaitting(){
if(isWaitting){
startScroll(waittingIndex);
}
}
//開(kāi)始輪播
function startScroll(toIndex){
stopScroll();
if(inAnimation) {
isWaitting = true;
waittingIndex = toIndex;
return;//動(dòng)畫(huà)過(guò)程中不再響應(yīng)其他動(dòng)畫(huà)
}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)畫(huà)
//參數(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)切換過(guò)去
$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)畫(huà)
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)切換過(guò)去
$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開(kāi)始滾動(dòng)
$selectList.eq(focusIndex).addClass(options.selected);//先將焦點(diǎn)切換過(guò)去
if(options.deriction == 'left' || options.deriction == 'right'){
//初始化樣式,實(shí)際上不應(yīng)該插件里面來(lái)做樣式，應(yīng)該使用者自己就保證樣式?jīng)]有問(wèn)題
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)文章
jQuery時(shí)間驗(yàn)證和轉(zhuǎn)換為標(biāo)準(zhǔn)格式的時(shí)間格式
本篇文章主要介紹了jQuery時(shí)間驗(yàn)證和轉(zhuǎn)換為標(biāo)準(zhǔn)格式的時(shí)間示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-03-03
推薦11款jQuery開(kāi)發(fā)的復(fù)選框和單選框美化插件
web開(kāi)發(fā)中所有的輸入控件中復(fù)選框和單選框的樣式是最難去設(shè)計(jì)的，因?yàn)椴煌臑g覽器及其操作系統(tǒng)對(duì)于樣式的渲染展現(xiàn)是不一樣的。2011-08-08
jQuery創(chuàng)建及操作xml格式數(shù)據(jù)示例
這篇文章主要介紹了jQuery創(chuàng)建及操作xml格式數(shù)據(jù),結(jié)合實(shí)例形式分析了jQuery針對(duì)xml格式數(shù)據(jù)的創(chuàng)建、解析、添加等相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
Lazy Load是一個(gè)用 JavaScript 編寫(xiě)的jQuery插件. 它可以延遲加載長(zhǎng)頁(yè)面中的圖片. 本文對(duì)它進(jìn)行實(shí)例介紹，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2016-12-12
jQuery 中$(this).index與$.each的使用指南
這篇文章主要介紹了jQuery 中$(this).index與$.each的使用方法，以及使用環(huán)境，有需要的小伙伴自己參考下吧2014-11-11
jQuery選擇器_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
選擇器是jQuery的核心，一個(gè)選擇器寫(xiě)出來(lái)類似$('#dom-id')。下面給大家分享jQuery選擇器的相關(guān)知識(shí)，感興趣的朋友一起看看吧2017-07-07
JavaScript jQuery 中定義數(shù)組與操作及jquery數(shù)組操作
這篇文章主要介紹了JavaScript jQuery 中定義數(shù)組與操作及jquery數(shù)組操作的相關(guān)資料,需要的朋友可以參考下2015-12-12
after() 方法在被選元素后插入指定的內(nèi)容2013-07-07
這篇文章主要介紹了jQuery顯示和隱藏 常用的狀態(tài)判斷方法,需要的朋友可以參考下2015-01-01
解決Jquery鼠標(biāo)經(jīng)過(guò)不?；瑒?dòng)的問(wèn)題
在鼠標(biāo)經(jīng)過(guò)的時(shí)候不停的顯示隱藏html元素，正確的寫(xiě)法應(yīng)該是下面這樣的,需要的朋友可以參考下2014-03-03