利用CSS实现幻灯片图片切换特效



67 266 89



特效描述:利用CSS实现幻灯片图片切换特效,利用CSS实现幻灯片图片切换特效

代码结构

1. HTML代码

<!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" />
<meta name="keywords" content=" " />
<meta name="description" content=" " />
<title></title>
<LINK rel=stylesheet type=text/css href="css/lrtk.css" charset=utf-8 media=screen>
<SCRIPT type=text/javascript src="js/jquery-1.3.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="js/jquery.easing.1.2.js"></SCRIPT>
<SCRIPT type=text/javascript>
	// <![CDATA[
		$(document).ready(function(){
			if ($('#pager a').size() <= 1) {
				$('#pager').css('display', 'none');
				return;
			}
			var index = 0;
			var selected = null;
			var width = 756;
			$('#pager a').each(function(i){
				if (i == 0) {
					selected = $(this);
					selected.find('img').attr('src', 'images/button-view-active.gif');
				}
				$(this).click(function(){
					index = i;
					selected.find('img').attr('src', 'images/button-view.gif');
					selected = $(this);
					selected.find('img').attr('src', 'images/button-view-active.gif');
					$('#images').animate({left:-(width * i)}, 500, 'easeOutQuad');
					return false;
				});
			});
			$('#images').wrapInner('<a href="#" id="next"></a>');
			$('#next').click(function(){
				var a = $('#pager a').get(index + 1);
				if (!a) a = $('#pager a').get(0);
				$(a).click();
				return false;
			});
		});
	// ]]>
	</SCRIPT>
</head>
<body style="text-align:center" class=work-project>
<DIV id=content>
<DIV id=project><!-- project navigation -->
<P id=navigation><SPAN id=pager>
<A href="images/1.jpg"><IMG alt=1 src="images/button-view.gif" width=12 height=19></A>
<A href="images/2.jpg"><IMG alt=2 src="images/button-view.gif" width=12 height=19></A>
<A href="images/3.jpg"><IMG alt=3 src="images/button-view.gif" width=12 height=19></A>
<A href="images/4.jpg"><IMG alt=4 src="images/button-view.gif" width=12 height=19></A>
<A href="images/5.jpg"><IMG alt=5 src="images/button-view.gif" width=12 height=19></A>
</SPAN></P>
<!-- project images -->
<DIV id=mask>
<DIV id=images>
<IMG src="images/1.jpg" width=756 height=518><IMG src="images/2.jpg" width=756 height=518><IMG src="images/3.jpg" width=756 height=518><IMG src="images/4.jpg" width=756 height=518><IMG src="images/5.jpg" width=756 height=518></DIV></DIV><!-- project title -->
</DIV></DIV>
</DIV>
</body>
</html>



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


热门标签: 滑动滑过 flash焦点图 焦点图幻灯片 图片滑动 图片轮播

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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