图片轮播（向上）

<%--  HTML --%>

<div class="play" id="play">                 <ol>                 </ol>                 <ul>                     <li>                         <div style="width: 100%; height: 142px; background: url('../IMG/indextop.jpg') center top no-repeat;                             margin: 0 auto;">                         </div>                     </li>                     <li>                         <div style="width: 100%; height: 142px; background: url('../IMG/indextop2.jpg') center top no-repeat;                             margin: 0 auto;">                         </div>                     </li>                     <li>                         <div style="width: 100%; height: 142px; background: url('../IMG/indextop3.jpg') center top no-repeat;                             margin: 0 auto;">                         </div>                     </li>                 </ul>             </div>

<%--  HTML --%>

<%-- CSS --%>

*{padding:0;margin:0;} li{list-style:none;} /* play */ .play{width:100%; min-width:1200px; height:142px;overflow:hidden;position:relative;} /* 圆点样式 */ .play ol{position:absolute;left:95%;margin-left:-20px;bottom:10px;z-index:99999;} .play ol li{float:left;margin-right:3px;display:inline;cursor:pointer;background-color:rgba(0,0,0,0.5);padding:5px 9px 5px;color:#fff;font-family:arial;font-size:12px;border-radius:100px; width:5px; height:10px; line-height:12px; } .play ol li.active{font-weight:bold;color:#ffffff;background-color:rgba(0,0,0,1);position:relative;} /* 图片切换样式 */ .play ul{position:absolute;top:0;left:0;z-index:1; width:100%;  min-width:1200px;} .play ul li{width:100%;height:142px;float:left; min-width:1200px;} .play ul li div{float:left;width:100%;height:142px;  min-width:1200px;} .div2_1{position: fixed;width: 30px;height: 32px;z-index: 999;background-image: url('../IMG/go-top.png');top: 0px;_position: absolute;_bottom: auto;_top: expression(eval(document.documentElement.scrollTop));left: 97%;top: 75%;}

<%-- CSS --%>

<%-- js --%>

$(function () {     var oDiv = $("#play");  //外部盒子     var count = $("#play ul li").length;  //内部图片数量     var countwidth = $("#play ul li").height();  //图片边框宽度     var oUl = $("#play ul").css("height", count * countwidth);  //ul li总宽度     var now = 0;     //点击按钮数量     for (var i = 0; i < count; i++) {         $("#play ol").append("<li>" + Number(i + 1) + "</li>");         $("#play ol li:first").addClass("active");     }     //按钮点击事件     var aBtn = $("#play ol li");     aBtn.each(function (index) {         $(this).click(function () {             clearInterval(timer);             tab(index);             timer = setInterval(autoRun, 2000);         });     });     //图片循环事件     function tab(index) {         now = index;         aBtn.removeClass("active");         aBtn.eq(index).addClass("active");         oUl.stop(true, false).animate({ "top": -countwidth * now }, 400);     }     //自动轮播定义     function autoRun() {         now++;         if (now == count) {             now = 0;         }         tab(now);         // nextImg();         //prevImg();     };     var timer = setInterval(autoRun, 5000); });

<%-- js --%>