/**************【css】****************/ <br> *{margin:0px;padding:0px;}</p> <p> .banner{width:100%;height:300px; background:rgb(63,12,9);position:relative;}<br> .cont{width:760px;height:300px;margin:0px auto;background:#cc9999;position:relative;}<br> .cont ul li{list -style-type:none;width:760px;height:300px;position:absolute;top:0px;left:0px;display:none;}<br> .cont .prev{width:50px;height:55px;position:absolute;上:100ピクセル; left:0px;background:url("images1/button-prev-next.png");background-position:60px -140px;display:none;cursor:pointer;}<br> .cont .next{width:50px;height: 55ピクセル;位置:絶対;トップ:100ピクセル; right:0px;background:url("images1/button-prev-next.png");background-position:-60px -140px;display:none;cursor:pointer;}<br> .motbig{width:175px;height:17px ;position:absolute;bottom:10px;left:0px;right:0px;margin:0px auto;list-style-type:none;}<br> .motbig ul li{list-style-type:none;width:12px;height :12px;border:1px #ffffff Solid;float:left;margin:1px 5px;border-radius:50%;cursor:pointer;}<br> .motbig ul li.hover{background:#fff;}<br> </style> ;</p> <p> </p> <p>/*****************************/</p> <p>/************【レイアウト】*************/</p> <p><div class="banner"><br> <div class="cont"><br> <ul><br> <li style="display:block;" barbg="rgb(63,12,9)"><br> <img src="../images1/1.jpg" alt="" /><br> </li><br> <li barbg="rgb(4, 28, 98)"><br> <img src="../images1/2.jpg" alt="" /><br> </li><br> <li barbg="rgb(134, 162, 210)"><br> <img src="../images1/3.png" alt="" /><br> </li><br> <li barbg="rgb(215, 222, 228)"><br> <img src="../images1/4.jpg" alt="" /><br> </li><br> <li barbg="rgb(140, 150, 212)"><br> <img src="../images1/5.jpg" alt="" /><br> </li><br> <li barbg="rgb(12, 18, 34)"><br> <img src="../images1/6.jpg" alt="" /><br> </li><br> <li barbg="rgb(56, 162, 210)"><br> <img src="../images1/7.jpg" alt="" /><br> </li><br> </ul><br> <div class="prev"></div><br> <div class="next"></div><br> </div><br> <div class="motbig"><br> <ul><br> <li class="hover"></li><br> <li></li><br> <li></li><br> <li></li><br> <li></li><br> <li></li><br> <li></li><br> </ul><br> </div><br> </div></p> <p>/******************************************/</p> <p><script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script></p> <p>/** **********【js】*******************/</p> & lt; script type = "text/javascript" & gt; <p> var _index = 0; <br> var time <br> // 画像を切り替えるには、$ (". Motbig Ul Li" ）click（function $（this）。 ; }<br> play (_index);<br> bg = $(".cont ul li").eq(_index).attr("barbg");<br> .eq (_index). Fadein (). 兄弟。 Fadeout (); <br>} <br><br> // バナー領域に移動して左右の切り替えボタンを表示し、バナー領域を削除して左右の切り替えボタンを非表示にします <br> (". cont " ).hover(function () { ️ {"$ (". Cont .prev "). Hide (); <br> $ (". Cont .next "). Hide (); <br> time=setInterval("autoPaly()", 3000);<br> </ script><br> <br>/*****************************/<br> <br>効果: <br> <br> <br> <br> <br> <br></p>
