JavaScript打造无缝切换

 

原文摘自我的前端博客,欢迎大家来访问

http://hacke2.github.io/

起因

一年前写管理学院的时候,那时候做首页有一个幻灯片,由于之前没交流好,CL写的静态页面幻灯片图片是在背景里,让我用jq写, 当时就感觉特别啃爹,图片写在了css里。。好坑爹,自己又懒得改,只能硬着头皮用jq写,一堆临时变量,如num++,各种奇葩,最后加了 个jq淡隐淡出的效果,就交差了,,代码如下:

 
          
          
          
          
function trim ( s ) {
return s . replace ( /^\s*/ , "" ). replace ( /\s*$/ , "" );
}
 
/**
* 限制字数,第一个传要限制的className,第二个传限制的字数
* @author: wxl
**/
function limitTextNum ( className , num ) {
var limitNum = num ;
$ ( "." + className + "" ). each ( function () {
var curText = $ ( this ). text ();
var curLength = $ ( this ). text (). length ;
if ( curLength > num ) {
curText = $ ( this ). text ( curText . substring ( 0 , limitNum ) + '...' );
}
});
}
 
/**
* 菜单折叠
* @author: wxl
**/
function initMenu () {
$ ( ".listArea" ). hide ();
$ ( '.listArea:first' ). show ();
$ ( '#dynamic_list .list_title' ). click (
function () {
var checkElement = $ ( this ). next ();
if (( checkElement . is ( 'div' )) && ( checkElement . is ( ':visible' ))) {
return false ;
}
if (( checkElement . is ( 'div' )) && ( ! checkElement . is ( ':visible' ))) {
$ ( this ). children ( "div" ). children ( "a" ). css ( "background" , "url(/Content/Images/Home/ico.PNG) no-repeat left center" );
$ ( '.listArea:visible' ). prev ( "div" ). children ( "div" ). children ( "a" ). css ( "background" , "url(/Content/Images/Home/ico2.PNG) no-repeat left center" );
$ ( '.listArea:visible' ). slideUp ( 'fast' );
checkElement . slideDown ( 'fast' );
return false ;
}
}
);
}
 
/**
*图片翻滚
*@author wxl
**/
function rollPictures () {
var t = 0 , count ;
var rollPics = $ ( "#pictureArea div" ). slice ( 0 , index . rollNewsPicsLength );
count = rollPics . length - 1 ;
rollPics . not ( ':first' ). hide ();
$ ( "#pageStyle .pageUp" ). click ( function () {
t -- ;
if ( t < 0 ) t = count ;
if ( t == count ) {
$ ( "#pictureArea div" ). eq ( 0 ). hide ();
$ ( "#pictureArea div" ). eq ( t ). fadeIn ( "slow" );
}
else {
$ ( "#pictureArea div" ). eq ( t + 1 ). hide ();
$ ( "#pictureArea div" ). eq ( t ). fadeIn ( "slow" );
}
 
})
$ ( "#pageStyle .pageDown" ). click ( function () {
t ++ ;
if ( t > count ) t = 0 ;
$ ( "#pictureArea div" ). eq ( t ). fadeIn ( "slow" );
if ( t == 0 ) {
$ ( "#pictureArea div" ). eq ( count ). hide ();
} else {
$ ( "#pictureArea div" ). eq ( t - 1 ). hide ();
}
 
})
//设一个定时器,每三秒翻滚图片
setInterval ( function () {
$ ( "#pageStyle .pageDown" ). click ();
}, 5000 )
}
view raw common.js hosted with ❤ by  GitHub

这几天一个前端qq群主分享了一个东西说平时可以练练手,我没有做,可是看到他说,群里面有些人小东西不屑做,稍微大点有不会做 我当时就感觉说我。。刚才写了一下,与大家分享

思路

关键一点就是克隆,而且是深克隆,obj.clone(true);这样就能克服该节点的所有子节点。之所以选择克隆,是因为直接删除太突兀了。

一般无缝切换的幻灯片是这样做的

1.点击前一个:将最开始的节点克隆到最后一个节点后面,然后整体向前移,并且删除掉第一个元素

2.点击后一个:将最后节点克隆到最前面的节点钱,然后整体向后移,并且删除掉最后一个元素

动画效果用的智能社的动画脚本

代码

代码在github上,有兴趣的看下:

JavaScript打造无缝切换

查看完整DEMO

end

你可能感兴趣的:(JavaScript打造无缝切换)