1.闪现方式的轮播
不论述，实现比较简单，效果也比较好
2.滑动轮播
以下面的HTML代码为例（向左滑动）
插件源码：实现向左和向上轮播，手动切换也是向左和向上切换（手动切换关键源码）
$panel.animate({ 'marginLeft': -options.width + 'px' },options.duration,function() {
for(var i = 0; i < prevAll.length; i++){
$panel.append($(prevAll[i]).css({display: 'block'})); //将当前展示节点前的所有节点都加载到最后
}
$panel.css({ marginLeft: 0 });
})
滑动轮播的实现方式主要有两种
1)切换父元素margin-left,将第一个子元素不断添加到父容器结尾
简单实现
这种方式有一个问题就是在老IE上可能存在兼容问题。
2) 累计方式设置父元素margin-left
不过在margin-left设置到最小的时候（滑动到最后一个元素），将第一个子元素的位置设置为最后一个子元素的后面，当最后一个元素滚动到第一个元素后，父元素margin-left置为0且第一个子元素的位置归位。举个简单代码例子
更复杂的滚动插件需要支持水平和垂直方向的滚动（四个方向）、可以手动切换焦点、可以翻上一个下一个。附上本人写完整的插件源码
插件源码jquery.nfdscroll.js：支持水平和垂直方向（四个方向）滚动，手动切换会随切换方向滚动
js:
$('.example').nfdscroll({
startIndex:0,width:'266',height:'216',interval:2000,selected:'circle',prevText:'',nextText:'',deriction:'left',callback: function(index,$currentNode){
console.log(index)
}
});
$('.nfdscroll-prev').text(options.prevText);
$('.nfdscroll-next').text(options.nextText);
//只有一个展示，不需要轮播
if($panelList.length @H_404_64@ 0){
nfdscrollTimer = setInterval(function(){
animateFn(toIndex);
},options.interval);
}
//跳到指定index后再计时
}else{
animateFn(toIndex);
if(options.interval > 0){
nfdscrollTimer = setInterval(function(){
animateFn();
},options.interval);
}
}
}
//停止轮播
function stopScroll(){
clearInterval(nfdscrollTimer);
}
//向左向右滚动动画
//参数toIndex: number,滚动到指定index
function leftRightAnimate(toIndex){
//默认滚动方式
if(toIndex == undefined){
if(options.deriction == 'left'){
toIndex = focusIndex + 1;
}else{
toIndex = focusIndex - 1;
}
}
if(toIndex != focusIndex){
inAnimation = true;
//当前为最后一个轮播体时的处理
var tInd = 0;
if(toIndex >= max){//最后一张<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>继续滚动时
$panel.css({
'paddingLeft': options.width + 'px'
})
$panelList.eq(0).css({
'position': 'absolute','left': options.width*toIndex + 'px'
});
tInd = 0;
}else if(toIndex < 0){//仅仅在当前图片是第一个图片，然后点击上一个图片的时候出现
//当前为最后一个轮播体时的处理
$panelList.eq(max - 1).css({
'position': 'absolute','left': -options.width + 'px'
});
tInd = max - 1;
}else{
tInd = toIndex;
}
//先将焦点切换过去
$selectList.filter('.' + options.selected).removeClass(options.selected)
.end().eq(tInd).addClass(options.selected);
$panel.animate({ 'marginLeft': -options.width*toIndex + 'px' },function() {
focusIndex = tInd;
if(toIndex >= max){//最后一张<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>继续滚动时
$panel.css({
'marginLeft': 0,'paddingLeft': 0
});
$panelList.eq(0).css({
'position': 'static','left': 'auto'
});
}else if(toIndex < 0){//仅仅在当前图片是第一个图片，然后点击上一个图片的时候出现
$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();
})
}}
//向上向下滚动动画
function topBottomAnimate(toIndex){
//默认滚动方式
if(toIndex == undefined){
if(options.deriction == 'top'){
toIndex = focusIndex + 1;
}else{
toIndex = focusIndex - 1;
}
}
if(toIndex != focusIndex){
inAnimation = true;
//当前为最后一个轮播体时的处理
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){//仅仅在当前图片是第一个图片，然后点击上一个图片的时候出现
//当前为最后一个轮播体时的处理
$panelList.eq(max - 1).css({
'position': 'absolute','top': -options.height + 'px'
});
tInd = max - 1;
}else{
tInd = toIndex;
}
//先将焦点切换过去
$selectList.filter('.' + options.selected).removeClass(options.selected)
.end().eq(tInd).addClass(options.selected);
$panel.animate({ 'marginTop': -options.height*toIndex + 'px' },function() {
focusIndex = tInd;
if(toIndex >= max){
$panel.css({
marginTop: 0,'paddingTop': 0
});
$panelList.eq(0).css({
'position': 'static','top': 'auto'
});
}else if(toIndex < 0){//仅仅在当前图片是第一个图片，然后点击上一个图片的时候出现
$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;//默认从startIndex开始滚动
$selectList.eq(focusIndex).addClass(options.selected);//先将焦点切换过去
if(options.deriction == 'left' || options.deriction == 'right'){
//初始化样式,实际上不应该插件里面来做样式，应该使用者自己就保证样式没有问题
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.widthfocusIndex + '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('<a href="https://www.jb51.cc/tag/chajian/" target="_blank" class="keywords">插件</a>只<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>left/right/top/bottom四种方向上的滚动');
return;
}
startScroll();}
bindEvent();
init();
return {
'stopScroll': stopScroll,'startScroll': startScroll
}
}
});
一个完整的例子