利用jQuery HTML5实现全屏带音乐焦点广告



46 180 61



特效描述:利用jQuery HTML5实现 全屏带音乐 焦点广告,利用jQuery HTML5实现全屏带音乐焦点广告

代码结构

1. 引入CSS

<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />

2. 引入JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js?ver=1.4.0"></script>
<script type="text/javascript" src="js/data.js?v=2.0"></script>
<script type="text/javascript" src="js/general.js?v=2.0"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js?ver=1.4.0"></script>
<script type="text/javascript" src="js/data.js?v=2.0"></script>
<script type="text/javascript" src="js/general.js?v=2.0"></script>

3. HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
</head>
<body style="width: 98%;">
<div style="width: 815px; margin: 0 auto 0 auto;">
<h1 class="title">&#22522;&#20110;jQuery&#21644;CSS3&#21046;&#20316;&#30340;&#20869;&#23481;&#21464;&#25442;&#28966;&#28857;&#24191;&#21578;</h1>
<p style="text-align: center; font-size: 14px;">This is a demo page, recreated using jQuery and CSS3.</p>
	<div id="mlb-wrapper">
		<div id="details" class="base">	
			<div id="photo" class="base">
			<ul id="photos">
				<li><a href="#1"><img src="images/mlb-1.jpg" alt="Caption 1" width="480" height="270" /></a></li>
				<li><a href="#2"><img src="images/mlb-2.jpg" alt="Caption 2" width="480" height="270" /></a></li>
				<li><a href="#3"><img src="images/mlb-3.jpg" alt="Caption 3" width="480" height="270" /></a></li>
				<li><a href="#4"><img src="images/mlb-4.jpg" alt="Caption 4" width="480" height="270" /></a></li>
				<li><a href="#5"><img src="images/mlb-5.jpg" alt="Caption 5" width="480" height="270" /></a></li>
				<li><a href="#6"><img src="images/mlb-6.jpg" alt="Caption 6" width="480" height="270" /></a></li>
			</ul>
			</div><!-- photo ends -->
			<div id="hover-box">
				<div id="thumbs" class="base">
				<ul>
					<li><a href="#1" class="highlight"><img src="images/mlb-1-thumb.jpg" alt="Caption 1" width="74" height="41" /><span></span></a></li>
					<li><a href="#2"><img src="images/mlb-2-thumb.jpg" alt="Caption 2" width="74" height="41" /></a></li>
					<li><a href="#3"><img src="images/mlb-3-thumb.jpg" alt="Caption 3" width="74" height="41" /></a></li>
					<li><a href="#4"><img src="images/mlb-4-thumb.jpg" alt="Caption 4" width="74" height="41" /></a></li>
					<li><a href="#5"><img src="images/mlb-5-thumb.jpg" alt="Caption 5" width="74" height="41" /></a></li>
					<li><a href="#6"><img src="images/mlb-6-thumb.jpg" alt="Caption 6" width="74" height="41" /></a></li>
				</ul>
				<p>Roy Halladay struck out 11 Marlins batters and threw 115 pitches Saturday.</p>
				</div><!-- thumbs -->
				<div id="navigation" class="base">
				<a href="#" id="prev" class="prev-next"><span>&lt;&lt;</span> prev</a>
				<a href="#" id="play-pause" class="play pause" title="Play or Pause the slider">Play/Pause</a>
				<ul>
					<li><a href="#1" class="highlight">Story 1</a></li>
					<li><a href="#2">Story 2</a></li>
					<li><a href="#3">Story 3</a></li>
					<li><a href="#4">Story 4</a></li>
					<li><a href="#5">Story 5</a></li>
					<li><a href="#6">Story 6</a></li>
				</ul>
				<a href="#" id="next" class="prev-next">next <span>&gt;&gt;</span></a>
				</div><!-- navigation -->
			</div><!-- hover box -->
			<div id="description" class="base">
				<p id="small-caption">Roy Halladay struck out 11 Marlins batters and threw 115 pitches Saturday.</p>
				<h1 id="title"><a href="#">Perfect prescription: History for Doc in Miami</a></h1>
				<p id="long-desc">Phillies ace Roy Halladay made history in Miami on Saturday, tossing the 20th perfect game in MLB history vs. the Marlins in a 1-0 win. It was the first no-hitter of Halladay's brilliant career.</p>
			</div><!-- description -->
		</div><!-- base -->
	</div><!-- mlb wrapper -->
</div>
<!-- google analytics is below -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-1965499-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>



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


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 flash焦点图 flash幻灯片 flashbanner flash图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 焦点图 幻灯片 轮播图 bar焦点图 图片切换 图片选项卡 图标选项卡 纯图片轮播 图片轮播

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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