三种比较常用的“图片滑动效果”js

图片滑动效果，滑动效果在页面上可以说是用的最普遍的一个效果，但是有时候为了这个效果需要引人一个js插件，感觉有些浪费，所以就动手写了个，但是没有封装成插件，放上来和大家一起分享下，好了不多说了下面直接上例子：
横向切换效果（图片太烂，见谅）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style type="text/css"> * { padding:0; margin:0; } a img { border:0 none; } ul,li { list-style:none; } #sliderbox { width:400px; height:255px; border:1px solid #ccc; overflow:hidden; position:relative; margin:20px auto; } #slider { overflow:hidden; } #slider li {/* float:left; */ vertical-align:middle; } #slider li a { display:block; } #thumb { position:absolute; right:12px; bottom:12px; } #thumb a { color:#fff; display:inline-block; width:20px; height:20px; text-align:center; line-height:20px; text-decoration:none; background:#FC9; border:1px solid #fc5718; vertical-align:bottom; } #thumb a.curr { width:24px; height:24px; line-height:24px; color:#080; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(function(){ //声明一坨需要的变量共使用 var oUl=$("#slider"), oThumb=$("#thumb"), oMenu=oThumb.find("a"), oLi=oUl.find("li"), oLiwid=oLi.eq(0).outerWidth(), oLiHeight=oLi.eq(0).outerHeight(), len=oLi.length, nextOne=0, timer=null, d=1, autochange=true, changeTime=3000, moveTime=200; //给ul赋值宽度 //oUl.width(len*oLi.eq(0).outerWidth()); //oUl.height(len*oLi.eq(0).outerHeight()); //切换方式的方法 function change(type){ if(type=="marginTop"){ oUl.height(len*oLi.eq(0).outerHeight()); oUl.animate({marginTop:"-"+(oLiHeight*nextOne)+"px"},moveTime); return d=0; }else{ oLi.css("float","left"); oUl.width(len*oLi.eq(0).outerWidth()); oUl.animate({marginLeft:"-"+(oLiwid*nextOne)+"px"},moveTime); } } //鼠标移到导航按钮上的效果 oMenu.hover(function(){ clearInterval(timer); timer=null; var index=$(this).index(); $(this).addClass("curr").siblings().removeClass("curr"); $("#slider:animated").stop(); // if(d){ oUl.animate({marginLeft:"-"+(oLiwid*index)+"px"},moveTime); }else{ oUl.animate({marginTop:"-"+(oLiHeight*index)+"px"},moveTime); } },function(){ if(timer){ clearInterval(timer); timer=null; } timer=setInterval(autoPlay,changeTime); }); //鼠标移到大图上效果 oLi.hover(function(){ clearInterval(timer); timer=null; },function(){ if(timer){ clearInterval(timer); timer=null; } timer=setInterval(autoPlay,changeTime); }); //自动切换方法 function autoPlay(){ nextOne++; if(nextOne>=len){ nextOne=0; } oMenu.eq(nextOne).addClass("curr").siblings().removeClass("curr"); change("marginLeft"); } // clearInterval(timer); timer=null; timer=setInterval(autoPlay,changeTime); }); </script> </head> <body> <div id="sliderbox"> <ul id="slider"> <li><img src="http://www.xh-css.cn/wp-content/uploads/2011/11/image1_1.jpg" alt="" title="image1_18" width="400" height="255" class="alignnone size-full wp-image-686" /></li> <li><img src="http://www.xh-css.cn/wp-content/uploads/2011/11/image1_2.jpg" alt="" title="image1_18" width="400" height="255" class="alignnone size-full wp-image-686" /></li> <li><img src="http://www.xh-css.cn/wp-content/uploads/2011/11/image1_3.jpg" alt="" title="image1_18" width="400" height="255" class="alignnone size-full wp-image-686" /></li> <li><img src="http://www.xh-css.cn/wp-content/uploads/2011/11/image1_4.jpg" alt="" title="image1_18" width="400" height="255" class="alignnone size-full wp-image-686" /></li> </ul> <div id="thumb"> <a href="javascript:;" class="curr">1</a> <a href="javascript:;">2</a> <a href="javascript:;">3</a> <a href="javascript:;">4</a> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

竖直方向运动效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style type="text/css"> * { padding:0; margin:0; } a img { border:0 none; } ul,li { list-style:none; } #sliderbox { width:400px; height:255px; border:1px solid #ccc; overflow:hidden; position:relative; margin:20px auto; } #slider { overflow:hidden; } #slider li {/* float:left; */ vertical-align:middle; } #slider li a { display:block; } #thumb { position:absolute; right:12px; bottom:12px; } #thumb a { color:#fff; display:inline-block; width:20px; height:20px; text-align:center; line-height:20px; text-decoration:none; background:#FC9; border:1px solid #fc5718; vertical-align:bottom; } #thumb a.curr { width:24px; height:24px; line-height:24px; color:#080; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(function(){ //声明一坨需要的变量共使用 var oUl=$("#slider"), oThumb=$("#thumb"), oMenu=oThumb.find("a"), oLi=oUl.find("li"), oLiwid=oLi.eq(0).outerWidth(), oLiHeight=oLi.eq(0).outerHeight(), len=oLi.length, nextOne=0, timer=null, d=1, autochange=true, changeTime=3000, moveTime=400; //给ul赋值宽度 //oUl.width(len*oLi.eq(0).outerWidth()); //oUl.height(len*oLi.eq(0).outerHeight()); //切换方式的方法 function change(type){ if(type=="marginTop"){ oUl.height(len*oLi.eq(0).outerHeight()); oUl.animate({marginTop:"-"+(oLiHeight*nextOne)+"px"},moveTime); return d=0; }else{ oLi.css("float","left"); oUl.width(len*oLi.eq(0).outerWidth()); oUl.animate({marginLeft:"-"+(oLiwid*nextOne)+"px"},moveTime); } } //鼠标移到导航按钮上的效果 oMenu.hover(function(){ clearInterval(timer); timer=null; var index=$(this).index(); $(this).addClass("curr").siblings().removeClass("curr"); $("#slider:animated").stop(); // if(d){ oUl.animate({marginLeft:"-"+(oLiwid*index)+"px"},moveTime); }else{ oUl.animate({marginTop:"-"+(oLiHeight*index)+"px"},moveTime); } },function(){ if(timer){ clearInterval(timer); timer=null; } timer=setInterval(autoPlay,changeTime); }); //鼠标移到大图上效果 oLi.hover(function(){ clearInterval(timer); timer=null; },function(){ if(timer){ clearInterval(timer); timer=null; } timer=setInterval(autoPlay,changeTime); }); //自动切换方法 function autoPlay(){ nextOne++; if(nextOne>=len){ nextOne=0; } oMenu.eq(nextOne).addClass("curr").siblings().removeClass("curr"); change("marginTop"); } // clearInterval(timer); timer=null; timer=setInterval(autoPlay,changeTime); }); </script> </head> <body> <div id="sliderbox"> <ul id="slider">  <li><img src="http://www.xh-css.cn/wp-content/uploads/2011/11/image1_1.jpg" alt="" title="image1_18" width="400" height="255" class="alignnone size-full wp-image-686" /></li> <li><img src="http://www.xh-css.cn/wp-content/uploads/2011/11/image1_2.jpg" alt="" title="image1_18" width="400" height="255" class="alignnone size-full wp-image-686" /></li> <li><img src="http://www.xh-css.cn/wp-content/uploads/2011/11/image1_3.jpg" alt="" title="image1_18" width="400" height="255" class="alignnone size-full wp-image-686" /></li> <li><img src="http://www.xh-css.cn/wp-content/uploads/2011/11/image1_4.jpg" alt="" title="image1_18" width="400" height="255" class="alignnone size-full wp-image-686" /></li> </ul> <div id="thumb"> <a href="javascript:;" class="curr">1</a> <a href="javascript:;">2</a> <a href="javascript:;">3</a> <a href="javascript:;">4</a> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

淡入淡出效果的切换

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style type="text/css"> * { padding:0; margin:0; } a img { border:0 none; } ul,li { list-style:none; } #sliderbox { width:400px; height:255px; border:1px solid #ccc; overflow:hidden; position:relative; margin:20px auto; } #slider { overflow:hidden; } #slider li {/* float:left; */ vertical-align:middle; } #slider li a { display:block; } #thumb { position:absolute; right:12px; bottom:12px; } #thumb a { color:#fff; display:inline-block; width:20px; height:20px; text-align:center; line-height:20px; text-decoration:none; background:#FC9; border:1px solid #fc5718; vertical-align:bottom; } #thumb a.curr { width:24px; height:24px; line-height:24px; color:#080; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(function(){ //声明一坨需要的变量共使用 var oUl=$("#slider"), oThumb=$("#thumb"), oMenu=oThumb.find("a"), oLi=oUl.find("li"), oLiwid=oLi.eq(0).outerWidth(), oLiHeight=oLi.eq(0).outerHeight(), len=oLi.length, nextOne=0, timer=null, changeTime=3000, moveTime=200; //给ul赋值宽度 oUl.width(oLi.eq(0).outerWidth()); oUl.height(oLi.eq(0).outerHeight()); //鼠标移到导航按钮上的效果 oMenu.hover(function(){ clearInterval(timer); timer=null; var index=$(this).index(); $(this).addClass("curr").siblings().removeClass("curr"); $("#slider:animated").stop(); oLi.eq(index).fadeIn().siblings().fadeOut(); },function(){ if(timer){ clearInterval(timer); timer=null; } timer=setInterval(autoPlay,changeTime); }); //鼠标移到大图上效果 oLi.hover(function(){ clearInterval(timer); timer=null; },function(){ if(timer){ clearInterval(timer); timer=null; } timer=setInterval(autoPlay,changeTime); }); //自动切换方法 function autoPlay(){ nextOne++; if(nextOne>=len){ nextOne=0; } oMenu.eq(nextOne).addClass("curr").siblings().removeClass("curr"); oLi.eq(nextOne).fadeIn().siblings().fadeOut(); } // clearInterval(timer); timer=null; timer=setInterval(autoPlay,changeTime); }); </script> </head> <body> <div id="sliderbox"> <ul id="slider">  <li><img src="http://www.xh-css.cn/wp-content/uploads/2011/11/image1_1.jpg" alt="" title="image1_18" width="400" height="255" class="alignnone size-full wp-image-686" /></li> <li><img src="http://www.xh-css.cn/wp-content/uploads/2011/11/image1_2.jpg" alt="" title="image1_18" width="400" height="255" class="alignnone size-full wp-image-686" /></li> <li><img src="http://www.xh-css.cn/wp-content/uploads/2011/11/image1_3.jpg" alt="" title="image1_18" width="400" height="255" class="alignnone size-full wp-image-686" /></li> <li><img src="http://www.xh-css.cn/wp-content/uploads/2011/11/image1_4.jpg" alt="" title="image1_18" width="400" height="255" class="alignnone size-full wp-image-686" /></li> </ul> <div id="thumb"> <a href="javascript:;" class="curr">1</a> <a href="javascript:;">2</a> <a href="javascript:;">3</a> <a href="javascript:;">4</a> <a href="javascript:;">5</a> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

你要是看完上面的代码会发现其实大致相同，特别是前两个就是同一个方法传了个不同的参数，后面一个稍有不同。

标签: 三种比较常用的“图片滑动效果”js

发表于 jquery

0 comments 0 people listening

Comment help
Get Livefyre

Sort: Newest | Oldest

三种比较常用的“图片滑动效果”js

站内搜索

热门文章

页面

最新评论

好站推荐

工具

常逛

标签

存档

功能