注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

基于jquery的可拖动的幻灯片效果

jQuery插件 fishcity 658浏览

这是一款基于jquery的超强插件carouFredSel,它可以实现极多不同的动画特效,只需配置不同的参数便可实现,简单易用。今天介绍这款主题是一款比较有个性的幻灯片特效,它需用鼠标拖动才可以切换,切换的方向会根您鼠标的拖动方向来决定。动画的感觉很像手机上用手拔动的感觉。

构建html

<div id="wrapper">
	<div id="carousel">
		<img src="img/car1.jpg" width="800" height="400" />
		<img src="img/car2.jpg" width="800" height="400" />
		<img src="img/car3.jpg" width="800" height="400" />
		<img src="img/car4.jpg" width="800" height="400" />
	</div>
</div>

写入CSS样式

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	min-height: 550px;
	background-color: #eee;
}
body * {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 14px;
	color: #333;
	line-height: 22px;
}
body h3 {
	color: #999;
	font-size: 20px;
	text-align: center;
	margin-top: 50px;
}
 
#wrapper {
	background-color: #fff;
	box-shadow: 0 0 30px #999;
	border: 20px solid #fff;
	width: 800px;
	height: 400px;
	margin: -220px 0 0 -420px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
}
#carousel img {
	display: block;
	float: left;
	border: none;
}

引入核心库文件

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>

写入JS调用插件,实现效果

/ the carousel
var $carousel = null;
 
//	the draggable wrapper
var $wrapper = null;
 
//	the width of one item
var itemWidth = 800;
 
//	the duration of the scrolling
var scrollDuration = 300;
 
//	dragging-engine
var startDragPosition = false;
function startDrag( event ) {
	event.preventDefault();
 
	if ( $carousel.triggerHandler( 'isScrolling' ) ) {
		startDragPosition = false;
		return;
	}
	startDragPosition = event.pageX;
	$wrapper.bind(
		'mousemove',
		function( e ) {
			$wrapper.css({
				'marginLeft': -(itemWidth + startDragPosition - e.pageX)
			});
		}
	);
}
function stopDrag( event ) {
	event.preventDefault();
	$wrapper.unbind('mousemove');
 
	if ( startDragPosition ) {
		var currentDragPosition = event.pageX;
		var direction = false;
		if ( startDragPosition < currentDragPosition ) {
			direction = 'prev';
		} else if ( startDragPosition > currentDragPosition ) {
			direction = 'next';
		}
		if ( direction ) {
			$carousel.trigger( direction );
			$wrapper.animate({
				'marginLeft': -itemWidth
			}, scrollDuration);
		}
	}
	startDragPosition = false;
}
 
$(function() {
 
	//	the carousel
	$carousel = $('#carousel');
	$carousel.carouFredSel({
		width: 800 * 3,
		height: 400,
		align: false,
		items: {
			visible: 3,
			start: -1
		},
		scroll: {
			items: 1,
			duration: scrollDuration
		},
		auto: false
	});
 
	//	make the wrapper draggable
	$wrapper = $carousel.parent();
	$wrapper.css({
		'cursor': 'move',
		'marginLeft': -itemWidth
	});
	$wrapper.bind('mousedown', startDrag)
	$wrapper.bind('mouseup', stopDrag)
	$wrapper.bind('mouseleave', stopDrag);
});

恭喜你,完成以上工作,便可以实现可左右拖动的幻灯片果效果了

转载请注明:jQ酷 » 基于jquery的可拖动的幻灯片效果

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。