シンプルな画像バナー carousel_html/css_WEB-ITnose

/**************【css】****************/

*{margin:0px;padding:0px;}

.banner{width:100%;height:300px; background:rgb(63,12,9);position:relative;} .cont{width:760px;height:300px;margin:0px auto;background:#cc9999;position:relative;} .cont ul li{list -style-type:none;width:760px;height:300px;position:absolute;top:0px;left:0px;display:none;} .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;} .cont .next{width:50px;height: 55ピクセル;位置:絶対;トップ:100ピクセル; right:0px;background:url("images1/button-prev-next.png");background-position:-60px -140px;display:none;cursor:pointer;} .motbig{width:175px;height:17px ;position:absolute;bottom:10px;left:0px;right:0px;margin:0px auto;list-style-type:none;} .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;} .motbig ul li.hover{background:#fff;} </style&gt ;

/*****************************/

/************【レイアウト】*************/

/******************************************/

/** **********【js】*******************/

& lt; script type = "text/javascript" & gt; var _index = 0; var time // 画像を切り替えるには、$ (". Motbig Ul Li" ）click（function $（this）。 ; } play (_index); bg = $(".cont ul li").eq(_index).attr("barbg"); .eq (_index). Fadein (). 兄弟。 Fadeout (); }

// バナー領域に移動して左右の切り替えボタンを表示し、バナー領域を削除して左右の切り替えボタンを非表示にします (". cont " ).hover(function () { ️ {"$ (". Cont .prev "). Hide (); $ (". Cont .next "). Hide (); time=setInterval("autoPaly()", 3000);

/*****************************/

効果: