jqueryはQQモールを模倣し、左右のボタンでフォーカス画像の切り替えスクロールを制御しますeffect_jquery

コードをコピー コードは次のとおりです: jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 *{margin:0;padding:0;} body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;} .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix{zoom:1;} ul,li{list-style:none;} img{border:0;} .wrapper{width:800px;margin:0 auto;padding-bottom:50px;} h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;} /* focus */ #focus{width:800px;height:280px;overflow:hidden;position:relative;} #focus ul{height:380px;position:absolute;} #focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;} #focus ul li div{position:absolute;overflow:hidden;} #focus .btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;} #focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;} #focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;} #focus .btn span.on{background:#fff;} #focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(img/sprite.png) no-repeat 0 0;cursor:pointer;} #focus .pre{left:0;} #focus .next{right:0;background-position:right top;} $(function() { var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积） var len = $("#focus ul li").length; //获取焦点图个数 var index = 0; var picTimer; //以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮 var btn = " "; for(var i=0; i btn += " "; } btn += " "; $("#focus").append(btn); $("#focus .btnBg").css("opacity",0.5); // 小さなボタン マウスを追加対応するコンテンツを表示するスライド イベント $("#focus .btn spa").css("opacity",0.4).mouseover(function() { index = $("#focus . btn spa") ).index(this); showPics(index); }).eq(0).trigger("mouseover"); //前ページと次ページボタンの透明化処理 $ ("#focus .preNext").css("不透明度",0.2).hover(function() { $(this).stop(true,false).animate({"不透明度" :"0.5"} ,300); },function() { $(this).stop(true,false).animate({"不透明度":"0.2"},300); //前ページボタン $("#focus .pre").click(function() { index -= 1; if(index == -1 ) {index = len - 1;} showPics(index); }); //次のページボタン $("#focus .next").click(function() { index = 1 ; if(index == len) {index = 0;} showPics(index) }); この例は、すべての li 要素が浮動小数点です。したがって、ここで周囲の ul 要素の幅を計算する必要があります $("#focus ul").css("width",sWidth * (len)); 🎜>//マウスがフォーカス画像上をスライドすると自動再生を停止し、マウスがスライドアウトすると自動再生を開始します $("#focus").hover(function() { clearInterval(picTimer); } ,function() { picTimer = setInterval(function() { showPics(index); index ; if(index == len) {index = 0;} }, 4000); //この 4000 は自動再生の間隔を表します。単位: ミリ秒 }).trigger("mouseleave"); // 対応するコンテンツを表示します。受信したインデックス値に応じて function showPics(index) { //通常の切り替え var nowLeft = -index*sWidth; //インデックス値に基づいて ul 要素の左側の値を計算します $( "#focus ul").stop(true ,false).animate({"left":nowLeft},300); // animate() $ を通じて計算された位置にスクロールするように ul 要素を調整します。 ("#focus .btn スパン").stop (true,false).animate({"不透明度":"0.4"},300).eq(index).stop(true,false).animate({"不透明度" :"1"},300); // 現在のボタンの選択されたエフェクトに切り替えます。 ;body> jquery 画像のスクロールは、左右のボタンでフォーカス画像の切り替えとスクロールを制御します ;img src="img/01.jpg" alt="QQ モール フォーカス画像エフェクトのダウンロード" /> &lt ;/ul> -- ラッパー終了 --> /body> レンダリングは次のとおりです: