js圖片展示帶左右箭頭效果與下載地址

來源:互聯網
上載者:User

效果如下圖

代碼

 代碼如下 複製代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>圖片展示帶左右箭頭</title>
<link href="css/index.css" type=text/css rel=stylesheet>
</head>
<body>
<!-- 頭開始 -->
<!-- 滾動房源廣告開始 -->
<div id="dHomePageCarousel" style="padding-left:15px">
 <div id=dLocalHomesCarousel>
  <img id="imgSmallLeft" class="imgBorder"  style="height:50px; width:70px; left:10px; bottom:5px;" onClick="clearInterval(autoplay);moveD('l');"/>
  <img id="imgMiddleLeft" class="imgBorder"  style="height:75px; width:100px; left:110px; bottom:5px;" onClick="clearInterval(autoplay);move('l');"/>
  <img id="imgBig" class="imgBorder"  style="height:105px; width:140px; left:240px; bottom:5px;" onClick="openNewPage();"/>
  <img id="imgMiddleRight" class="imgBorder"  style="height:75px; width:100px; left:410px; bottom:5px;" onClick="clearInterval(autoplay);move('r');"/>
  <img id="imgSmallRight" class="imgBorder"  style="width:70px; height:50px; left:540px; bottom:5px;" onClick="clearInterval(autoplay);moveD('r');"/>
  <img id="imgHidden" class="imgBorder"  style="width:10px; height:10px; left:-90px; bottom:5px;"/>
 </div>
 <div id=divCarouselInfo class="divCarouselInfo">
  <div class=divCarouselInfoLt>
   <A id="btnCarouselLt" class="btnCarouselLT" style="left: 10px;" onClick="clearInterval(autoplay);move('l');"></A>
   <TABLE id=fadeSec align=center>
    <TBODY>
     <TR>
      <TD align=center><a id="adname" class="name" href="#" target="_blank"></a>&nbsp;&nbsp;&nbsp;&nbsp;售樓熱線:<span id="adtel" class="tel"></span></TD>
     </TR>
     <TR></TR>
     <TR></TR>
     <TR></TR>
     <TR>
      <TD align=center><span id="adaddr"></span>&nbsp;&nbsp;&nbsp;&nbsp;價格:<span id="adprice" class="org"></span>&nbsp;&nbsp;&nbsp;&nbsp;開盤時間:<span id="adtime" class="org"></span></TD>
     </TR>
    </TBODY>
   </TABLE>
   <A id="btnCarouselRt" class="btnCarouselRT" style="right: 10px;" onClick="clearInterval(autoplay);move('r');"></A>
  </div>
 </div>
 <script type="text/javascript">
  function AdItem(name,phone,address,Photo,price,time,url) {
   this.name = name;
   this.phone = phone;
   this.address = address;
   this.Photo = Photo;
   this.url = url;
   this.price = price;
   this.time = time;
  }
  var ad = new Array();
  ad[0] = new AdItem('遠中風華園(城寶)','4006887777-770162','靜安區新閘路1068號 ','images/1.jpg','80000元/平方','2010年5月','#'); ad[1] = new AdItem('萊茵美墅','4006887777-770183','浦東區南六公路567弄','images/2.jpg','3300000元起','2010-04','#'); ad[2] = new AdItem('臨港藍色城邦(藍色家園)','400-666-3572','浦東區臨港新城分城區泥城霞光路78弄','images/3.jpg','8000元/平方','2010年4月','#'); ad[3] = new AdItem('尼德蘭北岸(高橋新城3期)','4006887777-770765','浦東區溪蘭路169弄','images/4.jpg','6500000元起','2010-04','#'); ad[4] = new AdItem('南郊中華園(兩河流域)','4006887777-770511','南匯區航頭鎮航鶴路1699號','images/5.jpg','19000元/平方','2010-04','#'); ad[5] = new AdItem('保利湖畔陽光苑','4006887777-770455','裕民南路336弄','images/6.jpg','16000元/平方','2010-04','#'); ;
  var img = new Array();
  img[0] = document.getElementById("imgSmallLeft");
  img[1] = document.getElementById("imgMiddleLeft");
  img[2] = document.getElementById("imgBig");
  img[3] = document.getElementById("imgMiddleRight");
  img[4] = document.getElementById("imgSmallRight");
  img[5] = document.getElementById("imgHidden");
 
  var position = 0;
  for(i=0;i<img.length;i++){
   img[i].src = ad[i].Photo;
  }

  var adname = document.getElementById("adname");
  var adtel = document.getElementById("adtel");
  var adaddr = document.getElementById("adaddr");
  var adprice = document.getElementById("adprice");
  var adtime = document.getElementById("adtime");

  var cur = 2;
  adname.href = ad[2].url;
  if(navigator.userAgent.indexOf("Firefox")>0){
   adname.textContent = ad[2].name;
   adtel.textContent = ad[2].phone;
   adaddr.textContent = ad[2].address;
   adprice.textContent = ad[2].price;
   adtime.textContent = ad[2].time;
  } else {
   adname.innerText = ad[2].name;
   adtel.innerText = ad[2].phone;
   adaddr.innerText = ad[2].address;
   adprice.innerText = ad[2].price;
   adtime.innerText = ad[2].time;
  }
 </script>
</div>
<script type="text/javascript" src="js/action.js"></script>
<!-- 滾動房源廣告結束 -->
</body>
</html>

下載附件地址:http://file.111cn.net/upload/2013/10/圖片展示帶左右箭頭.zip

聯繫我們

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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