js图片展示带左右箭头效果与下载地址

效果如下图

代码

代码如下

复制代码

<!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>    售楼热线：<span id="adtel" class="tel"></span></TD>
     </TR>
     <TR></TR>
     <TR></TR>
     <TR></TR>
     <TR>
      <TD align=center><span id="adaddr"></span>    价格：<span id="adprice" class="org"></span>    开盘时间：<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

时间： 2024-12-25 00:30:41

js图片展示带左右箭头效果与下载地址

js图片展示带左右箭头效果与下载地址的相关文章

js图片轮播手动切换效果_javascript技巧

jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果_jquery

js图片展示特效（类似QQ网的JS相册展示特效）

非常个性js图片展示效果

基于jquery的图片展示--卡牌翻转效果

js图片向右一张张滚动效果实例代码_javascript技巧

js 图片新闻间隔时间滚动效果

网页特效/js超漂亮下拉菜单效果

JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】_javascript技巧