圖片輪播 js代碼

標籤：style   blog   http   io   ar   color   os   sp   java   

 1 <script type="text/javascript"> 2     //圖片輪換 3     $(function () { 4         //------------------ 5         var sWidth = 980; //擷取焦點圖的寬度（顯示面積） 6         var sHeight = 90; //擷取焦點圖的高度 7         var timeInterval = 3000; //擷取間隔時間 8         var len = $("#focus ul li").length; //擷取焦點圖個數 9         var index = 0;10         var picTimer;11         if (len > 1) {12             //以下代碼添加數字按鈕和按鈕後的半透明條，還有上一頁、下一頁兩個按鈕13             var btn = "<div class=‘btnBg‘></div><div class=‘btn‘>";14             for (var i = 1; i <= len; i++) {15                 btn += "<span>" + i + "</span>";16             }17             btn += "</div>";18             $("#focus").append(btn);19             $("#focus .btnBg").css("opacity", 0.5);20             //為小按鈕添加滑鼠滑入事件，以顯示相應的內容21             $("#focus .btn span").css("opacity", 0.4).mouseenter(function () {22                 index = $("#focus .btn span").index(this);23                 showPics(index);24             }).eq(0).trigger("mouseenter");25             //本例為左右滾動，即所有li元素都是在同一排向左浮動，所以這裡需要計算出外圍ul元素的寬度26             $("#focus ul").css("width", sWidth * (len));27 28             //滑鼠滑上焦點圖時停止自動播放，滑出時開始自動播放29             $("#focus").hover(function () {30                 clearInterval(picTimer);31             }, function () {32                 picTimer = setInterval(function () {33                     showPics(index);34                     index++;35                     if (index == len) { index = 0; }36                 }, timeInterval); //此4000代表自動播放的間隔，單位：毫秒37             }).trigger("mouseleave");38         };39         //顯示圖片函數，根據接收的index值顯示相應的內容40         function showPics(index) { //普通切換41             var nowLeft = -index * sWidth; //根據index值計算ul元素的left值42             $("#focus ul").stop(true, false).animate({ "left": nowLeft }, 300); //通過animate()調整ul元素滾動到計算出的position43             //$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //為當前的按鈕切換到選中的效果44             $("#focus .btn span").stop(true, false).animate({ "opacity": "0.4" }, 300).eq(index).stop(true, false).animate({ "opacity": "1" }, 300); //為當前的按鈕切換到選中的效果45         }46     })47 </script>

View Code

@{
    ViewBag.Title = "擷取焦點圖";
    Layout = null;
    List<AdManage> focusList = ViewData["FocusPic"] as List<AdManage>;
    string AccountUrl = CommonFun.GetAppSettigs("AccountUrl");
}

<div id="focus">
        <ul>
            @foreach (var item in focusList)
            {
                <li><a target="_blank" href="@(item.AdLink)">
                    <img src="@(AccountUrl)/@(item.AdImage)" alt="@(item.AdImageAlt)" title="@item.AdName" width="190" height="70" /></a></li>
            }
        </ul>
    </div>

圖片輪播 js代碼