jqueryフォーカス画像左右スライド切替特効コード

フォーカス画像は多くの場所で使用されており、主にトップページのバナー広告を主として大きな画像を展示するのに適している.現在、この左右のスライド効果のフォーカスマップの特効は、マウスを最後のフォーカス切替ボタンに移動すると、上部にサムネイル画像が表示され、サムネイル画像の前にもスライド効果で切り替えられることを特徴としている.もちろん左右の矢印ボタンは欠かせませんが、私たちはこの2つのボタンをクリックして画像間の切り替えを行うのが好きです.下部のフォーカスボタンをクリックするのは本当に不便で、小さすぎます.
次に、その内容を見てみましょう.

<div id="loader" class="loader"></div>
		<div class="wrapper">
			<h1>Sweet Thumbnails Preview Gallery</h1>
			<div id="ps_container" class="ps_container">
				<div class="ps_image_wrapper">
					<!-- First initial image -->
					<img src="images/1.jpg" alt="" />
				</div>
				<!-- Navigation items -->
				<div class="ps_next"></div>
				<div class="ps_prev"></div>
				<!-- Dot list with thumbnail preview -->
				<ul class="ps_nav">
					<li class="selected"><a href="images/1.jpg" rel="images/thumbs/1.jpg">Image 1</a></li>
					<li><a href="images/2.jpg" rel="images/thumbs/2.jpg">Image 2</a></li>
					<li><a href="images/3.jpg" rel="images/thumbs/3.jpg">Image 3</a></li>
					<li><a href="images/4.jpg" rel="images/thumbs/4.jpg">Image 4</a></li>
					<li><a href="images/5.jpg" rel="images/thumbs/5.jpg">Image 5</a></li>
					<li><a href="images/6.jpg" rel="images/thumbs/6.jpg">Image 6</a></li>
					<li><a href="images/7.jpg" rel="images/thumbs/7.jpg">Image 7</a></li>
					<li><a href="images/8.jpg" rel="images/thumbs/8.jpg">Image 8</a></li>
					<li><a href="images/9.jpg" rel="images/thumbs/9.jpg">Image 9</a></li>
					<li><a href="images/10.jpg" rel="images/thumbs/10.jpg">Image 10</a></li>
					<li class="ps_preview">
						<div class="ps_preview_wrapper">
							<!-- Thumbnail comes here -->
						</div>
						<!-- Little triangle -->
						<span></span>
					</li>
				</ul>

			</div>
			
		</div>

主に画像リストがどのように追加されたかを見てみましょう.

<li><a href="images/3.jpg" rel="images/thumbs/3.jpg">Image 3</a></li>

relはサムネイル画像のアドレスパスである.hrefは対応する大きなピクチャアドレスパスです.
記事はjsctrlc特効網に由来します.http://www.jsctrlc.com/texiao/65.html