jQuery动画滑动插件



204 815 272



特效描述:jQuery 动画滑动插件,jQuery动画滑动插件

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/pogo-slider.css">

2. 引入JS

<script src="js/vendor/jquery-1.11.1.min.js"></script>
<script src="js/jquery.pogo-slider.min.js"></script>
<script src="js/main.js"></script>

3. HTML代码

<div class="container">
	<h2 class="sectionHeading">Full Width Demo</h2>
	<div class="pogoSlider" id="js-main-slider">
		<div class="pogoSlider-slide" data-transition="slideOverLeft" data-duration="1000"  style="background-image:url(img/slide1.jpg);"></div>
		<div class="pogoSlider-slide " data-transition="fold" data-duration="1000"  style="background-image:url(img/slide2.jpg);"></div>
		<div class="pogoSlider-slide " data-transition="shrinkReveal" data-duration="1000"  style="background-image:url(img/slide3.jpg);"></div>
	</div><!-- .pogoSlider -->
	<div class="demos" id="demos">
		<div class="slideDemos clearfix">
			<div class="grid12 small12">
				<h2 class="sectionHeading">Slide Transition Demos</h2>
			</div>
			<div class="row fl">
				<div class="grid12 small3 slideDemos-single">
					<div class="pogoSlider" id="demo1">
						<div class="pogoSlider-slide" style="background-color: indigo;">
							<h3 class="pogoSlider-slide-element">slide</h3>
						</div>
						<div class="pogoSlider-slide" style="background-color: dimgray;">
							<h3 class="pogoSlider-slide-element">slide</h3>
						</div>
						<div class="pogoSlider-slide" style="background-color: coral">
							<h3 class="pogoSlider-slide-element">slide</h3>
						</div>
					</div>
				</div>
				<div class="grid12 small3 slideDemos-single">
					<div class="pogoSlider " id="demo2">
						<div class="pogoSlider-slide" data-transition="blocksReveal" style="background-color: magenta;">
							<h3 class="pogoSlider-slide-element">blocksReveal</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="blocksReveal" style="background-color: teal;">
							<h3 class="pogoSlider-slide-element">blocksReveal</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="blocksReveal" style="background-color: plum">
							<h3 class="pogoSlider-slide-element">blocksReveal</h3>
						</div>
					</div>
				</div>
				<div class="grid12 small3 slideDemos-single">
					<div class="pogoSlider" id="demo3">
						<div class="pogoSlider-slide" data-transition="verticalSplitReveal" style="background-color: sandybrown;">
							<h3 class="pogoSlider-slide-element">verticalSplitReveal</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="verticalSplitReveal" style="background-color: forestgreen;">
							<h3 class="pogoSlider-slide-element">verticalSplitReveal</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="verticalSplitReveal" style="background-color: midnightblue">
							<h3 class="pogoSlider-slide-element">verticalSplitReveal</h3>
						</div>
					</div>
				</div>
				<div class="grid12 small3 slideDemos-single">
					<div class="pogoSlider" id="demo4">
						<div class="pogoSlider-slide" data-transition="zipReveal" style="background-color: darkturquoise;">
							<h3 class="pogoSlider-slide-element">zipReveal</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="zipReveal" style="background-color: lightgrey;">
							<h3 class="pogoSlider-slide-element">zipReveal</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="zipReveal" style="background-color: darkred">
							<h3 class="pogoSlider-slide-element">zipReveal</h3>
						</div>
					</div>
				</div>
			</div><!-- .row -->
			<div class="row fl">
				<div class="grid12 small3 slideDemos-single">
					<div class="pogoSlider" id="demo5">
						<div class="pogoSlider-slide" data-transition="shrinkReveal" style="background-color: rosybrown;">
							<h3 class="pogoSlider-slide-element">shrinkReveal</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="shrinkReveal" style="background-color: orchid;">
							<h3 class="pogoSlider-slide-element">shrinkReveal</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="shrinkReveal" style="background-color: royalblue">
							<h3 class="pogoSlider-slide-element">shrinkReveal</h3>
						</div>
					</div>
				</div>
				<div class="grid12 small3 slideDemos-single" id="demo2">
					<div class="pogoSlider" id="demo6">
						<div class="pogoSlider-slide" data-transition="expandReveal" style="background-color: limegreen;">
							<h3 class="pogoSlider-slide-element">expandReveal</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="expandReveal" style="background-color: lightsteelblue;">
							<h3 class="pogoSlider-slide-element">expandReveal</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="expandReveal" style="background-color: aquamarine">
							<h3 class="pogoSlider-slide-element">expandReveal</h3>
						</div>
					</div>
				</div>
				<div class="grid12 small3 slideDemos-single">
					<div class="pogoSlider" id="demo7">
						<div class="pogoSlider-slide" data-transition="fold" style="background-color: darkolivegreen;">
							<h3 class="pogoSlider-slide-element">fold</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="fold" style="background-color: orange;">
							<h3 class="pogoSlider-slide-element">fold</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="fold" style="background-color: palevioletred">
							<h3 class="pogoSlider-slide-element">fold</h3>
						</div>
					</div>
				</div>
				<div class="grid12 small3 slideDemos-single">
					<div class="pogoSlider" id="demo8">
						<div class="pogoSlider-slide" data-transition="verticalSlide" style="background-color: darkslateblue;">
							<h3 class="pogoSlider-slide-element">verticalSlide</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="verticalSlide" style="background-color: cyan;">
							<h3 class="pogoSlider-slide-element">verticalSlide</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="verticalSlide" style="background-color: indianred">
							<h3 class="pogoSlider-slide-element">verticalSlide</h3>
						</div>
					</div>
				</div>
			</div><!-- .row -->
			<div class="row fl">
				<div class="grid12 small3 slideDemos-single">
					<div class="pogoSlider" id="demo9">
						<div class="pogoSlider-slide" data-transition="fade" style="background-color: skyblue;">
							<h3 class="pogoSlider-slide-element">fade</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="fade" style="background-color: black;">
							<h3 class="pogoSlider-slide-element">fade</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="fade" style="background-color: gainsboro">
							<h3 class="pogoSlider-slide-element">fade</h3>
						</div>
					</div>
				</div>
				<div class="grid12 small3 slideDemos-single">
					<div class="pogoSlider" id="demo10">
						<div class="pogoSlider-slide" data-transition="slideRevealLeft" style="background-color: LightPink;">
							<h3 class="pogoSlider-slide-element">Slide Reveal Left</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="slideRevealLeft" style="background-color: SlateBlue;">
							<h3 class="pogoSlider-slide-element">Slide Reveal Left</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="slideRevealLeft" style="background-color: DimGrey">
							<h3 class="pogoSlider-slide-element">Slide Reveal Left</h3>
						</div>
					</div>
				</div>
				<div class="grid12 small3 slideDemos-single">
					<div class="pogoSlider" id="demo11">
						<div class="pogoSlider-slide" data-transition="slideOverLeft" style="background-color: HotPink;">
							<h3 class="pogoSlider-slide-element">Slide Over Left</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="slideOverLeft" style="background-color: Brown;">
							<h3 class="pogoSlider-slide-element">Slide Over Left</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="slideOverLeft" style="background-color: Indigo">
							<h3 class="pogoSlider-slide-element">Slide Over Left</h3>
						</div>
					</div>
				</div>
				<div class="grid12 small3 slideDemos-single">
					<div class="pogoSlider" id="demo12">
						<div class="pogoSlider-slide" data-transition="barRevealDown" style="background-color: PaleGreen;">
							<h3 class="pogoSlider-slide-element">Bars Reveal Down</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="barRevealDown" style="background-color: MediumVioletRed;">
							<h3 class="pogoSlider-slide-element">Bars Reveal Down</h3>
						</div>
						<div class="pogoSlider-slide" data-transition="barRevealDown" style="background-color: SpringGreen">
							<h3 class="pogoSlider-slide-element">Bars Reveal Down</h3>
						</div>
					</div>
				</div>
			</div><!-- row -->
		</div><!-- slideDemos -->
	</div><!-- demos -->
</div><!-- .container -->



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


热门标签: 滑动导航菜单 图片翻转旋转 html5动画导航菜单 滑动选项卡切换 文字翻转旋转 html5图片动画 图片滑动 旋转木马 html5文字动画 文字滑动 html5表情动画 滑动手风琴 html5线条动画 滑动星星打分 html5飘落动画 html5光标动画 html5悬停动画 滑动滑过 加载动画 html5弹窗动画 转动旋转翻转 html5动画h5动画 html5按钮动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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