利用jQuery实现的简单轮播效果

模板网 2015-01-14

利用jQuery实现的简单轮播效果,代码简单容易理解。

效果截图:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>利用jQuery实现的简单轮播效果</title>
<style type="text/css">
	* {margin:0;padding:0;}
	ul,li {list-style:none;}

	.slide {margin:20px auto;width:800px;height:300px;position:relative;overflow:hidden;}
	.slide ul {width:2400px;}
	.slide ul li {width:800px;height:300px;float:left;}
	.slide .btn {margin-top:-50px;width:50px;height:100px;line-height:100px;background:#000;position:absolute;top:50%;opacity:0.6;cursor:pointer;color:#FFF;text-align:center;}
	.slide .prev {left:0;}
	.slide .next {right:0;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script>
	$(function(){
		$(".next").click(function(){
			$('.slide ul').animate({'marginLeft':-800},600,function(){
				$('.slide ul li:first').insertAfter('.slide ul li:last');
				$('.slide ul').css('marginLeft',0);
			});
		});
		$(".prev").click(function(){
			$('.slide ul').css('marginLeft',-800).find('li:last').insertBefore('.slide ul li:first');
			$('.slide ul').animate({'marginLeft':0},600);
		});
		
		var timer = setInterval(function(){
			$('.next').trigger('click');
		},3000);

		$('.slide').hover(function(){
			clearInterval(timer);
		},function(){
			timer = setInterval(function(){
				$('.next').trigger('click');
			},3000);
		});
	});
</script>
</head>
<body>
	<div class="slide">
		<ul>
			<li style="background:red;"></li>
			<li style="background:green;"></li>
			<li style="background:blue;"></li>
		</ul>
		<div class="prev btn">prev</div>
		<div class="next btn">next</div>
	</div>
</body>
</html>

相关文章

  1. Jquery幻灯片特效jquery.KinSlideshow-1.1.js

    KinSlideshow无缝滑动幻灯片jquery特效代码Jquery幻灯片特效jquery.KinSlideshow-1.1.js 兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(焦点图)效果。 演示页面: 演示一 演示二

  2. 调用百度CDN提供的jQuery库来加速网站

    CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用。与将JS库存放在服务器单机上相比,CDN公共库更加稳定、高速。 百度公共CDN为您的应用程序提供稳定、可靠、高速的服务,包含全球所有最流行的开源JavaScript库。 使用方法: 加载JS库,复

  3. jquery.md5.js下载

    jquery.md5.js下载 使用方法 复制代码 代码如下: script type=text/javascript src=jquery.min.js/script script type=jquery.md5.js/script script type=text/javascript alert($.md5(test)); /script 点击下载 官网:https://github.com/placemarker/jQuery

  4. jQuery火箭上升回到顶部效果

    jQuery火箭上升回到顶部效果,jQuery模拟火箭升空的效果使网页回到顶部,效果逼真。 代码打包下载: jQuery火箭上升回到顶部效果 效果截图:

  5. jquery折叠效果

    jquery折叠效果,图片折叠收缩,效果非常棒! 代码打包下载: jquery折叠效果 效果图:

随机推荐

  1. Jquery幻灯片特效jquery.KinSlideshow-1.1.js

    KinSlideshow无缝滑动幻灯片jquery特效代码Jquery幻灯片特效jquery.KinSlideshow-1.1.js 兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(焦点图)效果。 演示页面: 演示一 演示二

  2. 调用百度CDN提供的jQuery库来加速网站

    CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用。与将JS库存放在服务器单机上相比,CDN公共库更加稳定、高速。 百度公共CDN为您的应用程序提供稳定、可靠、高速的服务,包含全球所有最流行的开源JavaScript库。 使用方法: 加载JS库,复

  3. jquery.md5.js下载

    jquery.md5.js下载 使用方法 复制代码 代码如下: script type=text/javascript src=jquery.min.js/script script type=jquery.md5.js/script script type=text/javascript alert($.md5(test)); /script 点击下载 官网:https://github.com/placemarker/jQuery

  4. jQuery火箭上升回到顶部效果

    jQuery火箭上升回到顶部效果,jQuery模拟火箭升空的效果使网页回到顶部,效果逼真。 代码打包下载: jQuery火箭上升回到顶部效果 效果截图:

  5. jquery折叠效果

    jquery折叠效果,图片折叠收缩,效果非常棒! 代码打包下载: jquery折叠效果 效果图: