Jquery效果首頁banner輪播（2）滾動輪播

時間 2019-12-06

原文原文鏈接

上午寫了一個很小的banner效果後，發現如今都不流行淡入淡出的輪播效果了，呵呵，下午花了點時間寫了個滾動的輪播，感受代碼不整潔，因此不怎麼專業，也是一個很小的東西，先放着這裏接受點評吧，之後來優化。javascript

注意導入Jquery文件，注意替換合適大小的圖片。css

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>滑動輪播動畫</title>
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        .clear{overflow:hidden; clear:both; width:0px; height:0px; }
        .imgbox{width:640px;margin:0 auto; text-align:center; }
        .banner_Box{width:640px; height:220px;overflow:hidden;}
        ul{padding:0px; margin:0px;width:4500px;}
        ul li{float:left; list-style:none;}
        ul li.select{display:block;}
        .imgnum span{border-radius:10px; font:normal normal bold 12px/15px 微軟雅黑; color:#FFF; margin-left:5px; padding:3px 6px 3px 6px;  background-color:#F90; cursor:pointer;}
        .imgnum span.onselect{background-color:#F00;}
        .imgnum{text-align:center; float:right; margin:-25px 30px; position:relative;}
    </style>
</head>
<body>
    <div class="imgbox">
    <div class="banner_Box">
        <ul id="banner_img">
        	<li><img src="images/banner001.jpg"/></li>
            <li><img src="images/banner002.jpg"/></li>
            <li><img src="images/banner003.jpg"/></li>
            <li><img src="images/banner004.jpg"/></li>
            <li><img src="images/banner005.jpg"/></li>
        </ul>
     </div>
    <div class="clear"></div>
    <div class="imgnum">
    	<span class="onselect">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</div>
<script type="text/javascript">
         var time = "";
         var index = 0;
         $(function () {
             showimg(index);
             //鼠標移入移出
             $(".imgnum span").hover(function () {
                clearTimeout(time);                 //清除遞歸調用
                var icon=$(this).text();
                $(".imgnum span").removeClass("onselect").eq(icon-1).addClass("onselect");
                $("#banner_img li").stop(true,true).css("margin-left","0px");//中止以前的動畫。
                
                if(icon>1){
                    $("#banner_img li").slice(0,icon-1).animate({'marginLeft':'-=640px'},600);
                }
             }, function () {
                index=$(this).text()> 4 ? 0 :parseInt($(this).text());
                time = setTimeout("showimg(" + index + ")", 3000);
             });
         });

         function showimg(num) {
             index = num;
             $(".imgnum span").removeClass("onselect").eq(index).addClass("onselect");
             if(index>0){
                $("#banner_img li").eq(index-1).animate({'marginLeft':'-=640px'},1100);
             }else if($("#banner_img li").eq(0).css("margin-left")=="-640px"){
                for(var i=3;i>=0;i--){
                     $("#banner_img li").eq(i).animate({'marginLeft':'+=640px'},600);
                }
             }
             index = index + 1 > 4 ? 0 : index + 1;
             time = setTimeout("showimg(" + index + ")", 3000);
         }
    </script>
</body>
</html>

1. jquery banner 輪播
2. jQuery實現輪播效果
3. Jquery的三輪播效果
4. 輪播效果
5. Banner輪播圖
6. banner輪播圖
7. 首頁輪播圖
8. react 實現banner輪播效果
9. jquery.flexslider-min.js實現banner輪播圖效果
10. flutter banner輪播
更多相關文章...
• SVG 模糊效果 - SVG 教程
• ionic 滾動條 - ionic 教程
• 算法總結-滑動窗口
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Jquery效果 首頁banner輪播（2） 滾動輪播

Jquery效果首頁banner輪播（2）滾動輪播