jQuery实现图片横向滚动特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/jquery.scrollgallery.css">

2. 引入JS

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollgallery.min.js" type="text/javascript"></script>

3. HTML代码

<div class="wrapper">
	<div class="gallery-container">
		<div class="gallery">
			<div class="image-item gallery-info">
				<h2>Photography Information</h2>
				<p>Click the image to navigate.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, error, magnam reprehenderit molestias deleniti quam vitae molestiae similique aspernatur saepe praesentium eveniet delectus rem ut eaque numquam in optio! Eos!</p>
				<p>Lorem ipsum dolor sit amet, consectetur hyperlink adipisicing elit. Rerum, error, magnam reprehenderit molestias deleniti quam vitae molestiae similique aspernatur saepe praesentium eveniet delectus rem ut eaque numquam in optio! Eos!</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, error, magnam reprehenderit molestias deleniti quam vitae molestiae similique aspernatur saepe praesentium eveniet delectus rem ut eaque numquam in optio! Eos!</p>
			</div>
			<img src="images/flickr_people/5271697131_90375a1da9_b_d.jpg" alt="image" class="image-item" />
			<div class="image-item">
				<img src="images/flickr_people/6992105054_eeedf0d502_o_d.jpg" alt="image" />
				<p class="caption">Fugiat, nisi, similique, odio eos quidem impedit facilis tenetur saepe aliquam eligendi aperiam.</p>
			</div>
			<div class="image-item">
				<img src="images/flickr_people/7134946449_064fceb7f4_o_d.jpg" alt="image" />
				<p class="caption">Some little information here. Support hyperlink too.</p>
			</div>
			<img src="images/flickr_people/5629018757_ce2fb64798_b_d.jpg" alt="image" class="image-item" />
			<img src="images/flickr_people/7730175960_fe582d68df_h_d.jpg" alt="image" class="image-item" />
			<img src="images/flickr_people/5679223548_883af87e9d_b_d.jpg" alt="image" class="image-item" />
			<img src="images/flickr_people/5725788340_4d2447a80a_b_d.jpg" alt="image" class="image-item" />
		</div>
		<div class="gallery">
			<div class="image-item gallery-info">
				<h2>Cards 01</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, error, magnam reprehenderit molestias deleniti quam vitae molestiae similique aspernatur saepe praesentium eveniet delectus rem ut eaque numquam in optio! Eos!</p>
				<p>Lorem ipsum dolor sit amet, consectetur hyperlink adipisicing elit. Rerum, error, magnam reprehenderit molestias deleniti quam vitae molestiae similique aspernatur saepe praesentium eveniet delectus rem ut eaque numquam in optio! Eos!</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, error, magnam reprehenderit molestias deleniti quam vitae molestiae similique aspernatur saepe praesentium eveniet delectus rem ut eaque numquam in optio! Eos!</p>
			</div>
			<img src="images/cards/card02.jpg" alt="image" class="image-item" />
			<img src="images/cards/card04.jpg" alt="image" class="image-item" />
			<img src="images/cards/card05.jpg" alt="image" class="image-item" />
			<img src="images/cards/card06.jpg" alt="image" class="image-item" />
			<img src="images/cards/card07.jpg" alt="image" class="image-item" />
			<img src="images/cards/card08.jpg" alt="image" class="image-item" />
			<img src="images/cards/card09.jpg" alt="image" class="image-item" />
			<img src="images/cards/card12.jpg" alt="image" class="image-item" />
		</div>
		<div class="gallery">
			<img src="images/cards/card13.jpg" alt="image" class="image-item" />
			<img src="images/cards/card14.jpg" alt="image" class="image-item" />
			<img src="images/cards/card15.jpg" alt="image" class="image-item" />
			<img src="images/cards/card16.jpg" alt="image" class="image-item" />
			<img src="images/cards/card17.jpg" alt="image" class="image-item" />
			<img src="images/cards/card18.jpg" alt="image" class="image-item" />
			<div class="image-item gallery-info">
				<h2>You can put it in the end too</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, error, magnam reprehenderit molestias deleniti quam vitae molestiae similique aspernatur saepe praesentium eveniet delectus rem ut eaque numquam in optio! Eos!</p>
				<p>Lorem ipsum dolor sit amet, consectetur hyperlink adipisicing elit. Rerum, error, magnam reprehenderit molestias deleniti quam vitae molestiae similique aspernatur saepe praesentium eveniet delectus rem ut eaque numquam in optio! Eos!</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, error, magnam reprehenderit molestias deleniti quam vitae molestiae similique aspernatur saepe praesentium eveniet delectus rem ut eaque numquam in optio! Eos!</p>
			</div>
		</div>
		<div class="gallery">
			<img src="images/books/book01.jpg" alt="image" class="image-item" />
			<img src="images/books/book02.jpg" alt="image" class="image-item" />
			<img src="images/books/book03.jpg" alt="image" class="image-item" />
			<img src="images/books/book04.jpg" alt="image" class="image-item" />
			<img src="images/books/book05.jpg" alt="image" class="image-item" />
			<img src="images/books/book06.jpg" alt="image" class="image-item" />
			<img src="images/books/book07.jpg" alt="image" class="image-item" />
		</div>
		<div class="gallery">
			<img src="images/books/moo01.jpg" alt="image" class="image-item" />
			<img src="images/books/moo02.jpg" alt="image" class="image-item" />
			<img src="images/books/moo03.jpg" alt="image" class="image-item" />
			<img src="images/books/moo04.jpg" alt="image" class="image-item" />
			<img src="images/books/moo05.jpg" alt="image" class="image-item" />
			<img src="images/books/moo06.jpg" alt="image" class="image-item" />
			<img src="images/books/moo07.jpg" alt="image" class="image-item" />
			<img src="images/books/moo08.jpg" alt="image" class="image-item" />
			<img src="images/books/moo09.jpg" alt="image" class="image-item" />
			<img src="images/books/moo10.jpg" alt="image" class="image-item" />
			<img src="images/books/moo11.jpg" alt="image" class="image-item" />
			<img src="images/books/moo12.jpg" alt="image" class="image-item" />
			<img src="images/books/moo13.jpg" alt="image" class="image-item" />
		</div>
	</div>
</div>
<div style="text-align:center;clear:both">
</div>