jquery 왼쪽 및 오른쪽 스크롤 포커스 이미지 배너 이미지로 마우스 통과 후 페이지 버튼을 위아래로 표시합니다.
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의
- 2016-05-16 17:20:281076검색
jquery는 포커스 이미지 배너 이미지를 좌우로 스크롤하며, 마우스가 지나갈 때 상단 및 하단 페이지가 표시됩니다
너비와 높이가 상대적으로 큰 페이지에 적합 
Demo
코드 복사 코드는 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
@ 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; 🎜>
코드 복사
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 = "
$ ("#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)
}
});
"
for (var i = 0; i < len; i ) { btn = "";
}
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)
}
});
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.