jquery cycle循环插件多功能幻灯片插件



111 443 148



特效描述:jquery cycle循环插件 多功能幻灯片插件,jquery cycle循环插件多功能幻灯片插件

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

2. HTML代码

<div class="demopage">
	<h2>jquery cycle 插件功能展示</h2>
	<table width="100%">
	<tr>
		<td>
			<h2>shuffle</h2>
			<div id="shuffle" class="pics">
				<img src="images/keji1.jpg" width="200" height="200" />
				<img src="images/keji2.jpg" width="200" height="200" />
				<img src="images/keji3.jpg" width="200" height="200" />
			</div>
		</td>
		<td>
			<h2>zoom</h2>
			<div id="zoom" class="pics">
				<img src="images/keji1.jpg" width="200" height="200" />
				<img src="images/keji2.jpg" width="200" height="200" />
				<img src="images/keji3.jpg" width="200" height="200" />
			</div>
		</td>
		<td>
			<h2>fade</h2>
			<div id="fade" class="pics">
				<img src="images/keji1.jpg" width="200" height="200" />
				<img src="images/keji2.jpg" width="200" height="200" />
				<img src="images/keji3.jpg" width="200" height="200" />
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<h2>turnDown</h2>
			<div id="slide" class="pics">
				<img src="images/keji1.jpg" width="200" height="200" />
				<img src="images/keji2.jpg" width="200" height="200" />
				<img src="images/keji3.jpg" width="200" height="200" />
			</div>
		</td>
		<td>
			<h2>curtainX</h2>
			<div id="up" class="pics">
				<img src="images/keji1.jpg" width="200" height="200" />
				<img src="images/keji2.jpg" width="200" height="200" />
				<img src="images/keji3.jpg" width="200" height="200" />
			</div>
		</td>
		<td>
			<h2>scrollRight (click)</h2>
			<div id="right" class="pics">
				<img src="images/keji1.jpg" width="200" height="200" />
				<img src="images/keji2.jpg" width="200" height="200" />
				<img src="images/keji3.jpg" width="200" height="200" />
			</div>
		</td>
	</tr>
	</table>
	<script type="text/javascript">
	$.fn.cycle.defaults.speed   = 900;
	$.fn.cycle.defaults.timeout = 6000;
	$('#shuffle').cycle({
		fx:     'shuffle',
		easing: 'easeOutBack',
		delay:  -4000
	});
	$('#zoom').cycle({
		fx:    'zoom',
		sync:  false,
		delay: -2000
	});
	$('#fade').cycle();
	$('#slide').cycle({
		fx:      'turnDown',
		delay:   -4000
	});
	$('#up').cycle({
		fx:    'curtainX',
		sync:  false,
		delay: -2000
	});
	$('#right').cycle({
		fx:      'scrollRight',
		next:   '#right',
		timeout:  0,
		easing:  'easeInOutBack'
	});
	</script>
	<h2>只显示第一个幻灯片的形式</h2>
	<p>由于使用周期插件的幻灯片是绝对定位的,它有助于大大造型,如果它们是相同的高度。实例中,你可以设置一个固定大小的容器,并设置为隐藏其溢出,从而隐藏了所有图像,超越第一。</p>
	<div class="slideshow" id="s1">
		<a href="http://http://www.51qianduan.com/"><img src="images/keji1.jpg" width="200" height="200" /></a>
		<a href="http://http://www.51qianduan.com/"><img src="images/keji2.jpg" width="200" height="200" /></a>
		<a href="http://http://www.51qianduan.com/"><img src="images/keji3.jpg" width="200" height="200" /></a>
		<a href="http://http://www.51qianduan.com/"><img src="images/keji4.jpg" width="200" height="200" /></a>
		<a href="http://http://www.51qianduan.com/"><img src="images/keji5.jpg" width="200" height="200" /></a>
	</div>
	<script type="text/javascript">
	$(function() {
		$('#s1').cycle({ 
			fx: 'fade'
		});
	});
	</script>
	<h2>幻灯片保持在区域中心播放</h2>
	<h3>第一种 为不同大小的图像</h3>
	<div class="slideshow-01" id="s2">
		<!-- wrap each image in a div -->
		<div><img src="images/keji1.jpg" width="100" height="100" /></div>
		<div><img src="images/keji2.jpg" width="300" height="300" /></div>
		<div><img src="images/keji3.jpg" width="200" height="200" /></div>
	</div>
	<script type="text/javascript">
	$(function() {
		$('#s2').cycle({ 
			fx: 'all',
			speed: 500,
			timeout: 2000
		});
	});
	</script>
	<h3>第二种 为不同大小的图像</h3>
	<div class="slideshow-02" id="s3">
		<div class="slide">
			<img src="http://jquery.malsup.com/cycle/images/beach1.jpg" width="200" height="200" />
		</div>
		<div class="slide">
			<img src="http://jquery.malsup.com/cycle/images/beach2.jpg" width="300" height="300" />
		</div>
		<div class="slide">
			<img src="http://jquery.malsup.com/cycle/images/beach3.jpg" width="400" height="400" />
		</div>
	</div>
	<script type="text/javascript">
		$('#s3').cycle('cover');
	</script>
	<h2>一次转换多个图像 带索引分页按钮控制图片滚动</h2>
	<div style="margin:auto;text-align:center"><div id="nav"></div></div>
	<div class="nav"><a id="prev" href="http://http://www.51qianduan.com/">Prev</a> <a id="next" href="http://http://www.51qianduan.com/">Next</a></div>
	<div class="slideshow-03" id="s4">
		<div class="slide">
			<img src="http://jquery.malsup.com/cycle/images/beach1.jpg" width="200" height="200" /><img src="http://jquery.malsup.com/cycle/images/beach2.jpg" width="200" height="200" /><img src="http://jquery.malsup.com/cycle/images/beach3.jpg" width="200" height="200" />
		</div>
		<div class="slide">
			<img src="http://jquery.malsup.com/cycle/images/beach4.jpg" width="200" height="200" /><img src="http://jquery.malsup.com/cycle/images/beach5.jpg" width="200" height="200" /><img src="http://jquery.malsup.com/cycle/images/beach6.jpg" width="200" height="200" />
		</div>
		<div class="slide">
			<img src="http://jquery.malsup.com/cycle/images/beach7.jpg" width="200" height="200" /><img src="http://jquery.malsup.com/cycle/images/beach8.jpg" width="200" height="200" /><img src="http://jquery.malsup.com/cycle/images/beach9.jpg" width="200" height="200" />
		</div>
	</div>
	<script type="text/javascript">
	$(document).ready(function() {
		$('#s4').cycle({
			fx: 'scrollHorz',
			timeout: 0,
			pager: '#nav',
			prev: '#prev', 
			next: '#next'
		});
	});
	</script>
	<h2>我怎样创建一个标题,显示幻灯片个数 图像计数演示</h2>
	<div id="s5" class="pics">
		<img src="images/keji1.jpg" width="200" height="200" />
		<img src="images/keji2.jpg" width="200" height="200" />
		<img src="images/keji3.jpg" width="200" height="200" />
		<img src="images/keji4.jpg" width="200" height="200" />
		<img src="images/keji5.jpg" width="200" height="200" />
		<img src="images/keji6.jpg" width="200" height="200" />
		<img src="images/keji7.jpg" width="200" height="200" />
		<img src="images/keji8.jpg" width="200" height="200" />
	</div>
	<p id="caption"></p>
	<script type="text/javascript">
	$(function() {
		$('#s5').cycle({
			fx:       'fadeZoom',
			timeout:   2000,
			after:     onAfter
		});
	});
	function onAfter(curr,next,opts) {
		var caption = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
		$('#caption').html(caption);
	}
	</script>
	<h2>使用元数据,如一个“alt”属性,能够显示标题</h2>
	<div id="s6" class="pics">
		<img src="images/keji1.jpg" width="200" height="200" alt="Beach 1" />
		<img src="images/keji2.jpg" width="200" height="200" alt="Beach 2" />
		<img src="images/keji3.jpg" width="200" height="200" alt="Beach 3" />
		<img src="images/keji4.jpg" width="200" height="200" alt="Beach 4" />
		<img src="images/keji5.jpg" width="200" height="200" alt="Beach 5" />
		<img src="images/keji6.jpg" width="200" height="200" alt="Beach 6" />
		<img src="images/keji7.jpg" width="200" height="200" alt="Beach 7" />
		<img src="images/keji8.jpg" width="200" height="200" alt="Beach 8" />
	</div>
	<p id="captiontitle"></p>
	<script type="text/javascript">
	$(function() {
		$('#s6').cycle({
			fx:       'fadeZoom',
			timeout:   2000,
			after:     function() {
				$('#captiontitle').html(this.alt);
			}
		});
	});
	</script>
	<h2>第一个图像淡入演示</h2>
	<div id="s7" class="pics">
        <img src="images/keji1.jpg" width="200" height="200" />
        <img src="images/keji2.jpg" width="200" height="200" />
        <img src="images/keji3.jpg" width="200" height="200" />
    </div>
	<script type="text/javascript">
	$(function() {
		$('#s7 img:first').fadeIn(1000, function() {
			$('#s7').cycle();
		});
	});
	</script>
	<h2>如何使用外部控制推进到一个特定的幻灯片播放 水平滚动</h2>
	<div id="s8" class="pics">
		<img src="images/keji1.jpg" width="200" height="200" />
		<img src="images/keji2.jpg" width="200" height="200" />
		<img src="images/keji3.jpg" width="200" height="200" />
		<img src="images/keji4.jpg" width="200" height="200" />
		<img src="images/keji5.jpg" width="200" height="200" />
	</div>
	<div id="buttons8"></div>
	<script type="text/javascript">
	$(function() {
		var bc = $('#buttons8');
		var $container = $('#s8').cycle({
			fx: 'scrollHorz',
			speed: 300,
			timeout: 2000
		});
		$container.children().each(function(i) {
			$('<input type="button" value="'+(i+1)+'" />').appendTo(bc).click(function(){
				$container.cycle(i);
				return false;
			});
		});
	});
	</script>
	<h2>如何使用外部控制推进到一个特定的幻灯片播放 多方向滚动</h2>
	<div id="s9" class="pics">
		<img src="images/keji1.jpg" width="200" height="200" />
		<img src="images/keji2.jpg" width="200" height="200" />
		<img src="images/keji3.jpg" width="200" height="200" />
		<img src="images/keji4.jpg" width="200" height="200" />
		<img src="images/keji5.jpg" width="200" height="200" />
	</div>
	<div id="buttons9"></div>
	<script type="text/javascript">
	$(function() {
		var $bc = $('#buttons9');
		var $container = $('#s9').cycle({
			fx: 'scrollLeft',
			speed: 300,
			autostop: 1,
			autostopCount: 1
		});
		var manualEffects = ['fade','turnUp','curtainY','blindZ','zoom'];
		$container.children().each(function(i) {
			$('<input type="button" value="'+(i+1)+'" />')
				.appendTo($bc).click(function() {
					// pass fx name as 2nd arg for a one-time override
					$container.cycle(i, manualEffects[i]);
					return false;
				});
		});
	});
	</script>
	<h2>我如何使用我的幻灯片多个过渡效果</h2>
	<table width="100%">
		<tr>
			<td>
				<h4 class="title">All Effects</h4>
				<div id="s10-01" class="pics">
					<img src="images/keji1.jpg" width="200" height="200" alt="Beach 1" />
					<img src="images/keji2.jpg" width="200" height="200" alt="Beach 2" />
					<img src="images/keji3.jpg" width="200" height="200" alt="Beach 3" />
				</div>
				<div id="caption1"></div>
			</td>
			<td>
				<h4 class="title">Scroll Effects</h4>
				<div id="s10-02" class="pics">
					<img src="images/keji4.jpg" width="200" height="200" alt="Beach 4" />
					<img src="images/keji5.jpg" width="200" height="200" alt="Beach 5" />
					<img src="images/keji6.jpg" width="200" height="200" alt="Beach 6" />
				</div>
				<div id="caption2"></div>
			</td>
		</tr>
	</table>
	<script type="text/javascript">
	$(document).ready(function() {
		$('#s10-01').cycle({
			speed:    300,
			timeout:  1000,
			shuffle:  {left:-300, top:30},
			clip:     'zoom',
			fx:       'all',
			before:   function(c,n,o) {$(o.caption).html(o.currFx);},
			caption:  '#caption1'
		});
		$('#s10-02').cycle({
			speed:    500,
			timeout:  1500,
			easing:  'easeInBack',
			fx: 'scrollLeft,scrollDown,scrollRight,scrollUp',
			randomizeEffects: false,
			before:  function(c,n,o) {$(o.caption).html(o.currFx);},
			caption: '#caption2'
		});
	});
	</script>
	<h2>创建一个幻灯片滚动,用按钮控制幻灯片上下或左右滚动等多种效果</h2>
	<table width="100%">
		<tr>
			<td>
				<div class="nav"><a id="prev1" href="http://http://www.51qianduan.com/">Prev</a> <a id="next1" href="http://http://www.51qianduan.com/">Next</a></div>
				<div id="s12-01" class="pics">
					<img src="images/keji1.jpg" width="200" height="200" />
					<img src="images/keji2.jpg" width="200" height="200" />
					<img src="images/keji3.jpg" width="200" height="200" />
				</div>   
			</td>
			<td>
				<div class="nav"><a id="prev2" href="http://http://www.51qianduan.com/">Prev</a> <a id="next2" href="http://http://www.51qianduan.com/">Next</a></div>
				<div id="s12-02" class="pics">
					<img src="images/keji1.jpg" width="200" height="200" />
					<img src="images/keji2.jpg" width="200" height="200" />
					<img src="images/keji3.jpg" width="200" height="200" />
				</div>  
			</td>
		</tr>
	</table>
	<script type="text/javascript">
	$(document).ready(function(){
		$('#s12-01').cycle({ 
			fx:     'scrollHorz', 
			prev:   '#prev1', 
			next:   '#next1', 
			timeout: 0 
		});
		$('#s12-02').cycle({ 
			fx:     'scrollVert', 
			prev:   '#prev2', 
			next:   '#next2', 
			timeout: 0 
		});
	});
	</script>
	<h2>此页显示如何控制每个幻灯片的基础上的超时值。</h2>
	<div id="s13" class="pics">
        <img src="images/keji1.jpg" width="200" height="200" />
        <img src="images/keji2.jpg" width="200" height="200" />
        <img src="images/keji3.jpg" width="200" height="200" />
        <img src="images/keji4.jpg" width="200" height="200" />
        <img src="images/keji5.jpg" width="200" height="200" />
        <img src="images/keji6.jpg" width="200" height="200" />
        <img src="images/keji7.jpg" width="200" height="200" />
        <img src="images/keji8.jpg" width="200" height="200" />
    </div>
	<script type="text/javascript">
	$(function() {
		$('#s13').cycle({
			fx:     'shuffle',
			speed:  'fast',
			timeoutFn: calculateTimeout
		});
	});    
	function calculateTimeout(currElement, nextElement, opts, isForward) {
		// 这里我们设置偶数幻灯片有一个2秒的超时;
		// 奇数滑轨返回false
		// 继承默认的超时值(4秒)
		var index = opts.currSlide;
		return index % 2 ? 2000 : false;
	}
	</script>
</div>



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


热门标签: 文字叠加 滚动导航菜单 导航切换 收缩导航菜单 图片叠加 图片翻转旋转 滚动切换 文字收缩展开 文字翻转旋转 图片滚动 图片切换 图片收缩展开 旋转木马 文字滚动 文字切换 背景切换 图片文字滚动 手风琴 全屏滚动 选项卡自动切换 页面滚动 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滚动流动 滚动切换 滑动选项卡切换 自动滚动图片轮播 叠加浮动层 选项卡切换 滑动手风琴 收缩收起展开 重叠层叠叠加 转动旋转翻转

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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