以下是 jquery多功能焦点图轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.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="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jquery多功能焦点图代码，属于站长常用代码" />
<title>jquery多功能焦点图代码</title>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
</head>
<body>
<div style="width: 815px; margin: 0 auto 0 auto;">
<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>Web Design appreciation-CSS website design-flash site www.u14.cc</p>
</div><!-- thumbs -->
<div id="navigation" class="base">
<a href="#" id="prev" class="prev-next"><span><<</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>>></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="#">Web Design appreciation-CSS website design-flash</a></h1>
<p id="long-desc">Web Design appreciation - CSS website design - flash site Web Design appreciation - CSS website design - flash site
</p>
</div><!-- description -->
</div><!-- base -->
</div><!-- mlb wrapper -->
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></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>
</body>
</html>JS代码(data.js):
// This section begins the data held in the "objMLB" object// Normally,this would be in a database and would be available via Ajax or some other methodvar currentItem = 1,objMLB ={
headlineText:["Perfect prescription:History for Doc in Miami","Thome moves up list on homer-happy afternoon","Among mound masters,Rays' Davis stands out","Extra-inning wins cap sweeps for O's,Rangers","Just add votes:Time to fill in 2010 All-Star ballot","MLB Tonight is there six days a week,all season"],// headlineTextsmallCaption:["Roy Halladay struck out 11 Marlins batters and threw 115 pitches Saturday.","Thome had one of 20 Twins hits;
Soriano,Ethier and Ramirez each drove in four runs. (AP)","Davis yielded three hits;
Carpenter fanned eight;
Verlander went 8 1/3;
Chacin allowed one hit. (AP)","Ty Wigginton doubled in Nick Markakis to win it;
David Murphy's sac fly put Texas on top. (AP)","In the American League,14 first basemen are competing to start in the 81st All-Star Game.","MLB Network delves into the major baseball issues weeknights at 6 p.m. ET and Sundays at 5 p.m."],// smallCaptiondescText:["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.","Jim Thome hit his 569th home run to move into a tie for 11th place all-time. Alfonso Soriano,Andre Ethier and Hanley Ramirez each hit two long balls to cap their sizzling weekends.","Detroit's Justin Verlander,St. Louis' Chris Carpenter and Colorado's Jhoulys Chacin all threw gems Sunday. But Tampa Bay's Wade Davis outdueled Zack Greinke in a tight 1-0 win.","Ty Wigginton's double in the 10th made the Orioles walk-off winners,3-2,to sweep the Red Sox. The Rangers tied the Mariners in the ninth and won,3-1,on a sac fly and passed ball in the 11th.","The 2010 All-Star Game Sprint Online Ballot is in midseason form. Cast up to 25 ballots per email address to help choose 17 starters for the July 13 game at Angel Stadium.","MLB Tonight is at full speed,with look-ins,analysis,news and highlights from around baseball. Tune in to MLB Network weeknights and Sundays from 5-7 p.m. ET for the action."],// descTextextURL:["#1","#2","#3","#4","#5","#6"] // descText}
;
// objMLB ends hereCSS代码(screen.css):
html,body,div,span,applet,object,iframe,code,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,del,dfn,font,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;font-family:inherit;text-align:left;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul{list-style:none;}
q:before,q:after,blockquote:before,blockquote:after{content:"";}
html{margin:0;padding:0;width:100%;text-align:center;background:#fff;}
body{font-family:Arial,Helvetica,sans-serif;font-size:13px;width:100%;margin:auto;color:#5e5e5d;}
h1.title{text-align:center;padding:20px;}
#mlb-wrapper{width:815px;padding:20px 0 0 0;}
.base{margin:0 auto;width:480px;text-align:center;position:relative;}
#photo{width:480px;height:270px;overflow:hidden;}
#photo ul{margin-left:0;width:2880px;}
#photo ul li{display:block;float:left;}
#photo img{display:block;}
#details{border:solid 1px #ccc;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding:3px;}
#hover-box{height:23px;margin-top:-23px;position:relative;z-index:30;}
#thumbs{position:absolute;height:61px;background-color:#444;background:rgba(0,0,0,.7);padding:3px 0 0 0;bottom:0;opacity:0;display:none;}
#thumbs ul{width:480px;margin:0 auto;}
#thumbs ul li{display:inline-block;float:left;padding:0 2px 0 2px;}
#thumbs p{color:#fff;font-size:9px;padding:2px 5px 5px 5px;letter-spacing:normal;font-family:Arial,Helvetica,sans-serif;clear:both;}
#thumbs img{border:solid 1px #fff;position:relative;z-index:1;}
#thumbs a.highlight img{border:solid 1px #ff9933;}
#thumbs ul li a:link,#thumbs ul li a:visited{position:relative;display:block;outline:none;}
#thumbs ul li a span{display:block;width:64px;height:31px;border:solid 5px #fff;opacity:.68;filter:alpha(opacity=68);position:absolute;z-index:20;top:1px;left:1px;}
#thumbs ul li a.highlight span{border-color:#ff9933;opacity:.6;}
#navigation{background-color:#444;background:rgba(0,0,0,.5);height:23px;width:480px;z-index:1;position:absolute;bottom:0;}
#navigation ul{width:120px;float:left;margin:0 0 0 142px;display:inline;}
#navigation ul li{width:20px;float:left;padding:5px 0 0 0;}
#navigation a:link,#navigation a:visited{font-size:10px;text-decoration:none;color:#fff;outline:none;}
#navigation a:hover,#navigation a:focus{color:#ff9933;background:none;}
#navigation ul li a:hover,#navigation ul li a:focus{background:rgba(255,255,255,.5);}
#navigation ul li a.highlight:hover,#navigation ul li a.highlight:focus{background:rgba(255,153,51,.5);}
#navigation ul li a.highlight:link,#navigation ul li a.highlight:visited{border-color:#ff9933;background:#ff9933;}
#navigation ul li a:link,#navigation ul li a:visited{display:block;float:left;width:8px;height:8px;border:solid 3px #fff;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;text-indent:-9999em;overflow:hidden;}
a.play,a.play:link,a.play:visited{display:block;width:14px;height:14px;background:transparent url(../images/play-pause.gif) no-repeat 0 -14px;text-indent:-9999em;overflow:hidden;position:absolute;top:5px;left:160px;}
a.pause,a.pause:link,a.pause:visited{background-position:0 0;}
#navigation a.play:hover,#navigation a.play:focus{background:transparent url(../images/play-pause.gif) no-repeat 0 -14px;}
#navigation a.pause:hover,#navigation a.pause:focus{background:transparent url(../images/play-pause.gif) no-repeat 0 0;}
#prev{float:left;padding:0 0 0 5px;}
#next{float:right;padding:0 5px 0 0;}
#prev a:link,#prev a:visited{background:none;}
#next a:link,#next a:visited{background:none;}
#navigation a span{font-size:6px;font-family:Verdana,Arial,Helvetica,sans-serif;line-height:24px;}
#description{padding:1px 0 0 0;}
p#small-caption{font-size:10px;color:#333;line-height:11px;padding:0 0 0 4px;background-image:-moz-linear-gradient(top,#d3d3d3,#f4f4f4);/* FF3.6 */
background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0,#f4f4f4),color-stop(1,#d3d3d3));/* Saf4+,Chrome */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4',endColorstr='#d3d3d3');/* IE6,IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4',endColorstr='#d3d3d3')";/* IE8+ */
zoom:1;}
#title a:link,#title a:visited{font-size:19px;color:#c00;text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-weight:bold;line-height:34px;}
#title a:hover,#title a:focus{text-decoration:underline;}
#long-desc{font-size:10px;}
分享到QQ
分享到微博
微信扫一扫
