分享一款正益无线首页jQuery焦点图,带索引按钮,自动轮播切换特效焦点图代码。
实现的代码。
html代码:
<div id="slideBox" class="slideBox"> <div class="hd"> <ul><li></li><li></li><li></li></ul> </div> <div class="bd"> <ul> <li style="background: url(images/banner2_1.jpg) 50% 0px no-repeat;"> <div id="a3"></div> <div id="a4"></div> <div id="a5"></div> </li> <li style="background: url(images/banner4.png) 50% 0px no-repeat;"> <div id="a12"></div> <div id="a11"></div> </li> <li class="banner1"> <a href="http://www.w2bc.com" target="_blank" class="content1"> <div id="a20"></div> <div class="b2_word"> <var id="a21">为</var><span id="a23"></span><var id="a22">而生</var> </div> <div id="a24">AppCan引领企业进入移动管理新时代</div> </a> </li> </ul> </div> </div> <script src="js/jquery.SuperSlide.2.1.1.js"></script> <script type="text/javascript"> // 轮播 $(".slideBox").slide({mainCell:".bd ul",effect:"leftLoop",autoPlay:true, startFun:function(i,c){ del(); switch(i){ case 0: $("#a3").addClass(‘animation3‘); $("#a4").addClass(‘animation4‘); $("#a5").addClass(‘animation5‘); break; case 1: $("#a11").addClass(‘animation8‘); $("#a12").addClass(‘animation9‘); break; // case 2: // $("#a8").addClass(‘animation6‘); // $("#a9").addClass(‘animation7‘); // $("#a10").addClass(‘animation7‘); // break; case 2: $(".content1 #a20").addClass(‘animation20‘); $(".b2_word #a21").addClass(‘animation21‘); $(".b2_word #a22").addClass(‘animation21‘); $(".b2_word #a23").addClass(‘animation20‘); $(".content1 #a24").addClass(‘animation22‘); break; default:break; } } }); </script>
via:http://www.w2bc.com/Article/45590
时间: 2024-10-03 13:46:23