jquery 왼쪽 및 오른쪽 스크롤 포커스 이미지 배너 이미지로 마우스 통과 후 페이지 버튼을 위아래로 표시합니다.-JS 튜토리얼-php.cn

jquery는 포커스 이미지 배너 이미지를 좌우로 스크롤하며, 마우스가 지나갈 때 상단 및 하단 페이지가 표시됩니다
너비와 높이가 상대적으로 큰 페이지에 적합
jquery 왼쪽 및 오른쪽 스크롤 포커스 이미지 배너 이미지로 마우스 통과 후 페이지 버튼을 위아래로 표시합니다.
Demo

코드 복사 코드는 다음과 같습니다.

< img src="../erlianhaote.png" alt ="" />

div>

코드 복사 코드는 다음과 같습니다.

@ 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; 🎜>



코드 복사

코드는 다음과 같습니다.

$(function () { var sWidth = $("#focus").width(); var len = $("#focus ul li").length var index = 0 var; btn = "

for (var i = 0; i < len; i ) {

btn = ""; 
 } 
btn = "

";
$ ("#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)
}
});