本帖最后由 郝强勇 于 2013-3-1 20:15 编辑
我模仿了一个山寨的类似于淘宝的图片的变换框：
但我觉得代码相当繁琐，而且不怎么跨浏览器？高人帮忙看一下！
还有就是我CSS布局一直都很烂，position的几个属性都知道是什么意思
但是在进行复杂的布局时就蒙圈了，有没有关于CSS的常用的设计模式啊，
大神们分享一下呗！:lol
代码如下：
<!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">
#continer{
position:relative;
top:0px;
left:200px;
}
#bigimg{
width:600px;
height:400px;
border:#666 1px solid;
}
#bigimg img{
width:600px;
height:400px;
}
#div1{
width:600px;
height:400px;
background-color:#F00;
display:block;
}
#div2{
width:600px;
height:400px;
background-color:#60C;
display:none;
}
#div3{
width:600px;
height:400px;
background-color:#FF0;
display:none;
}
#div4{
width:600px;
height:400px;
background-color:#0F0;
display:none;
}
#div5{
width:600px;
height:400px;
background-color:#03C;
display:none;
}
#mark{
position:absolute;
top:360px;
left:350px;
}
#mark ul li{
float:left;
}
.smallimg{
width:30px;
height:30px;
background-color:#FFF;
margin:0px 5px;
text-align:center;
}
</style>
<script type="text/javascript">
//定义公共的定时器变量
var timer;
//在页面加载完毕，没有进行任何操作时的页面状态
window.onload = function(){
var index = 0;
change(index);
var smallimgs = document.getElementById("mark").getElementsByTagName("ul")[0].getElementsByTagName("div");
smallimgs[0].style.backgroundColor = "#CCC";
}
//鼠标移入小图标的时间
function over(node){
var num = node.innerHTML;
clearInterval(timer);
var continerNode = document.getElementById("bigimg");
var divs = continerNode.getElementsByTagName("div");
var smallimgs = document.getElementById("mark").getElementsByTagName("ul")[0].getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
divs.style.display = "none";
smallimgs.style.backgroundColor = "white";
}
node.style.backgroundColor = "#CCC";
divs[num].style.display = "block";
}
//鼠标移出小图标的事件
function out(node){
var index = node.innerHTML;
change(index);
}
//图片变换的定时器
function change(index){
var continerNode = document.getElementById("bigimg");
var divs = continerNode.getElementsByTagName("div");
var smallimgs = document.getElementById("mark").getElementsByTagName("ul")[0].getElementsByTagName("div");
timer = setInterval(function(){
for(var i=0;i<divs.length;i++){
divs.style.display = "none";
smallimgs.style.backgroundColor = "white";
}
smallimgs[index].style.backgroundColor = "#CCC";
divs[index].style.display = "block";
index++;
if(index==5){
index=0;
}
},2000);
}
</script>
</head>
<body>
<div id="continer">
<div id="bigimg">
<div id="div1"><img src="file:///F|/照 片/刘子墨/新建文件夹/IMG_7492.JPG" /></div>
<div id="div2"><img src="file:///F|/照 片/刘子墨/新建文件夹/IMG_7484.JPG" /></div>
<div id="div3"><img src="file:///F|/照 片/刘子墨/新建文件夹/IMG_7502.JPG" /></div>
<div id="div4"><img src="file:///F|/照 片/刘子墨/刘子墨亚米奇.jpg" /></div>
<div id="div5"><img src="file:///F|/照 片/刘子墨/新建文件夹/IMG_7470.JPG" /></div>
</div>
<div id="mark">
<ul>
<li><div class="smallimg">0</div></li>
<li><div class="smallimg">1</div></li>
<li><div class="smallimg">2</div></li>
<li><div class="smallimg">3</div></li>
<li><div class="smallimg">4</div></li>
</ul>
</div>
</div>
</body>
</html>
|
|
收藏
淘帖
踩
