jquery可点击左右按钮切换的特效

分享到：

来源：51模板集浏览：次发布时间：2014-05-28 08:47

好看的jquery可点击左右按钮切换的特效-51模板集 51模板集提供最新最全的jqeury特效最新的css特效就上51模板集网站开发就上51模板集 51模板集提供最新最全的jqeury特效 51模板集提供最新

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>好看的jquery可点击左右按钮切换的特效-51模板集</title>
<style>

#container {
	width:429px;
	float:left;
	position:relative;
	z-index:24;
}
#example {
	width:618px;
	height:298px;
	position:relative;
	overflow:hidden;
	border:#ddd solid 1px;
}
#slides {
	position:absolute;
	z-index:27;
}

#slides .next,#slides .prev {
	position:absolute;
	top:115px;
	left:594px;
	width:28px;
	height:51px;
	display:block;
	z-index:28;
}

.slides_container {
	width:618px;
	height:298px;
	overflow:hidden;
	position:relative;
}

#slides .next {
	left:0;
}

.caption {
	position:absolute;
	bottom:-35px;
	height:45px;
	padding:15px 0 0 20px;
	background:#000;
	background:rgba(0,0,0,.5);
	width:598px;
	line-height:18px;
	color:#fff;
	text-shadow:none;
}

.caption b {
	font-size:15px;
	}

</style>

function stop() {
                clearInterval(elem.data('interval'));
            };

//tab function
// 焦点图
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'images/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true,
				animationStart: function(){
					$('.caption').animate({
						bottom:-35
					},100);
				},
				animationComplete: function(current){
					$('.caption').animate({
						bottom:0
					},200);
				}
			});
		});
</script>
</head>

<body>
<div id="container">
			<div id="example">
				<div id="slides">
					<div class="slides_container">
						<div>
							<a href="http://www.51mubanji.com/wytx/" title="51模板集提供最新最全的jqeury特效" target="_blank"><img src="http://www.51mubanji.com/uploads/130524/130524/1-1305240Z0443c.jpg" width="618" height="298" ></a>
							<div class="caption" style="bottom:0px">
								<b>51模板集提供最新最全的jqeury特效</b>
							</div>
						</div>
						<div>
							<a href="http://www.51mubanji.com/wytx/flashtx/" title="" target="_blank"><img src="http://www.51mubanji.com/uploads/130524/130524/1-13052411150R61.jpg" width="618" height="298" ></a>
							<div class="caption">
								<b>最新的css特效就上51模板集</b>
							</div>
						</div>
							<div>
							<a href="http://www.51mubanji.com/wytx/flashtx/" title="" target="_blank"><img src="http://www.51mubanji.com/uploads/130524/130524/1-1305240Z0443c.jpg" width="618" height="298" ></a>
							<div class="caption" style="bottom:0px">
								<b>网站开发就上51模板集</b>
							</div>
						</div>
						<div>
							<a href="http://www.51mubanji.com/wytx/flashtx/" title="" target="_blank"><img src="http://www.51mubanji.com/uploads/130524/130524/1-13052411150R61.jpg" width="618" height="298" ></a>
							<div class="caption">
								<b>51模板集提供最新最全的jqeury特效</b>
							</div>
						</div>
                        
						<div>
							<a href="http://www.51mubanji.com/wytx/flashtx/" title="" target="_blank"><img src="http://www.51mubanji.com/uploads/130524/130524/1-1305240Z0443c.jpg" width="618" height="298" ></a>
							<div class="caption" style="bottom:0px">
								<b>51模板集提供最新最全的jqeury特效</b>
							</div>
						</div>
						
                        
				  </div>
					<a href="#" class="prev"><img src="http://www.51mubanji.com/images/arrow-prev.png" alt="Arrow Prev"></a>
					<a href="#" class="next"><img src="http://www.51mubanji.com/images/arrow-next.png" alt="Arrow Next"></a>
				</div>
			</div>
		</div>
</body>
</html>

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。

上一篇：jquery鼠标滑动小图大图切换特效
下一篇：jquery水平滑动图片切换特效

jquery可点击左右按钮切换的特效

栏目列表

点击排行

相关文章推荐

友情链接

咨询在线客服