特效描述:多窗口轮播 焦点图片 滚动切换。jquery多窗口轮播焦点图片滚动切换特效代码下载
代码结构
1. 引入JS
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
2. HTML代码
<style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, "宋体";} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-table;}/* Hides from IE-mac \*/ *html .clearfix{height:1%;} .clearfix{display:block;}/* End hide from IE-mac */ *+html .clearfix{min-height:1%;} /* slide_screen */ .slide_screen{width:990px;margin:40px auto;} .slide_screen li{float:left;overflow:hidden;position:relative;margin-right:4px;} .slide_screen li.liA{width:583px;height:342px;} .slide_screen li.liB,.slide_screen li.liC{width:199px;height:169px;} .slide_screen li.liD{width:198px;height:342px;margin-top:-173px;} .slide_screen li.liA .window{width:1166px;position:absolute;left:0;top:0px;} .slide_screen li.liB .window,.slide_screen li.liC .window{width:398px;} .slide_screen li.liD .window{width:396px;} .slide_screen li img{display:block;} .slide_screen li .piece{float:left;position:relative;overflow:hidden;zoom:1;} .slide_screen li.liA,.slide_screen li.liA .piece,.slide_screen li.liA img{width:583px;height:342px;} .slide_screen li.liB,.slide_screen li.liB .piece,.slide_screen li.liB img{width:199px;height:169px;} .slide_screen li.liB,.slide_screen li.liB .piece,.slide_screen li.liC img{width:199px;height:169px;} .slide_screen li.liD,.slide_screen li.liD .piece,.slide_screen li.liD img{width:198px;height:342px;margin-right:0;} .slide_screen li.liB{margin-bottom:4px;} .slide_screen li .bar{width:537px;padding:0 36px 0 10px;height:45px;position:absolute;bottom:0;left:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#CC000000', endColorstr='#CC000000');background:rgba(0,0,0,0.8);color:#fff;font-weight:bold;font-size:12px;} .slide_screen li.liB .bar,.slide_screen li.liC .bar{width:153px;} .slide_screen li.liD .bar{width:152px;} .slide_screen li .bar h3{padding-top:4px;font-size:14px;} .slide_screen li .bar p{font-weight:normal;} .slide_screen li .bar span{ display:block;width:28px;height:28px;overflow:hidden;position:absolute;top:8px;right:4px;background:url(images/T1Q59VXnxbXXXXXXXX-28-28.png) no-repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="images/T1Q59VXnxbXXXXXXXX-28-28.png"); } .slide_screen li .bar a{display:block;width:583px;height:45px;position:absolute;top:0;left:0;z-index:10;font-size:0;} .slide_screen li.liB .bar a,.slide_screen li.liC .bar a{width:199px;} .slide_screen li.liC .bar a{width:198px;} .libtn{width:165px;height:13px;text-align:center;margin:10px auto 0 auto;} .libtn li{float:left;margin:0 4px;display:inline;width:45px;height:11px;border:1px solid #989898;overflow:hidden;cursor:pointer;} .libtn li.selected{background:#989898} </style> <div class="slide_screen"> <ul class="clearfix"> <li class="liA"> <div class="window clearfix"> <div class="piece"> <a href="http://www.51qianduan.com/" target="_blank"><img width="583" height="342" src="images/T1mn69XeNcXXa_45YM-583-342.jpg" alt="2012公务员面试"></a> <div class="bar"> <h3>2012公务员面试</h3> <p>华图名师主讲,高分速成</p> <span></span> <a href="http://www.51qianduan.com/" target="_blank"> </a> </div> </div> <div class="piece"> <a href="http://www.51qianduan.com/" target="_blank"><img width="583" height="342" src="images/T1__j5XXxeXXa_45YM-583-342.jpg" alt="为了孩子,全场1毛钱!"></a> <div class="bar"> <h3>为了孩子,全场1毛钱!</h3> <p>原版引进25部视频,孩子最不容错过的教育精品!</p> <span></span> <a href="http://www.51qianduan.com/" target="_blank"> </a> </div> </div> <div class="piece"> <a href="http://www.51qianduan.com/" target="_blank"><img width="583" height="342" src="images/T1ga_9XgNgXXa_45YM-583-342.jpg" alt="电影大放“价”啦" /></a> <div class="bar"> <h3>电影大放“价”啦</h3> <p>全场0.11元,低过五折,疯狂开抢啦!</p> <span></span> <a href="http://www.51qianduan.com/" target="_blank"> </a> </div> </div> </div> </li> <li class="liB"> <div class="window clearfix"> <div class="piece"> <a href="http://www.51qianduan.com/" target="_blank"><img width="199" height="169" src="images/T1jIkXXkNaXXbbze.U-199-169.jpg" alt="屌丝的逆袭"></a> <div class="bar"> <h3>屌丝的逆袭</h3> <p>学变高富帅</p> <span></span> <a href="http://www.51qianduan.com/" target="_blank"> </a> </div> </div> <div class="piece"> <a href="http://www.51qianduan.com/" target="_blank"><img width="199" height="169" src="images/T1zcH2Xj0kXXbbze.U-199-169.jpg" alt="美颜瘦脸瑜伽"></a> <div class="bar"> <h3>美颜瘦脸瑜伽</h3> <p>快速打造小V脸!</p> <span></span> <a href="http://www.51qianduan.com/" target="_blank"> </a> </div> </div> <div class="piece"> <a href="http://www.51qianduan.com/" target="_blank"><img width="199" height="168" src="images/T1Udb6XfRaXXcAiK.U-199-168.jpg" alt="消失的子弹"></a> <div class="bar"> <h3>消失的子弹</h3> <p>谢霆锋、刘青云大斗法!</p> <span></span> <a href="http://www.51qianduan.com/" target="_blank"> </a> </div> </div> </div> </li> <li class="liC"> <div class="window clearfix"> <div class="piece"> <a href="http://www.51qianduan.com/" target="_blank"><img width="199" height="169" src="images/T1vLz.XXBdXXbbze.U-199-169.jpg" alt="Inventor 2012"></a> <div class="bar"> <h3>Inventor 2012</h3> <p>开发技术入门培训</p> <span></span> <a href="http://www.51qianduan.com/" target="_blank"> </a> </div> </div> <div class="piece"> <a href="http://www.51qianduan.com/" target="_blank"><img width="199" height="169" src="images/T1Rbv.XnFdXXbbze.U-199-169.jpg" alt="健身五禽戏"></a> <div class="bar"> <h3>健身五禽戏</h3> <p>强筋健骨,祛病长生</p> <span></span> <a href="http://www.51qianduan.com/" target="_blank"> </a> </div> </div> <div class="piece"> <a href="http://www.51qianduan.com/" target="_blank"><img width="199" height="169" src="images/T1zQn1Xf8jXXbbze.U-199-169.jpg" alt="紫色"></a> <div class="bar"> <h3>紫色</h3> <p>斯皮尔伯格的女权电影!</p> <span></span> <a href="http://www.51qianduan.com/" target="_blank"> </a> </div> </div> </div> </li> <li class="liD"> <div class="window clearfix"> <div class="piece"> <a href="http://www.51qianduan.com/" target="_blank"><img width="198" height="342" src="images/T1n2H1XgJmXXa2zXUS-198-342.jpg" alt="AutoCAD标准培训课堂"></a> <div class="bar"> <h3>AutoCAD标准培训课堂</h3> <p>举一反三,强化效果</p> <span></span> <a href="http://www.51qianduan.com/" target="_blank"> </a> </div> </div> <div class="piece"> <a href="http://www.51qianduan.com/" target="_blank"><img width="198" height="342" src="images/T1j0D_XnphXXa2zXUS-198-342.jpg" alt="伊索寓言"></a> <div class="bar"> <h3>伊索寓言</h3> <p>感受经典,培养品德</p> <span></span> <a href="http://www.51qianduan.com/" target="_blank"> </a> </div> </div> <div class="piece"> <a href="http://www.51qianduan.com/" target="_blank"><img width="199" height="342" src="images/T1VCY6XhlgXXb9i3oU-199-342.jpg" alt="寒战"></a> <div class="bar"> <h3>寒战</h3> <p>无间道后,港产警匪再造高峰!</p> <span></span> <a href="http://www.51qianduan.com/" target="_blank"> </a> </div> </div> </div> </li> </ul> <ul class="libtn"> <li _index="1"></li> <li _index="2"></li> <li _index="3"></li> </ul> </div> <script type="text/javascript"> (function() { var LI_WIDTH = [583, 199, 199, 198], LI_DOM = [$('.slide_screen li.liA'), $('.slide_screen li.liB'), $('.slide_screen li.liC'), $('.slide_screen li.liD')], LI_BTN = $('.slide_screen .libtn'), COUNT = 3, SPEED = 1000, DISTIM = 6000, LI_COUNT = 4; var cur = 1, next_cur = 2, runid, isclick = true; init(); initEvent(); runid = setInterval(run, DISTIM); function init() { LI_BTN.find('li').eq(cur-1).addClass('selected'); for(var i=0; i<LI_COUNT; i++) { LI_DOM[i].find('.window').css({'top':0, 'left':0, 'position':'absolute'}); LI_DOM[i].find('.window').css('width', LI_WIDTH[i]*COUNT); } } function initEvent() { LI_BTN.click(function(ev){ if(isclick && $(ev.target).attr("_index") !== undefined) { isclick = false; LI_BTN.find('li').eq(cur-1).removeClass('selected'); clearInterval(runid); runid = null; cur = parseInt($(ev.target).attr("_index")); next_cur = cur + 1; LI_BTN.find('li').eq(cur-1).addClass('selected'); for(var i=0; i<LI_COUNT; i++) { LI_DOM[i].find('.window').stop(true,true).animate({"left": -(cur-1)*LI_WIDTH[i]}, SPEED, function(){ if(runid===null)runid = setInterval(run, DISTIM); isclick = true; }); } } }); } function run() { isclick = false; LI_BTN.find('li').eq(cur-1).removeClass('selected'); if(cur != COUNT){ for(var i=0; i<LI_COUNT; i++) { LI_DOM[i].find('.window').stop(true,true).animate({"left": -(next_cur-1)*LI_WIDTH[i]}, SPEED, function() { isclick = true; }); } cur++; next_cur = cur + 1; } else { for(var i=0; i<LI_COUNT; i++) { LI_DOM[i].find('.piece:lt('+(COUNT-1)+')').clone().insertAfter(LI_DOM[i].find('.piece').last()); LI_DOM[i].find('.piece:lt('+(COUNT-1)+')').remove(); LI_DOM[i].find('.window').css('left', '0px'); LI_DOM[i].find('.window').stop(true,true).animate({"left": -LI_WIDTH[i]}, SPEED, function() { $(this).find('.piece').first().clone().insertAfter($(this).find('.piece').last()); $(this).find('.piece').first().remove(); $(this).css('left', '0px'); isclick = true; }); } cur = 1; next_cur = cur + 1; } LI_BTN.find('li').eq(cur-1).addClass('selected'); } })(); </script>