@ charset "utf-8";
img { 테두리: 0px }
.bannerbox { 너비: 320px; 높이: 150px;
#focus { 너비: 320px ; 높이: 150px; 둘 다; 위치: 상대: 왼쪽; } #focus ul; 높이: 150px; 위치: 절대; : 0px; 여백: 0px; }
#focus ul li { float: 왼쪽: 320px; 높이: 150px; 숨겨진; 여백: 0px .preNext { 너비: 250px; 높이: 150px; 커서: 포인터 }
#focus .pre { 왼쪽: 0; -repeat left center; }
#focus .next { rightright : 0; background: url(../images/sprite1.png) no-repeat rightright center; 🎜>
코드 복사
코드는 다음과 같습니다.
";
$ ("#focus").append(btn);
$("#focus .btnBg").css("불투명도", 0 );
$("#focus .btn 스팬").css( "불투명도", 0.4).mouseenter(function () {
index = $("#focus .btn 스팬").index(this );
showPics(index);
}).eq( 0).trigger("mouseenter")
$("#focus .preNext").css("불투명도", 0.0) hover(function () {
$(this).stop(true, false).animate({ "opacity": "0.5" }, 300);
}, function () {
$( this).stop(true, false).animate({ "opacity": " 0" }, 300)
$("#focus .pre").click(function () {
index -= 1;
if (index == -1 ) { index = len - 1 }
showPics(index)
}); next").click(function () {
index = 1;
if (index == len) { index = 0; }
showPics(index);
});
$("#focus ul").css("width", sWidth * ( len))
$("#focus").hover(function () {
clearInterval(picTimer);
}, function () {
picTimer = setInterval(function () {
showPics(index);
index ;
if (index == len) { index = 0; }
} , 2800);
}).trigger("mouseleave"); function showPics(index) {
var nowLeft = -index * sWidth; (true, false).animate({ "left": nowLeft }, 300) ;
$("#focus .btnspan").stop(true, false).animate({ "불투명도": "0.4" }, 300).eq(index).stop(true, false).animate ({ "불투명도": "1" }, 300)
}
});