最初のネックレス の実装原則は、img の src 属性を同じ画像 レンダリングに設定することです。 コードをコピー コードは次のとおりです: : 0px ;padding: 0px;} <br>.cont{width: 1100px;overflow: hidden;margin: 0 auto;} <br>.div1, .div7{width: 50px;height: 50px;border: 1px 赤一色;float : left;overflow: hidden;border-radius: 50px;} <br>.div1 img, .div7 img{幅: 50px;高さ: 50px;} <br>.div2, .div6{幅: 100px;高さ: 100px ;border: 1px 赤一色;float: left;overflow: hidden;border-radius: 100px;} <br>.div2 img, .div6 img{幅: 100px;高さ: 100px;} <br>.div3, .div5 {幅: 200px;高さ: 200px;border: 1px ソリッドレッド;float: left;overflow: hidden;border-radius: 200px;} <br>.div3 img, .div5 img{幅: 200px;高さ: 200px ;} <br>.div4{幅: 300px;高さ: 300px;ボーダー: 1 ピクセル赤一色;フロート: 左;オーバーフロー: 非表示;ボーダー半径: 300ピクセル;} <br>.div4 img{幅: 300ピクセル;高さ: 300px; } <br> <br>var link = document.getElementById("link") ); <br>linkDiv = link.getElementsByTagName("div"); <br>var i = 1; <br>setInterval() { <br>if (i == 7) { <br>i = 1 ; <br>for (var j = 0; j linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/ cnblogs_com/ kuikui/354173/t_test" i ".jpg"; <br>} <br>i ; <br>} <br>else { <br>for (var j = 0; j linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" i ".jpg"; <br>} <br> i ; <br>} <br>}、<br>} <br> <br> <br>; =" link" class="cont"> <br><div class="div1"> <br><img alt="" src="http://files.jb51.net/upload/201202 /20120213233126435 .jpg" /> <br></div> <br><div class="div2"> <br><img alt="" src="http://files.jb51. net/upload/201202/20120213233126464.jpg" /> <br></div> <br><div class="div3"> <br><img alt="" src="http:/ /files .jb51.net/upload/201202/20120213233126342.jpg" /> <br></div> <br><div class="div4"> <br><img alt="" src =" http://files.jb51.net/upload/201202/20120213233126709.jpg" /> <br></div> <br><div class="div5"> alt= "" src="http://files.jb51.net/upload/20120213233126717.jpg" /> <br></div> <br><div class="div6"> 🎜> <img alt="" src="http://files.jb51.net/upload/20120213233126170.jpg" /> <br></div> div7" > <br><img alt="" src="http://files.jb51.net/upload/201202/20120213233127469.jpg" /> <br></div> <br>< ;/ div> <br> <br><br><br><br><br><br><br>コードをコピー<br><br><br> コードは次のとおりです:</div> <div class="codebody" id="code97177"> <br><!DOCTYPE html> <br> <br> <br><title>项链</title> <br><style type="text/css"> <br>*{マージン: 0px;パディング: 0px;} <br>.cont{幅: 1100px;オーバーフロー: 非表示;マージン: 0 自動;} <br>.div1, .div7{幅: 50px;高さ: 50px ;border: 1px 赤一色;float: left;overflow: hidden;border-radius: 50px;} <br>.div1 img, .div7 img{width: 50px;height: 50px;} <br>.div2, .div6 {幅: 100px;高さ: 100px;border: 1px ソリッドレッド;float: left;overflow: hidden;border-radius: 100px;} <br>.div2 img, .div6 img{幅: 100px;高さ: 100px;} <br>.div3, .div5{幅: 200px;高さ: 200px;border: 1px 赤一色;float: left;overflow: hidden;border-radius: 200px;} <br>.div3 img, .div5 img{width : 200px;height: 200px;} <br>.div4{幅: 300px;高さ: 300px;border: 1px 赤一色;float: left;overflow: hidden;border-radius: 300px;} <br>.div4 img{幅: 300px;高さ: 300px;} <br></style> <br><script type="text/javascript"> <br>window.onload = function () { <br>var link = document.getElementById("link"); <br>linkDiv = link.getElementsByTagName("div"); <br>var i = 1; <br>setInterval(function () { <br>if (i == 7) { <br>i = 1; <br>for (var j = 0; j linkDiv[ j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" Math.abs(j - i 2) ".jpg"; >} <br>i ; <br>} <br>else { <br>for (var j = 0; j if (i linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" Math.abs(j - i 2) ".jpg"; <br>} else { <br>linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" Math.abs(7 j - i 2) ".jpg"; <br>} <br>} <br>i ; <br>} <br>}, 1000); <br>} <br>
