酷炫的jQuery 3D图片轮播幻灯片带进度条的图片切换特效



222 886 296



特效描述:jQuery 3D图片 轮播幻灯片 带进度条 图片切换特效,精美jQuery幻灯片,兼容性好。

代码结构

1. 引入CSS

<link href="style/screen.css" rel="stylesheet">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/modernizr.min.js"></script>
<script type="text/javascript" src="js/box-slider-all.jquery.min.js"></script>

3. HTML代码

<div id="page">
	<div id="viewport-shadow" class="trans">
		<a href="#" id="prev" title="go to the next slide" class="trans"></a>
		<a href="#" id="next" title="go to the next slide" class="trans"></a>
		<div id="viewport">
			<div id="box">
				<figure class="slide"><a href="#" target="_blank"><img src="images/focus_1.jpg"></a></figure>
				<figure class="slide"><a href="#" target="_blank"><img src="images/focus_2.jpg"></a></figure>
				<figure class="slide"><a href="#" target="_blank"><img src="images/focus_3.jpg"></a></figure>
				<figure class="slide"><img src="images/focus_4.jpg"></figure>
				<figure class="slide"><img src="images/focus_5.jpg"></figure>
			</div>
		</div>
		<div id="time-indicator"></div>
	</div>
	<div class="slider-controls">
		<ul id="controls">
			<li><a class="goto-slide current" href="#" data-slideindex="0"></a></li>
			<li><a class="goto-slide" href="#" data-slideindex="1"></a></li>
			<li><a class="goto-slide" href="#" data-slideindex="2"></a></li>
			<li><a class="goto-slide" href="#" data-slideindex="3"></a></li>
			<li><a class="goto-slide" href="#" data-slideindex="4"></a></li>
		</ul>
	</div>
</div>
<script type="text/javascript">
$(function(){
	var $box = $('#box'), $indicators = $('.goto-slide'), $timeIndicator = $('#time-indicator'), slideInterval = 5000;
	var switchIndicator = function ($c, $n, currIndex, nextIndex) {
		$timeIndicator.stop().css('width', 0);
		$indicators.removeClass('current').eq(nextIndex).addClass('current');
	};
	var startTimeIndicator = function () {
		$timeIndicator.animate({width: '891px'}, slideInterval);
	};
	// initialize the plugin with the desired settings
	$box.boxSlider({
		speed: 1000,
		autoScroll: true,
		timeout: slideInterval,
		next: '#next',
		prev: '#prev',
		pause: '#pause',
		effect: 'scrollVert3d', /*scrollVert3d and scrollHorz3d*/ 
		blindCount: 15,
		onbefore: switchIndicator,
		onafter: startTimeIndicator
	});
	startTimeIndicator();
	// pagination isn't built in simply because it's easy to
	// roll your own with the plugin API methods
	$('#controls').on('click', '.goto-slide', function (ev){
		$box.boxSlider('showSlide', $(this).data('slideindex'));
		ev.preventDefault();
	});
});
</script>



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


热门标签: 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 滑动星星打分 旋转翻转 焦点图 幻灯片 图片轮播 其他 图片切换 旋转木马 图片轮播 进度条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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