代码适合公司框架下使用~
js
//-----------------焦点图2 var flash_num2=0; function flashDiv_Auto(){ flash_num2++; $('.flashDiv').find('.list').animate({scrollTop: $('.flashDiv').find('li').height()*flash_num2}, "slow"); $('.flashDiv').find('.btnDiv').find('span').removeClass('span_now'); $('.flashDiv').find('.btnDiv').find('span').eq(flash_num2).addClass('span_now'); if(flash_num2==$('.flashDiv').find('li').length/2){ $('.flashDiv').find('.list').animate({scrollTop: $('.flashDiv').find('li').height()*flash_num2}, "slow",function(){ $('.flashDiv').find('.list').scrollTop('0px'); }); flash_num2=0; $('.flashDiv').find('.btnDiv').find('span').removeClass('span_now'); $('.flashDiv').find('.btnDiv').find('span').eq(flash_num2).addClass('span_now'); } }
function gundong() { if ($('.ShowImg .indexFlash2').find('li').length > 0) { var btn = ""; for (i = 0; i < $('.ShowImg .indexFlash2').find('li').length; i++) { ii = i + 1; btn = btn + "<span>" + ii + "</span>"; } $('.ShowImg .indexFlash2').find('.btnDiv').html(btn); $('.ShowImg .indexFlash2').find('.btnDiv').find('span').eq(0).addClass('span_now'); var top_flash_num2 = $('.indexFlash2').find('ul').html() + $('.ShowImg .indexFlash2').find('ul').html(); $('.ShowImg .indexFlash2').find('ul').html(top_flash_num2); timerID2 = setInterval("indexFlash_fun2()", 5000); } $('.ShowImg .indexFlash2').find('.btnDiv').find('span').each(function (i) { $(this).click(function () { clearInterval(timerID2); indexFlash_num2 = i; $('.ShowImg .indexFlash2').find('.btnDiv').find('span').removeClass('span_now'); $(this).addClass('span_now'); $('.ShowImg .indexFlash2').find('ul').stop(); $('.ShowImg .indexFlash2').find('ul').animate({ scrollTop: $('.ShowImg .indexFlash2').find('li').height() * indexFlash_num2 }, "slow"); timerID2 = setInterval("indexFlash_fun2()", 5000); }) }) }
html、css
<style> .indexFlash2{auto; height:auto; overflow:hidden; position:relative;} .indexFlash2 ul, .indexFlash2 li{height:340px; overflow:hidden;} .indexFlash2 .btnDiv{position:absolute; z-index:10; bottom:10px; right:10px;} .indexFlash2 .btnDiv span{display:block; float:left; margin-left:5px; cursor:pointer; text-align:center; 16px; height:16px; line-height:16px; overflow:hidden; background:#ececee; color:#ff8c00; font-family:Arial;} .indexFlash2 .btnDiv .span_now{color:#fff; background:#ff8c00;} </style> <div class="ShowImg" style=" display:none;699px; height:340px;"> <div class="fl indexFlash2"> <div class="btnDiv"></div> <ul> </ul> </div> </div>
juery
<script type="text/javascript"> $(function () { $(".Show_Img").click(function () { var id = $(this).attr("val"); $.ajax({ url: '<%=Url.Action("ShowImg") %>',//后台调用方法 data: { GameId: id }, type: 'POST', success: function (result) { if (result != null && result != "") { $(".ShowImg .indexFlash2 ul").html(result); Dialog($(".ShowImg"), "查看图片", function () { DialogHide(); }, true); gundong(); } else $("boby").showMessage("图片加载失败"); } }); }); }); </script>