jquery マウスが通過した後に上下のページボタンを表示するための左右のフォーカス画像バナー画像をスクロールします_jquery

jqueryはフォーカス画像のバナー画像を左右にスクロールし、マウスを通過させると上下のページが表示されます
幅と高さが比較的大きいページに適しています

デモ

コードをコピー コードは次のとおりです:

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

div>

コードをコピー コードは次のとおりです: @文字セット "utf-8";

img { ボーダー: 0px ; }

.bannerbox { 幅: 320px; 高さ: 0px }
#focus { 幅: 320px ; 高さ: 150px; オーバーフロー: 非表示; 位置: 320px; 位置: 左; : 0px; マージン: 0px; }
#focus : 左; 幅: 150px; 位置: 0px; .preNext { 幅: 250px; 高さ: 150px; 位置: 絶対; カーソル: ポインタ; }
#focus .pre { 左: 0; url(../images/sprite) -repeat 左中央; }
#focus .next { rightright : 0; 背景: url(../images/sprite1.png) no-repeat rightright center; }


js ファイル

コードをコピー

コードは次のとおりです。 $(function () { var sWidth = $("#focus").width(); var len = $("#focus ul li").length;

var picTimer; btn = "

";

for (var i = 0; i btn = "";
}
btn = "

";
$("#focus").append(btn);
$("#focus .btnBg").css("opacity", 0 );
$("#focus .btn スパン").css( "不透明度", 0.4).mouseenter(function () {
index = $("#focus .btn スパン").index(this );
showPics(index);
}).eq( 0).trigger("mouseenter");
$("#focus .preNext").css("opacity", 0.0) hover(function () {
$(this).stop(true, false).animate({ "不透明度": "0.5" }, 300);
}, function () {
$( this).stop(true, false).animate({ "不透明度": " 0" }, 300);
$("#focus .pre").click(function () {
インデックス -= 1;
if (インデックス == -1 ) { インデックス = len - 1; }
showPics(index);
$("#focus . 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>$("#focus ul"); (true, false).animate({ "left": nowLeft }, 300) ;
$("#focus .btn スパン").stop(true, false).animate({ "不透明度": "0.4" }, 300).eq(index).stop(true, false).animate ({ "不透明度": "1" }, 300);

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。