jquery+css3超酷焦点图切换.zip资源-CSDN文库

共23个文件

jpg：16个

js：2个

db：2个

版权申诉

javascript

jQuery

html5

37 浏览量 2022-11-19 19:46:39 上传评论收藏 635KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jquery+css3超酷焦点图切换.zip （23个子文件）

jquery+css3超酷焦点图切换

jiaoben80

images

mlb-switcher.jpg 17KB

old

mlb-1.jpg 71KB

Thumbs.db 14KB

mlb-1-thumb.jpg 3KB

mlb-info.jpg 120KB

mlb-2.jpg 65KB

mlb-5-thumb.jpg 2KB

thumb-over.png 4KB

mlb-3-thumb.jpg 3KB

mlb-5.jpg 56KB

mlb-4-thumb.jpg 3KB

mlb-1.jpg 41KB

mlb-6-thumb.jpg 3KB

Thumbs.db 53KB

mlb-1-thumb.jpg 3KB

mlb-2-thumb.jpg 3KB

mlb-4.jpg 62KB

mlb-6.jpg 59KB

mlb-3.jpg 62KB

index.html 4KB

data.js 2KB

general.js 5KB

screen.css 5KB

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery+css3实现的超酷焦点图片切换效果_网页模板</title> <link rel="stylesheet" href="screen.css" type="text/css" media="screen" /> </head> <body style="width: 98%;"> <div style="width: 815px; margin: 0 auto 0 auto;"> <h1 class="title">MLB.com Flash Content Switcher Recreated with jQuery and CSS3</h1> <p style="text-align: center; font-size: 14px;">This is a demo page of the MLB.com content switcher, 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> <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> <div id="navigation" class="base"> <a href="#" id="prev" class="prev-next"><span><<</span> prev</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> </div> <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> </div> </div> </div> <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"></script> <script type="text/javascript" src="js/general.js"></script> <br> <div style="text-align:center;clear:both"> 适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. <br> 来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a> </div> </body> </html>

评论收藏

内容反馈

版权申诉