jquery 遮罩轮播图
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ruili</title> <style> *{margin:0px;padding:0px;font-family:"微软雅黑";font-size:12px; text-decoration:none;list-style-type:none;} img{border:0px;} /*广告图开始*/ #banner{width:100%;height:500px;overflow:hidden;} #banner .bannerCon{width:750px;height:500px;background:blue;margin:0px auto;position:relative;} #banner .bannerCon .before{width:600px;height:500px;background:rgba(0,0,0,0.8);position:absolute;left:-600px;bottom:0px;z-index:333;} #banner .bannerCon .before img{position:absolute;right:20px;top:200px;cursor:pointer;} #banner .bannerCon .after{width:600px;height:500px;background:rgba(0,0,0,0.8);position:absolute;right:-600px;bottom:0px;z-index:333;} #banner .bannerCon .after img{position:absolute;left:20px;top:200px;cursor:pointer;} #banner .bannerCon .scroll{width:2000%;height:500px;position:relative;left:-750px;} #banner .bannerCon .scroll img{width:750px;height:500px;float:left;} #banner .bannerBut{width:200px;height:40px;position:absolute;left:275px;bottom:0px;} #banner .bannerBut ul li{width:7px;height:7px;border-radius:7px;background:#666;margin:5px 7px;float:left;} #banner .bannerBut ul li.hover{background:#c6171e;} </style> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <body> <!--广告图开始--> <div id="banner"> <div class="bannerCon"> <div class="before"><img src="images/left.png" width="32" heigth="63" alt="" /></div> <div class="after"><img src="images/right.png" width="32" height="63" alt="" /></div> <div class="scroll"> <img src='images/a9.jpg' width="750" height="500" alt="" /> <img src='images/a1.jpg' width="750" height="500" alt="" /> <img src='images/a2.jpg' width="750" height="500" alt="" /> <img src='images/a3.jpg' width="750" height="500" alt="" /> <img src='images/a4.jpg' width="750" height="500" alt="" /> <img src='images/a5.jpg' width="750" height="500" alt="" /> <img src='images/a6.jpg' width="750" height="500" alt="" /> <img src='images/a7.jpg' width="750" height="500" alt="" /> <img src='images/a8.jpg' width="750" height="500" alt="" /> <img src='images/a9.jpg' width="750" height="500" alt="" /> <img src='images/a1.jpg' width="750" height="500" alt="" /> </div> <div class="bannerBut"> <ul> <li style="display:none"></li><li class="hover"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li style="display:none"></li> </ul> </div> </div> </div> <!--广告图结束--> <script type="text/javascript"> //骞垮憡鍥惧姩鐢� var _index1=1; $('.bannerBut ul li').mouseover(function(){ $(this).addClass('hover').siblings('li').removeClass('hover'); var _index1=$(this).index(); $('.bannerCon .scroll').stop().animate({left:-_index1*750},500); }); //鍙宠竟鎸夐挳 $('.after img').click(function(){ _index1++; if(_index1>9){ _index1=1; $('.scroll').css('left','0px'); $('.scroll').animate({left:-_index1*750},500); $('.bannerBut ul li').eq(_index1).addClass('hover').siblings('li').removeClass('hover'); }else{ $('.bannerBut ul li').eq(_index1).addClass('hover').siblings('li').removeClass('hover'); $('.scroll').animate({left:-_index1*750},500); } }); //宸﹁竟鎸夐挳 $('.before img').click(function(){ _index1--; if(_index1<1){ _index1=9; $('.scroll').css('left','-7500px'); $('.scroll').animate({left:-_index1*750},500); $('.bannerBut ul li').eq(_index1).addClass('hover').siblings('li').removeClass('hover'); }else{ $('.bannerBut ul li').eq(_index1).addClass('hover').siblings('li').removeClass('hover'); $('.scroll').animate({left:-_index1*750},500); } }); </script> </body> </html>
演示效果http://www.17sucai.com/preview/289015/2015-07-03/%E4%BB%BF%E7%91%9E%E4%B8%BD-%E5%85%A8%E5%B1%8F%E6%97%A0%E7%BC%9D%E6%BB%9A%E5%8A%A8%E5%8A%A0%E9%80%8F%E6%98%8E%E9%81%AE%E7%BD%A9%E6%95%88%E6%9E%9C/index.html