自己写了个简单的滑动轮播特效分享给大家：
代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style> *{margin:0px;padding:0px;list-style: none;} /*先对所有的li进行绝对定位，然后通过改变left和top属性实现滑动效果*/ body{position: relative;} .left{position: relative;width:300px;height:340px;margin:100px 00px;border: 1px solid;overflow: hidden;float:left;} .up{position: relative;width:340px;height:300px ;margin:120px 100px;border: 1px solid;overflow: hidden;float:left;} ul li{width:300px;height: 300px;float:left;position: absolute;font-size: 50px;line-height: 300px;text-align: center;color:white;} .left ul li{top:20px;left:300px;} .up ul li{top:-300px;left:20px;} ol{position: absolute;z-index: 100;} ol li{margin: 5px;background: white;cursor: pointer;} .left ol{bottom:20px;left:10px;} .left ol li{width:20px;height: 5px;float:left;} .up ol{top:20px;right:20px;} .up ol li{width:5px;height: 20px;} .top{z-index: 99;} </style> <body> <!-- 左右滑动部分 --> <div class='left'> <!-- ul和ol下的li数量一致 --> <ul class='banner'> <li style='background-color:#FF99CC;left:0px;'>would</li> <li style='background-color: #CCCCFF;'>you</li> <li style='background-color: #99CC33;'>marry</li> <li style='background-color: #99CCCC;'>me</li> <li style='background-color: #CC99CC;'>?</li> </ul> <ol> <li style='background-color:black;'></li> <li></li> <li></li> <li></li> <li></li> </ol> </div> <!-- 上下滑动部分 --> <div class='up'> <!-- ul和ol下的li数量一致 --> <ul class='banner2'> <li style='background-color: #FF99CC;top:0px;'>would</li> <li style='background-color: #CCCCFF;'>you</li> <li style='background-color: #99CC33;'>marry</li> <li style='background-color: #99CCCC;'>me</li> <li style='background-color: #CC99CC;'>?</li> </ul> <ol> <li style='background-color:black;'></li> <li></li> <li></li> <li></li> <li></li> </ol> </div> </body> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(document).ready(function(){ (function(){ // 左右滑动 leftright() function lr(){ var num=0; var asd=0; var length=$('.banner li').length; var clock; clock=setInterval(auto,3000) function auto(){ asd=num; num+=1; if(num>=length){ num=0 } change(); } function change(){ $('.left ul li').eq(num).animate({left:'0px'},1000).addClass('top'); $('.left ul li').eq(asd).animate({left:'-300px'},1000,function(){ $(this).css('left','300px') }).removeClass('top'); $('.left ol li').css('background','white'); $('.left ol li').eq(num).css('background','black'); }; $('.left ol li').click(function(){ asd=num; clearInterval(clock); num=$(this).index(); if(num<asd){ $('.left ul li').eq(num).css('left','-300px'); $('.left ul li').eq(asd).animate({left:'300px'},1000).removeClass('top'); $('.left ul li').eq(num).animate({left:'0px'},1000).addClass('top'); $('.left ol li').css('background','white'); $('.left ol li').eq(num).css('background','black'); }else if(num==asd){ return false; }else{ change(); }; clock=setInterval(auto,3000); }); $('.left').mouseover(function(){ clearInterval(clock); }); $('.left').mouseout(function(){ clearInterval(clock); clock=setInterval(auto,3000); }); }; // 上下滑动 updown() function ud(){ var num2=0; var asd2=0; var length2=$('.banner2 li').length; var clock2; clock2=setInterval(auto2,3000) function auto2(){ asd2=num2; num2+=1; if(num2>=length2){ num2=0 } change2(); } function change2(){ $('.up ul li').eq(num2).animate({top:'0px'},1000).addClass('top'); $('.up ul li').eq(asd2).animate({top:'300px'},1000,function(){ $(this).css('top','-300px') }).removeClass('top'); $('.up ol li').css('background','white'); $('.up ol li').eq(num2).css('background','black'); }; $('.up ol li').click(function(){ asd2=num2; clearInterval(clock2); num2=$(this).index(); if(num2<asd2){ $('.up ul li').eq(num2).css('top','300px'); $('.up ul li').eq(asd2).animate({top:'-300px'},1000).removeClass('top'); $('.up ul li').eq(num2).animate({top:'0px'},1000).addClass('top'); $('.up ol li').css('background','white'); $('.up ol li').eq(num2).css('background','black'); // $('ul li').css('top','300px'); }else if(num2==asd2){ return false; }else{ change2() }; clock2=setInterval(auto2,3000); }); $('.up').mouseover(function(){ clearInterval(clock2); }); $('.up').mouseout(function(){ clearInterval(clock2); clock2=setInterval(auto2,3000); }); }; lr(); ud(); })(); }); </script> </html>