第一个项链
实现原理将img的src属性设为同一张图片
效果图：
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<title>项链</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.cont{width: 1100px;overflow: hidden;margin: 0 auto;}
.div1, .div7{width: 50px;height: 50px;border: 1px solid red;float: left;overflow: hidden;border-radius: 50px;}
.div1 img, .div7 img{width: 50px;height: 50px;}
.div2, .div6{width: 100px;height: 100px;border: 1px solid red;float: left;overflow: hidden;border-radius: 100px;}
.div2 img, .div6 img{width: 100px;height: 100px;}
.div3, .div5{width: 200px;height: 200px;border: 1px solid red;float: left;overflow: hidden;border-radius: 200px;}
.div3 img, .div5 img{width: 200px;height: 200px;}
.div4{width: 300px;height: 300px;border: 1px solid red;float: left;overflow: hidden;border-radius: 300px;}
.div4 img{width: 300px;height: 300px;}
</style>
<script type="text/javascript">
window.onload = function () {
var link = document.getElementById("link");
linkDiv = link.getElementsByTagName("div");
var i = 1;
setInterval(function () {
if (i == 7) {
i = 1;
for (var j = 0; j < 7; j++) {
linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" + i + ".jpg";
}
i++;
}
else {
for (var j = 0; j < 7; j++) {
linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" + i + ".jpg";
}
i++;
}
}, 1000);
}
</script>
</head>
<body>
<div>
<div>
<img alt="" src="https://www.jb51.net/upload/201202/20120213233126435.jpg" />
</div>
<div>
<img alt="" src="https://www.jb51.net/upload/201202/20120213233126464.jpg" />
</div>
<div>
<img alt="" src="https://www.jb51.net/upload/201202/20120213233126342.jpg" />
</div>
<div>
<img alt="" src="https://www.jb51.net/upload/201202/20120213233126709.jpg" />
</div>
<div>
<img alt="" src="https://www.jb51.net/upload/201202/20120213233126717.jpg" />
</div>
<div>
<img alt="" src="https://www.jb51.net/upload/201202/20120213233126170.jpg" />
</div>
<div>
<img alt="" src="https://www.jb51.net/upload/201202/20120213233127469.jpg" />
</div>
</div>
</body>
</html>
第二个项链
实现原理将img的src属性循环设置图片
效果图：
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<title>项链</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.cont{width: 1100px;overflow: hidden;margin: 0 auto;}
.div1, .div7{width: 50px;height: 50px;border: 1px solid red;float: left;overflow: hidden;border-radius: 50px;}
.div1 img, .div7 img{width: 50px;height: 50px;}
.div2, .div6{width: 100px;height: 100px;border: 1px solid red;float: left;overflow: hidden;border-radius: 100px;}
.div2 img, .div6 img{width: 100px;height: 100px;}
.div3, .div5{width: 200px;height: 200px;border: 1px solid red;float: left;overflow: hidden;border-radius: 200px;}
.div3 img, .div5 img{width: 200px;height: 200px;}
.div4{width: 300px;height: 300px;border: 1px solid red;float: left;overflow: hidden;border-radius: 300px;}
.div4 img{width: 300px;height: 300px;}
</style>
<script type="text/javascript">
window.onload = function () {
var link = document.getElementById("link");
linkDiv = link.getElementsByTagName("div");
var i = 1;
setInterval(function () {
if (i == 7) {
i = 1;
for (var j = 0; j < 7; j++) {
linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" + Math.abs(j - i + 2) + ".jpg";
}
i++;
}
else {
for (var j = 0; j < 7; j++) {
if (i <= j + 1) {
linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" + Math.abs(j - i + 2) + ".jpg";
} else {
linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" + Math.abs(7 + j - i + 2) + ".jpg";
}
}
i++;
}
}, 1000);
}
</script>
</head>
<body>
<div>
<div>
<img alt="" src="https://www.jb51.net/upload/201202/20120213233126435.jpg" />
</div>
<div>
<img alt="" src="https://www.jb51.net/upload/201202/20120213233126464.jpg" />
</div>
<div>
<img alt="" src="https://www.jb51.net/upload/201202/20120213233126342.jpg" />
</div>
<div>
<img alt="" src="https://www.jb51.net/upload/201202/20120213233126709.jpg" />
</div>
<div>
<img alt="" src="https://www.jb51.net/upload/201202/20120213233126717.jpg" />
</div>
<div>
<img alt="" src="https://www.jb51.net/upload/201202/20120213233126170.jpg" />
</div>
<div>
<img alt="" src="https://www.jb51.net/upload/201202/20120213233127469.jpg" />
</div>
</div>
</body>
</html>
第三个项链
实现原理将div按指定轨迹移动
效果图：
复制代码 代码如下: