您的位置：首页 > 运维架构 > 网站架构

javascript版购物网站图片轮转

2012-10-17 19:31 363 查看

前端时间刚学习javascript时做小项目是用到的，根据老师给的思路写的。

<!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">

#ad{

width:700px;

height:290px;

margin:0px auto;

position:relative;

}

#select{

position:absolute;

right:15px;

bottom:20px;

}

#select ul{

list-style-type:none;

}

#select ul li{

float:left;

width:30px;

height:30px;

background-color:#FFF;

color:#FF6600;

border-radius:15px;

cursor:pointer;

margin:5px;

text-align:center;

}

#select ul span{

margin:0px auto;

line-height:30px;

font-size:25px;

font-weight:bold;

}

#select ul li:hover{

background-color:#FF6600;

color:#fff;

}

</style>

<script type="text/javascript">

var now = 1;

var t;

function changeAd(){

//显示当前层的

var mydiv = document.getElementById("ad"+now);

var mycolors = document.getElementsByName("mylist");

mycolors[now-1].style.backgroundColor = "#ff6600";

mycolors[now-1].style.color = "#fff";

mydiv.style.display = "block";

//隐藏其他的

for(var index = 1; index <= 8; index++){

if(index!=now){

var mydiv = document.getElementById("ad"+index);

var mycolors = document.getElementsByName("mylist");

mycolors[index-1].style.backgroundColor = "#fff";

mycolors[index-1].style.color = "#ff6600";

mydiv.style.display = "none";

}

}

if(now==8){

now = 1;

}else{

now++;

}

t = setTimeout("changeAd()",1000);

}

function showNow(num){

now = num;

clearTimeout(t);

changeAd();

}

</script>

</head>

<body onload="changeAd()">

<div id="ad">

<div id="ad1" style="display:none">

<a href="#">

<img src=\'#\'" /1.jpg" alt="第1张" title="第1张"/>

</a>

</div>

<div id="ad2" style="display:none">

<a href="#">

<img src=\'#\'" /2.jpg" alt="第2张" title="第2张"/>

</a>

</div>

<div id="ad3" style="display:none">

<a href="#">

<img src=\'#\'" /3.jpg" alt="第3张" title="第3张"/>

</a>

</div>

<div id="ad4" style="display:none">

<a href="#">

<img src=\'#\'" /4.jpg" alt="第4张" title="第4张"/>

</a>

</div>

<div id="ad5" style="display:none">

<a href="#">

<img src=\'#\'" /5.jpg" alt="第5张" title="第5张"/>

</a>

</div>

<div id="ad6" style="display:none">

<a href="#">

<img src=\'#\'" /6.jpg" alt="第6张" title="第6张"/>

</a>

</div>

<div id="ad7" style="display:none">

<a href="#">

<img src=\'#\'" /7.jpg" alt="第7张" title="第7张"/>

</a>

</div>

<div id="ad8" style="display:none">

<a href="#">

<img src=\'#\'" /8.jpg" alt="第8张" title="第8张"/>

</a>

</div>

<div id="select">

<ul>

<li name="mylist"><span onmouseover="showNow(1)">1</span></li>

<li name="mylist"><span onmouseover="showNow(2)">2</span></li>

<li name="mylist"><span onmouseover="showNow(3)">3</span></li>

<li name="mylist"><span onmouseover="showNow(4)">4</span></li>

<li name="mylist"><span onmouseover="showNow(5)">5</span></li>

<li name="mylist"><span onmouseover="showNow(6)">6</span></li>

<li name="mylist"><span onmouseover="showNow(7)">7</span></li>

<li name="mylist"><span onmouseover="showNow(8)">8</span></li>

</ul>

</div>

</div>

</body>

</html>
本文出自 “陈辉” 博客，请务必保留此出处http://chenhuixfyy.blog.51cto.com/6136934/1030090

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航