首頁 > 開發者 > JavaScript

JAVASCRIPT——圖片滑動效果

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

標籤：

點擊按鈕開始整體右移，移動至藍色地區全部顯示出來停止。

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><style type="text/css">*{    margin:0px;    padding:0px;}#wai{    width:0px;    height:600px;}</style></head><body><input id="anniu1" type="image" value="開始" src="12Nc43961Z-15Y04.png" style=" width:40px; height:40px;position:absolute;left:190px; top:300px; margin-left:0px; display:block" onclick="right()" />--按鈕1<input id="anniu2" type="image" value="開始" src="Kuaiwan.ico" style=" width:40px; height:40px;position:absolute;right:190px; top:300px; margin-right:0px; display:none" onclick="left()" />--按鈕2<div style="width:100%; height:600px; overflow:hidden">--限制圖片大小，超出部分隱藏    <div style="width:3200px; height:600px;">        <div id="d1" style="width:1349px; height:600px; background-color:#309; float:left; margin-left:-1149px;">--藍色圖片        </div>        <div id="d2" style="width:1349px; height:600px; background-color:#F03; float:left;">--紅色圖片        </div>    </div></div></body><script type="text/javascript">function right()//向右滑動{        if(parseInt(d1.style.marginLeft)<=-200)//藍色圖片左邊距小於-200，始終給紅色留下200px顯示    {        var a=parseInt(d1.style.marginLeft)+5;        d1.style.marginLeft=a+"px";        var aa=parseInt(anniu1.style.marginLeft)+5;            anniu1.style.marginLeft=aa+"px";        window.setTimeout("right()",3);//每隔3毫秒藍色圖片和按鈕1的邊距各加5像素    }        else//if(parseInt(anniu1.style.marginLeft)>=949)    {               anniu1.style.display="none";//圖片和按鈕1到頭隱藏，顯示按鈕2，按鈕1邊距歸零        anniu2.style.marginRight="0px";        anniu2.style.display="block";    }}function left()//向左滑動{    if(parseInt(d1.style.marginLeft)>-1149)//圖片和按鈕2向左每隔3毫秒增加5px滑動，到左邊距為-1149px時停止滑動    {        var b=parseInt(d1.style.marginLeft)-5;        d1.style.marginLeft=b+"px";        var bb=parseInt(anniu2.style.marginRight)+5;        anniu2.style.marginRight=bb+"px";        window.setTimeout("left()",3);        }    else//if(parseInt(d1.style.marginLeft)<=-1149)滑動到頭時，按鈕1顯示，按鈕2隱藏，按鈕2左邊距歸零    {           //alert("2");        anniu2.style.display="none";        anniu1.style.marginLeft="0px";            anniu1.style.display="block";                    }}</script></html>

 

JAVASCRIPT——圖片滑動效果

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

聯繫我們

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