html5幻灯片效果制作散开的图片相册幻灯片代码



53 211 71



特效描述:html5幻灯片 散开的图片 相册幻灯片,html5幻灯片效果制作

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

2. 引入JS

<script type="text/javascript" src="js/modernizr.min.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/photostack.js"></script>

3. HTML代码

<div class="container">
	<header class="codrops-header">
		<svg xmlns="http://www.w3.org/2000/svg" width="1000px" height="300px" class="polaroid" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1000 300">
			<g transform="rotate(-9.424738883972168 131.13208007812517,131.28302001953134) "><rect id="svg_6" height="194.264154" width="194.264154" y="34.15094" x="34"/><rect id="svg_7" height="116.226417" width="152.754719" y="56.566035" x="54.754717"/></g><rect id="svg_2" height="0" width="1" y="108" x="123" stroke-width="10" stroke="#000000" fill="#ffffff"/><g id="svg_10" transform="rotate(8.810273170471191 211.13208007812494,164.28302001953114) "><rect id="svg_11" height="194.264154" width="194.264154" y="67.15094" x="114"/><rect id="svg_12" height="116.226417" width="152.754719" y="89.566035" x="134.754717"/></g><g id="svg_13" transform="rotate(-14.838730812072754 350.132080078125,168.28302001953125) "><rect id="svg_14" height="194.264154" width="194.264154" y="71.15094" x="253"/><rect id="svg_15" height="116.226417" width="152.754719" y="93.566035" x="273.754717"/></g><g id="svg_16" transform="rotate(-1.4553210735321045 476.1320800781219,121.28302001953003) "><rect id="svg_17" height="194.264154" width="194.264154" y="24.15094" x="379"/><rect id="svg_18" height="116.226417" width="152.754719" y="46.566035" x="399.754717"/></g><g id="svg_19" transform="rotate(-4.776742458343506 556.1320800781244,176.28302001953122) "><rect id="svg_20" height="194.264154" width="194.264154" y="79.15094" x="459"/><rect id="svg_21" height="116.226417" width="152.754719" y="101.566035" x="479.754717"/></g><g id="svg_22" transform="rotate(17.17530059814453 690.1320800781251,163.2830200195312) "><rect id="svg_23" height="194.264154" width="194.264154" y="66.15094" x="593"/><rect id="svg_24" height="116.226417" width="152.754719" y="88.566035" x="613.754717"/></g><g id="svg_25" transform="rotate(-9.506031036376953 771.132080078125,177.28302001953094) "><rect id="svg_26" height="194.264154" width="194.264154" y="80.15094" x="674"/><rect id="svg_27" height="116.226417" width="152.754719" y="102.566035" x="694.754717"/></g><g id="svg_28" transform="rotate(19.351133346557617 862.1320800781251,137.28302001953148) "><rect id="svg_29" height="194.264154" width="194.264154" y="40.15094" x="765"/><rect id="svg_30" height="116.226417" width="152.754719" y="62.566035" x="785.754717"/></g></g>
		</svg>
		<h1>Scattered Polaroids Gallery <span>A flat-style take on a Polaroid gallery</span></h1>
	</header>
	<div class="description">
		<p>This first example shows a simple use case without showing a description on the back side of the Polaroid. Clicking another navigation dot will reshuffle the Polaroids and bring the respective current item to the center.</p>
		<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="100px" class="polaroid" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1000 300">
			<g transform="rotate(-9.424738883972168 131.13208007812517,131.28302001953134) "><rect id="svg_6" height="194.264154" width="194.264154" y="34.15094" x="34"/><rect id="svg_7" height="116.226417" width="152.754719" y="56.566035" x="54.754717"/></g><rect id="svg_2" height="0" width="1" y="108" x="123" stroke-width="10" stroke="#000000" fill="#ffffff"/><g id="svg_10" transform="rotate(8.810273170471191 211.13208007812494,164.28302001953114) "><rect id="svg_11" height="194.264154" width="194.264154" y="67.15094" x="114"/><rect id="svg_12" height="116.226417" width="152.754719" y="89.566035" x="134.754717"/></g><g id="svg_13" transform="rotate(-14.838730812072754 350.132080078125,168.28302001953125) "><rect id="svg_14" height="194.264154" width="194.264154" y="71.15094" x="253"/><rect id="svg_15" height="116.226417" width="152.754719" y="93.566035" x="273.754717"/></g><g id="svg_16" transform="rotate(-1.4553210735321045 476.1320800781219,121.28302001953003) "><rect id="svg_17" height="194.264154" width="194.264154" y="24.15094" x="379"/><rect id="svg_18" height="116.226417" width="152.754719" y="46.566035" x="399.754717"/></g><g id="svg_19" transform="rotate(-4.776742458343506 556.1320800781244,176.28302001953122) "><rect id="svg_20" height="194.264154" width="194.264154" y="79.15094" x="459"/><rect id="svg_21" height="116.226417" width="152.754719" y="101.566035" x="479.754717"/></g><g id="svg_22" transform="rotate(17.17530059814453 690.1320800781251,163.2830200195312) "><rect id="svg_23" height="194.264154" width="194.264154" y="66.15094" x="593"/><rect id="svg_24" height="116.226417" width="152.754719" y="88.566035" x="613.754717"/></g><g id="svg_25" transform="rotate(-9.506031036376953 771.132080078125,177.28302001953094) "><rect id="svg_26" height="194.264154" width="194.264154" y="80.15094" x="674"/><rect id="svg_27" height="116.226417" width="152.754719" y="102.566035" x="694.754717"/></g><g id="svg_28" transform="rotate(19.351133346557617 862.1320800781251,137.28302001953148) "><rect id="svg_29" height="194.264154" width="194.264154" y="40.15094" x="765"/><rect id="svg_30" height="116.226417" width="152.754719" y="62.566035" x="785.754717"/></g></g>
		</svg>
		<p><strong>Click on the gallery to start it.</strong></p>
	</div>
	<section id="photostack-1" class="photostack photostack-start">
		<div>
			<figure>
				<a href="http://www.51qianduan.com/" class="photostack-img"><img src="img/1.jpg" alt="img01"/></a>
				<figcaption>
					<h2 class="photostack-title">Serenity Beach</h2>
				</figcaption>
			</figure>
			<figure>
				<a href="http://www.51qianduan.com/" class="photostack-img"><img src="img/2.jpg" alt="img02"/></a>
				<figcaption>
					<h2 class="photostack-title">Happy Days</h2>
				</figcaption>
			</figure>
			<figure>
				<a href="http://www.51qianduan.com/" class="photostack-img"><img src="img/3.jpg" alt="img03"/></a>
				<figcaption>
					<h2 class="photostack-title">Beautywood</h2>
				</figcaption>
			</figure>
			<figure>
				<a href="http://www.51qianduan.com/" class="photostack-img"><img src="img/4.jpg" alt="img04"/></a>
				<figcaption>
					<h2 class="photostack-title">Heaven of time</h2>
				</figcaption>
			</figure>
			<figure>
				<a href="http://www.51qianduan.com/" class="photostack-img"><img src="img/5.jpg" alt="img05"/></a>
				<figcaption>
					<h2 class="photostack-title">Speed Racer</h2>
				</figcaption>
			</figure>
			<figure>
				<a href="http://www.51qianduan.com/" class="photostack-img"><img src="img/6.jpg" alt="img06"/></a>
				<figcaption>
					<h2 class="photostack-title">Forever this</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/7.jpg" alt="img07"/></a>
				<figcaption>
					<h2 class="photostack-title">Lovely Green</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/8.jpg" alt="img08"/></a>
				<figcaption>
					<h2 class="photostack-title">Wonderful</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/9.jpg" alt="img09"/></a>
				<figcaption>
					<h2 class="photostack-title">Love Addict</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/10.jpg" alt="img10"/></a>
				<figcaption>
					<h2 class="photostack-title">Friendship</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/11.jpg" alt="img11"/></a>
				<figcaption>
					<h2 class="photostack-title">White Nights</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/12.jpg" alt="img12"/></a>
				<figcaption>
					<h2 class="photostack-title">Serendipity</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/13.jpg" alt="img13"/></a>
				<figcaption>
					<h2 class="photostack-title">Pure Soul</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/14.jpg" alt="img14"/></a>
				<figcaption>
					<h2 class="photostack-title">Winds of Peace</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/15.jpg" alt="img15"/></a>
				<figcaption>
					<h2 class="photostack-title">Shades of blue</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/16.jpg" alt="img16"/></a>
				<figcaption>
					<h2 class="photostack-title">Lightness</h2>
				</figcaption>
			</figure>
		</div>
	</section>
	<section class="description">
		<p>The next examples show how to add a description to the back of the photo which can be viewed by flipping the Polaroid. To flip the Polaroid, <strong>the current navigation dot has to be clicked a second time</strong>. This functionality is indicated by a rotated arrow on the dot icon.</p>
		<svg xmlns="http://www.w3.org/2000/svg" width="110px" height="110px" class="polaroid" preserveAspectRatio="xMidYMid meet" viewBox="0 0 300 300">
			<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
			<rect id="svg_2" height="0" width="1" y="108" x="123"/>
			<rect id="svg_6" height="194.264154" width="194.264154" y="22.15094" x="18"/>
			<rect id="svg_7" height="116.226417" width="152.754719" y="44.566035" x="38.754717"/>
			<rect id="svg_1" height="194.264154" width="194.264154" y="83.584903" x="87.73585"/>
			<rect id="svg_3" height="116.226417" width="152.754719" y="105.999998" x="108.490567"/>
		</svg>
		<p>Another configurable option for each item is the <strong>shuffle iteration count</strong> which defines how many times all items should be "spread", or shuffled, before the current photo moves to the middle. </p>
	</section>
	<section id="photostack-2" class="photostack photostack-start">
		<div>
			<figure>
				<a href="http://www.51qianduan.com/" class="photostack-img"><img src="img/4.jpg" alt="img04"/></a>
				<figcaption>
					<h2 class="photostack-title">Heaven of time</h2>
					<div class="photostack-back">
						<p>What might be right for you may not be right for some. And we know Flipper lives in a world full of wonder flying there-under under the sea.</p>
					</div>
				</figcaption>
			</figure>
			<figure>
				<a href="http://www.51qianduan.com/" class="photostack-img"><img src="img/5.jpg" alt="img05"/></a>
				<figcaption>
					<h2 class="photostack-title">Speed Racer</h2>
				</figcaption>
			</figure>
			<figure data-shuffle-iteration="2">
				<a href="http://www.51qianduan.com/" class="photostack-img"><img src="img/1.jpg" alt="img01"/></a>
				<figcaption>
					<h2 class="photostack-title">Serenity Beach</h2>
					<div class="photostack-back">
						<p>I have never been to a place so serene in my entire life before. Swimming in clear waters opened my mind to nature and reminded me of my and <span>eveybody</span> everybody else's mortality.</p>
					</div>
				</figcaption>
			</figure>
			<figure>
				<a href="http://www.51qianduan.com/" class="photostack-img"><img src="img/2.jpg" alt="img02"/></a>
				<figcaption>
					<h2 class="photostack-title">Happy Days</h2>
					<div class="photostack-back">
						<p>These Happy Days are yours and mine Happy Days. It's a beautiful day in this neighborhood a beautiful day for a neighbor. Would you be mine?</p>
					</div>
				</figcaption>
			</figure>
			<figure data-shuffle-iteration="3">
				<a href="http://www.51qianduan.com/" class="photostack-img"><img src="img/3.jpg" alt="img03"/></a>
				<figcaption>
					<h2 class="photostack-title">Beautywood</h2>
				</figcaption>
			</figure>
			<figure data-shuffle-iteration="2">
				<a href="http://www.51qianduan.com/" class="photostack-img"><img src="img/6.jpg" alt="img06"/></a>
				<figcaption>
					<h2 class="photostack-title">Forever this</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/7.jpg" alt="img07"/></a>
				<figcaption>
					<h2 class="photostack-title">Lovely Green</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/8.jpg" alt="img08"/></a>
				<figcaption>
					<h2 class="photostack-title">Wonderful</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/9.jpg" alt="img09"/></a>
				<figcaption>
					<h2 class="photostack-title">Love Addict</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/10.jpg" alt="img10"/></a>
				<figcaption>
					<h2 class="photostack-title">Friendship</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/11.jpg" alt="img11"/></a>
				<figcaption>
					<h2 class="photostack-title">White Nights</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/12.jpg" alt="img12"/></a>
				<figcaption>
					<h2 class="photostack-title">Serendipity</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/13.jpg" alt="img13"/></a>
				<figcaption>
					<h2 class="photostack-title">Pure Soul</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/14.jpg" alt="img14"/></a>
				<figcaption>
					<h2 class="photostack-title">Winds of Peace</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/15.jpg" alt="img15"/></a>
				<figcaption>
					<h2 class="photostack-title">Shades of blue</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/16.jpg" alt="img16"/></a>
				<figcaption>
					<h2 class="photostack-title">Lightness</h2>
				</figcaption>
			</figure>
		</div>
	</section>
	<section class="description">
		<p>The last example <strong>does not require a click</strong> on the gallery to initiate the first shuffling.</p>
		<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="100px" class="polaroid" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1000 300">
			<g transform="rotate(-9.424738883972168 131.13208007812517,131.28302001953134) "><rect id="svg_6" height="194.264154" width="194.264154" y="34.15094" x="34"/><rect id="svg_7" height="116.226417" width="152.754719" y="56.566035" x="54.754717"/></g><rect id="svg_2" height="0" width="1" y="108" x="123" stroke-width="10" stroke="#000000" fill="#ffffff"/><g id="svg_10" transform="rotate(8.810273170471191 211.13208007812494,164.28302001953114) "><rect id="svg_11" height="194.264154" width="194.264154" y="67.15094" x="114"/><rect id="svg_12" height="116.226417" width="152.754719" y="89.566035" x="134.754717"/></g><g id="svg_13" transform="rotate(-14.838730812072754 350.132080078125,168.28302001953125) "><rect id="svg_14" height="194.264154" width="194.264154" y="71.15094" x="253"/><rect id="svg_15" height="116.226417" width="152.754719" y="93.566035" x="273.754717"/></g><g id="svg_16" transform="rotate(-1.4553210735321045 476.1320800781219,121.28302001953003) "><rect id="svg_17" height="194.264154" width="194.264154" y="24.15094" x="379"/><rect id="svg_18" height="116.226417" width="152.754719" y="46.566035" x="399.754717"/></g><g id="svg_19" transform="rotate(-4.776742458343506 556.1320800781244,176.28302001953122) "><rect id="svg_20" height="194.264154" width="194.264154" y="79.15094" x="459"/><rect id="svg_21" height="116.226417" width="152.754719" y="101.566035" x="479.754717"/></g><g id="svg_22" transform="rotate(17.17530059814453 690.1320800781251,163.2830200195312) "><rect id="svg_23" height="194.264154" width="194.264154" y="66.15094" x="593"/><rect id="svg_24" height="116.226417" width="152.754719" y="88.566035" x="613.754717"/></g><g id="svg_25" transform="rotate(-9.506031036376953 771.132080078125,177.28302001953094) "><rect id="svg_26" height="194.264154" width="194.264154" y="80.15094" x="674"/><rect id="svg_27" height="116.226417" width="152.754719" y="102.566035" x="694.754717"/></g><g id="svg_28" transform="rotate(19.351133346557617 862.1320800781251,137.28302001953148) "><rect id="svg_29" height="194.264154" width="194.264154" y="40.15094" x="765"/><rect id="svg_30" height="116.226417" width="152.754719" y="62.566035" x="785.754717"/></g></g>
		</svg>
		<p>The <strong>dummy items</strong> show how to fill the container with Polaroids without actually making them part of the viewable gallery. This can be useful when wanting to show just a specific subset of a collection.</p>
		<p>All Polaroids in this use case have a description on the back side, which can be viewed by clicking the navigation dot again.</p>
	</section>
	<section id="photostack-3" class="photostack">
		<div>
			<figure>
				<a href="http://www.51qianduan.com/" class="photostack-img"><img src="img/5.jpg" alt="img05"/></a>
				<figcaption>
					<h2 class="photostack-title">Speed Racer</h2>
					<div class="photostack-back">
						<p>Here he comes Here comes Speed Racer. He's a demon on wheels. Wouldn't you like to get away? Sometimes you want to go where everybody knows <span>the</span> your name. And they're always glad you came! </p>
					</div>
				</figcaption>
			</figure>
			<figure>
				<a href="http://www.51qianduan.com/" class="photostack-img"><img src="img/2.jpg" alt="img02"/></a>
				<figcaption>
					<h2 class="photostack-title">Happy Days</h2>
					<div class="photostack-back">
						<p>These Happy Days are yours and mine Happy Days. It's a beautiful day in this neighborhood a beautiful day for a neighbor. Would you be mine?</p>
					</div>
				</figcaption>
			</figure>
			<figure>
				<a href="http://www.51qianduan.com/" class="photostack-img"><img src="img/3.jpg" alt="img03"/></a>
				<figcaption>
					<h2 class="photostack-title">Beautywood</h2>
					<div class="photostack-back">
						<p>It's a neighborly day in this beautywood a neighborly day for a beauty. Would you be mine? Could you be mine. Now the world don't move to the beat of just one drum.</p>
					</div>
				</figcaption>
			</figure>
			<figure>
				<a href="http://www.51qianduan.com/" class="photostack-img"><img src="img/1.jpg" alt="img01"/></a>
				<figcaption>
					<h2 class="photostack-title">Serenity Beach</h2>
					<div class="photostack-back">
						<p>I have never been to a place so serene in my entire life before. Swimming in clear waters opened my mind to nature and reminded me of my and <span>eveybody</span> everybody else's mortality.</p>
					</div>
				</figcaption>
			</figure>
			<figure>
				<a href="http://www.51qianduan.com/" class="photostack-img"><img src="img/4.jpg" alt="img04"/></a>
				<figcaption>
					<h2 class="photostack-title">Heaven of time</h2>
					<div class="photostack-back">
						<p>What might be right for you may not be right for some. And we know Flipper lives in a world full of wonder flying there-under under the sea.</p>
					</div>
				</figcaption>
			</figure>
			<figure>
				<a href="http://www.51qianduan.com/" class="photostack-img"><img src="img/6.jpg" alt="img06"/></a>
				<figcaption>
					<h2 class="photostack-title">Forever this</h2>
					<div class="photostack-back">
						<p>Fish don't fry in the kitchen and beans don't burn on the grill. Took a whole lotta tryin' just to get up that hill. Baby if you've ever wondered - wondered whatever became of me. </p>
					</div>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/7.jpg" alt="img07"/></a>
				<figcaption>
					<h2 class="photostack-title">Lovely Green</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/8.jpg" alt="img08"/></a>
				<figcaption>
					<h2 class="photostack-title">Wonderful</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/9.jpg" alt="img09"/></a>
				<figcaption>
					<h2 class="photostack-title">Love Addict</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/10.jpg" alt="img10"/></a>
				<figcaption>
					<h2 class="photostack-title">Friendship</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/11.jpg" alt="img11"/></a>
				<figcaption>
					<h2 class="photostack-title">White Nights</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/12.jpg" alt="img12"/></a>
				<figcaption>
					<h2 class="photostack-title">Serendipity</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/13.jpg" alt="img13"/></a>
				<figcaption>
					<h2 class="photostack-title">Pure Soul</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/14.jpg" alt="img14"/></a>
				<figcaption>
					<h2 class="photostack-title">Winds of Peace</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/15.jpg" alt="img15"/></a>
				<figcaption>
					<h2 class="photostack-title">Shades of blue</h2>
				</figcaption>
			</figure>
			<figure data-dummy>
				<a href="#" class="photostack-img"><img src="img/16.jpg" alt="img16"/></a>
				<figcaption>
					<h2 class="photostack-title">Lightness</h2>
				</figcaption>
			</figure>
		</div>
	</section>
	<section class="description">
		<p>Photos by <a href="http://www.51qianduan.com/">Riza Nugraha</a>, licensed under <a href="http://www.51qianduan.com/">Creative Commons Attribution 2.0 Generic (CC BY 2.0)</a></p>
	</section>
</div><!-- /container -->
<script type="text/javascript">
// [].slice.call( document.querySelectorAll( '.photostack' ) ).forEach( function( el ) { new Photostack( el ); } );
new Photostack( document.getElementById( 'photostack-1' ), {
	callback : function( item ) {
		//console.log(item)
	}
} );
new Photostack( document.getElementById( 'photostack-2' ), {
	callback : function( item ) {
		//console.log(item)
	}
} );
new Photostack( document.getElementById( 'photostack-3' ), {
	callback : function( item ) {
		//console.log(item)
	}
} );
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片叠加 图片层叠 图片放大镜 图片翻转 图片旋转 图片拖动 图片拖拽 二维码 图片延迟加载 图片延迟 图片加载 图片淡出淡进 图片淡出 图片淡进 图片全屏 头像上传 图片上传 h5图片动画 h5图标动画 html5图片动画 html5图标动画 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 带缩略图的幻灯片 地图 中国地图 世界地图 滚动切换 滚动条切换 图片广告 滑动选项卡 滑动切换 图片收缩展开 图片收缩 图片展开 图片滚动 图片滚动条 图片滑动 图片滑块 旋转木马 图片旋转木马 文字旋转木马 旋转木马插件 纯图片轮播 图片轮播 图片切换 图片选项卡 图标选项卡 图标导航 图标菜单 自动滚动图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 背景切换 大图切换 滑动手风琴 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件 图表 图片 图片插件 头像截图 图片相册 相册图片 图片墙 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到