<!doctype html>
<html lang="">
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>超级酷jQuery动画滑动插件 - 网页模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/pogo-slider.css">
</head>
<body>
<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
超级酷jQuery动画滑动插件.zip
版权申诉
172 浏览量
2022-11-25
10:22:11
上传
评论
收藏 1.16MB ZIP 举报
超级酷jQuery动画滑动插件.zip （12个子文件） 
超级酷jQuery动画滑动插件 jiaoben3724 css 
pogo-slider.css 19KB normalize.css 8KB main.css 1KB img 
slide1.jpg 343KB slide3.jpg 383KB slide2.jpg 392KB
index.html 10KB js vendor jquery-1.11.1.min.js 94KB jquery.pogo-slider.min.js 26KB jquery.pogo-slider.js 48KB main.js 907B 超级酷jQuery动画滑动插件.jpg 34KB资源评论
