首頁 > 開發者 > JavaScript

Jquery圖片滾動與投影片的執行個體代碼

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1、圖片滾動
複製代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
 $(document).ready(function () {
    Xhun(".a");      //----------------------只需要修改   ”.a"  (就是最大的div的class值這裡就行---------------------
});

function Xhun(_box) {
    var box_frame = _box + " div ul";
    var box_div = _box + " div";
    $(_box).find("ul").wrap("<div></div>");    //添加一個div，來控制位移量
    $(box_div).append($(box_frame).clone());   //複製一個ul並添加到div中，為了實現無縫迴圈
 $(box_div).append($(box_frame).clone());   //複製一個ul並添加到div中，為了實現無縫迴圈
    var li_size = $(_box).find("li").size();   //擷取li的個數
    var li_width = $(box_frame).children("li").width();  //擷取li的寬度
    var box_div_width = $(box_div).width(li_size * li_width * 5);  //設定div的寬度
    $(box_frame).css("float", "left");

 

    var dd = setInterval(gd, 30);
    function gd() {
        var position = $(_box).scrollLeft();     //scrollLeft()是擷取對象的水平位移量
        $(_box).scrollLeft(position + 1);
        if (position >= $(box_frame).width()) { $(_box).scrollLeft(0); }  //判斷位移是否大於ul的總長度
    }
    $(_box).mouseleave(function () {
        dd = setInterval(gd, 30);
    }).mouseenter(function () {
        clearInterval(dd);
    });
}

    </script>

    <style type="text/css">
        * { margin: 0; padding: 0; }
        ul { list-style: none; }
        li { float: left; margin-left: 10px; width: 100px; }
        img { width: 100px; height: 100px; }
        .a { width: 400px; margin: 0 auto; overflow: hidden; height: 100px; }
    </style>
</head>
<body>
    <div class="a">
        <ul>
            <li><a href="#">
                <img src="Wife1.jpg" alt="img" title="img" /></a></li>
            <li><a href="#">
                <img src="Wife2.jpg" alt="img" title="img" /></a></li>

        </ul>
    </div>
</body>
</html>

2、投影片
複製代碼 代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>投影片切換</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
$(document).ready(function () {
    slide(".frame");      //----------------------只需要修改   ”.frame"  (就是最大的div的class值這裡就行---------------------
});

 

function slide(cls) {
 $(cls).find("ul").wrap("<div></div>");
 $(cls+" div").attr("class","iframe");
    var li = $(cls).find("li").size();//統計多少張圖片
    var li_width = $(cls).find("li").width(); //擷取li的寬度
    $(cls + " div").children("ul").width(li_width * li);//設定寬度，使圖片排成一排
    var s = "<ul class='button'>";//產生li的按鈕
    for (var i = 0; i < li; i++) {
        s += "<li>" + (i + 1) + "</li>";
    }
    s += "</ul>";
    $(s).appendTo($(cls));//產生按鈕結束,並添加到最大div裡面
    var _i = 0;//當前的編號
    $(cls).find(".button li").each(function (i) {
        //產生按鈕點擊事件
        $(this).click(function () {
            _i = i;
            $(this).attr("class", "on").siblings().removeAttr("class");//設定class，沒必要再多加一個off
            $(cls + " div").animate({ scrollLeft: i * li_width }, "slow");//圖片移動
        });
    }).eq(0).click();
    function tt() {//定時器函數
        _i++;
        _i = _i % li;
        $(cls).find(".button li").eq(_i).click();//自動點擊切換圖片
    }
    var t = setInterval(tt, 3000);//定時器
    $(cls).hover(function () {
        clearInterval(t);//滑鼠經過清除定時器，離開時又觸發
    }, function () {
        t = setInterval(tt, 3000);
    })
}
    </script>
    <style type="text/css">
        * { margin: 0; padding: 0; }
        li, ul { list-style: none; margin: 0; padding: 0; }
        .frame { width: 280px; height: 280px; position: relative; margin: 0 auto; }  /*這裡需要修改最大div的寬度和高度*/
        .iframe { overflow: hidden; width: 280px; height: 280px; }                  /*這裡需要修改該div的寬度和高度*/
            .iframe ul li { float: left; width: 280px; }                            /*這裡需要修改li的寬度*/
        .button { position: absolute; bottom: 15px; right: 15px; z-index: 300; }
            .button li { float: left; cursor: pointer; width: 17px; height: 17px; line-height: 17px; text-align: center; margin-right: 5px; border-radius: 7px; color: #fff; background: #000; }
            .button .on { color: #000; background: #fff; }
    </style>
</head>
<body>

 <!-- 這裡要按照這樣的格式來寫 -->

    <div class="frame">
            <ul>
                <li><a href="#">
                    <img src="Wife1.jpg" width="280" height="280" alt="img" /></a></li>
                <li><a href="#">
                    <img src="Wife2.jpg" width="280" height="280" alt="img" /></a></li>
                <li><a href="#">
                    <img src="Wife3.jpg" width="280" height="280" alt="img" /></a></li>
                <li><a href="#">
                    <img src="Wife4.jpg" width="280" height="280" alt="img" /></a></li>
                <li><a href="#">
                    <img src="Wife5.jpg" width="280" height="280" alt="img" /></a></li>
            </ul>
    </div>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
htmlspecialchars jquery jquery exit jquery uppercase jquery urlencode sleep jquery best jquery jquery ssl
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More