図に示されているように。
画像スイッチング効果は簡単に実装でき、適切な互換性があります。
HTMLページは次のとおりです
コードコピーは次のとおりです。
<div>
<div id = "focus">
<ul>
<li> <a href = "http://www.lanrentuku.com/"ターゲット= "_ blank"> <img src = "img/01.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/"ターゲット= "_ blank"> <img src = "img/02.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/"ターゲット= "_ blank"> <img src = "img/03.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/"ターゲット= "_ blank"> <img src = "img/04.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/"ターゲット= "_ blank"> <img src = "img/05.jpg"/> </a> </li>
</ul>
</div>
</div> <！ - ラッパーエンド - >
</body>
CSSスタイル
コードコピーは次のとおりです。
<style type = "text/css">
* {マージン：0;パディング：0;}
ボディ{font-size：12px;色：＃222;フォントファミリー：Verdana、Arial、Helvetica、Sans-Serif;背景：＃f0f0f0;}
.clearfix：after {content： "。";表示：ブロック;高さ：0;クリア：両方;可視性：非表示;}
.ClearFix {Zoom：1;}
ul、li {list-style：none;}
IMG {Border：0;}
.wrapper {width：800px;マージン：0 Auto;パディングボトム：50px;}
/ * qqshopフォーカス */
#focus {width：800px;高さ：280px;オーバーフロー：隠し;位置：相対;}
#focus ul {height：380px;位置：絶対;}
#focus ul li {float：left;幅：800px;高さ：280px;オーバーフロー：隠し;位置：相対;背景：＃000;}
#focus ul li div {position：absolute;オーバーフロー：隠し;}
#focus .btnbg {position：absolute;幅：800px;高さ：20px;左：0;下：0;背景：＃000;}
#focus .btn {position：absolute;幅：780px;高さ：10px;パディング：5px 10px;右：0;下：0;テキストアライグ：右;}
#focus .btn span {display：inline-block; _display：inline; _Zoom：1;幅：25px;高さ：10px; _font-size：0;マージン左：5px;カーソル：ポインター;背景：#fff;}
#focus .btn span.on {background：#fff;}
#focus .prenext {width：45px;高さ：100px;位置：絶対;トップ：90px;背景：url（img/sprite.png）繰り返し0 0;カーソル：ポインター;}
#focus .pre {左：0;}
#focus .next {右：0;バックグラウンドポジション：右上部;}
</style>
JSスクリプト
コードコピーは次のとおりです。
$（function（）{
var swidth = $（ "＃focus"）。width（）; //フォーカスマップの幅（表示領域）を取得します
var len = $（ "＃focus ul li"）。長さ; //フォーカス画像の数を取得します
var index = 0;
Var Pictimer;
//次のコードは、ボタンの後ろの数値ボタンと半透明のバー、および前のページと次のページの2つのボタンを追加します
var btn = "<div class = 'btnbg'> </div> <div class = 'btn'>";
for（var i = 0; i <len; i ++）{
btn += "<span> </span>";
}
btn += "</div> <div class = 'prenext pre'> </div> <div class = 'prenext next'> </div>";
$（ "＃focus"）。append（btn）;
$（ "＃focus .btnbg"）。css（ "Opacity"、0.5）;
//小さなボタンのイベントでマウススライドを追加して、対応するコンテンツを表示する
$（ "＃focus .btn span"）。css（ "ofacity"、0.4）.mouseenter（function（）{
index = $（ "＃focus .btn span"）。index（this）;
ショーピック（インデックス）;
}）。eq（0）.trigger（ "mouseenter"）;
//前のページと次のページボタン透明性処理
$（ "＃focus .prenext"）。css（ "ofacity"、0.2）.hover（function（）{
$（this）.stop（true、false）.animate（{"ofacity"： "0.5"}、300）;
}、関数（） {
$（this）.stop（true、false）.animate（{"ofacity"： "0.2"}、300）;
}）;
//前のページボタン
$（ "＃focus .pre"）。クリック（function（）{
インデックス - = 1;
if（index == -1）{index = len -1;}
ショーピック（インデックス）;
}）;
//次のページボタン
$（ "＃focus .next"）。クリック（function（）{
インデックス += 1;
if（index == len）{index = 0;}
ショーピック（インデックス）;
}）;
//この例は左右にスクロールすることです。つまり、すべてのLI要素は同じ行に左に浮かんでいるため、末梢UL要素の幅をここで計算する必要があります。
$（ "＃focus ul"）。css（ "width"、swidth *（len））;
//マウスがフォーカスイメージにスライドすると自動再生が停止し、マウスがスライドすると開始します。
$（ "＃focus"）。hover（function（）{
ClearInterval（Pictimer）;
}、関数（） {
pictimer = setInterval（function（）{
ショーピック（インデックス）;
インデックス++;
if（index == len）{index = 0;}
}、4000）; //この4000は、自動再生の間隔、ユニット：ミリ秒を表します
}）。トリガー（ "mouseleave"）;
//画像関数を表示し、受信したインデックス値に従って対応するコンテンツを表示します
function Showpics（index）{//通常のスイッチ
var nowleft = -index*swidth; //インデックス値に基づいてUL要素の左値を計算する
$（ "＃focus ul"）。 // Animate（）を介して計算された位置にUL要素をスクロールします
// $（ "＃focus .btn span"）。removeclass（ "on"）。eq（index）.addclass（ "on"）; //現在のボタンの選択された効果に切り替えます
$（ "＃focus .btn span"）。stop（true、false）。 //現在のボタンの選択された効果に切り替えます
}
}）;
左右のスイッチング写真を使用しています