仿淘宝首页幻灯片





<style>
.on{
color:white;
border:1px solid white;
font-size:16px;
background:#74A8ED;
height:20px;
width:20px;
text-align:center;
font-family:Arial;
float:left;
}
.off{
border: 1px solid #74A8ED;
color:#74A8ED;
font-family:Arial;
margin:2px 1px;
height:15px;
width:15px;
text-align:center;
font-size:12px;
background:white;
float:left;
}
</style>
<div id="imageContent" style="position:absolute;width:360px;height:190px;z-index:3px"">
<div style="display:block" ><img src="http://cn.yimg.com/a/ad/cherryl/674583_homepage_focuspicture3_080801_360x190.gif" width="360px" border="0"/  alt="" /></div>
<div style="display:none" ><img src="http://cn.yimg.com/a/xiaoyue/675190_1jul2008_taobaoindex_firstscreen_jiaodiantu2_no1.gif" width="360px" border="0"/  alt="" /></div>
<div style="display:none" ><img src="http://pics.taobaocdn.com/bao/album/mall/qmdql_360X190_080725_yzf.jpg" width="360px" border="0"/  alt="" /></div>
</div>
<div id="change2" style="position:absolute;z-index:6px;float:left;width:100px;left:265px;top:180px">
<ul style="list-style-type:none;"><li class="on" onmouseover="Paly(0)">1</li><li class="off" onmouseover="Paly(1)">2</li><li class="off" onmouseover="Paly(2)">3</li></li>
</div>
</div>
</body>
</html>
<script>
var count=0;3
var num2=document.getElementById("change2");
count++;
function Paly(no)
{
   count=no;
   
   disImg(no);
   
   ClickNum2(no);
   
}
function ClickNum2(no)//幻灯片数字变色
{
   var arr=num2.getElementsByTagName("li");
   for(var i=0;i<3;i++)
   {
     if(no==i)
  {
     arr[i].className="on";
  
  }
   else
   {
       arr[i].className="off";    
    
   }
   }
  
}
function disImg(no)//幻灯片图片
{
   var IDiv=document.getElementById("imageContent");
   var  IArr=IDiv.getElementsByTagName("div");
  
   for(var i=0;i<IArr.length;i++)
   {
     if(i==no)
  {
    IArr[i].style.display="block";
   }
   else
   {
     IArr[i].style.display="none";
   }
   }
}
function fun()
{
  var s=Math.floor(Math.random()*3);  
  var arr=num.getElementsByTagName("td");
  for(var i=0;i<3;i++)
   {
     if(i<2)
  {
       Paly(i+1);
  }
  else
  {
       Paly(0);
  }
   }
  
}
function fun2()
{
   
   if(count>2)
   {
      Paly(0);
   
   }
   else
   {
      Paly(count);
   }
  count++;
  
}
var count=0;
 window.setInterval("fun2()",3000);
</script>
posted on 2008-08-01 15:07 2008年的梦想阅读(885) 评论(1) 编辑收藏举报