页面滚动广告

代码适合公司框架下使用~

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>