<!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=UTF-8" />
<title>Featured Content Slider</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
<script type="text/javascript">
var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;
theInterval = function(cur){
clearInterval(theInt);
if( typeof cur != 'undefined' )
curclicked = cur;
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
theInt = setInterval(function(){
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
curclicked++;
if( 6 == curclicked )
curclicked = 0;
}, 3000);
};
$(function(){
$("#main-photo-slider").codaSlider();
$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");
$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});
theInterval();
});
</script>
</head>
<body>
<div id="page-wrap">
<div class="slider-wrap">
<div id="main-photo-slider" class="csw">
<div class="panelContainer">
<div class="panel" title="Panel 1">
<div class="wrapper">
<img src="images/tempphoto-1.jpg" alt="temp" />
<div class="photo-meta-data">
Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />
<span>"Free Tibet" Protest at the Olympic Torch Rally</span>
</div>
</div>
</div>
<div class="panel" title="Panel 2">
<div class="wrapper">
<img src="images/tempphoto-2.jpg" alt="temp" />
<div class="photo-meta-data">
Chicago Bears at Seattle Seahawks<br />
<span>Fifth field goal, overtime win for the Seahawks</span>
</div>
</div>
</div>
<div class="panel" title="Panel 3">
<div class="wrapper">
<img src="images/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/>
<h1>How to Cook a Scotch Egg</h1>
<ul>
<li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li>
<li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li>
<li>1/2 cup AP flour</li>
<li>1-2 eggs, beaten</li>
<li>3/4 cup panko-style bread crumbs</li>
<li>Vegetable oil for frying</li>
</ul>
</div>
</div>
<div class="panel" title="Panel 4">
<div class="wrapper">
<img src="images/tempphoto-4.jpg" alt="temp" />
<div class="photo-meta-data">
A Poem by Shel Silverstein<br />
<span>Falling Up</span>
</div>
</div>
</div>
<div class="panel" title="Panel 5">
<div class="wrapper">
<img src="images/tempphoto-5.jpg" alt="temp" />
<div class="photo-meta-data">
New Video on CSS-Tricks<br />
<span>Using Wufoo for Web Forms</span>
</div>
</div>
</div>
<div class="panel" title="Panel 6">
<div class="wrapper">
<h1>A Tale of Two Cities</h1>
<p><em>Charles Dickins</em></p>
<blockquote>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to heaven, we were all going direct the other way - in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.</blockquote>
</div>
</div>
</div>
</div>
<a href="#1" class="cross-link active-thumb"><img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>
<div id="movers-row">
<div><a href="#2" class="cross-link"><img src="images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#3" class="cross-link"><img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#4" class="cross-link"><img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#5" class="cross-link"><img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#6" class="cross-link"><img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
</div>
</div>
</div>
</body>
</html>
基于jQuery的带缩略图左右滚动型图片切换.zip （28个子文件） 
132677803687145506 likecs.com_132677803728475118 FeaturedContentSlider __MACOSX FeaturedContentSlider images js FeaturedContentSlider images 
thumb-video-2.jpg 2KB thumb-video-3.jpg 4KB tempphoto-2thumb.jpg 2KB tempphoto-1.jpg 54KB tempphoto-3thumb.jpg 1KB tempphoto-4thumb.jpg 1KB
bg.png 3KB tempphoto-2.jpg 36KB tempphoto-6.jpg 28KB tempphoto-3.jpg 37KB tempphoto-4.jpg 20KB scotch-egg.jpg 19KB tempphoto-5.jpg 39KB tempphoto-1thumb.jpg 2KB thumb-author.jpg 1KB transpBlack.png 121B tempphoto-6thumb.jpg 1KB tempphoto-5thumb.jpg 1KB icon-uparrowsmallwhite.png 169B thumb-video-1.jpg 1KB
index.html 5KB js 
coda-slider.1.1.1.pack.js 2KB jquery-easing-compatibility.1.2.pack.js 2KB jquery-1.2.6.min.js 55KB ycodaslider-2.0.pack.js 4KB jquery-easing-1.3.pack.js 7KB featured content bg.psd 529KB style.css 2KB资源评论
毕业_设计
- 粉丝: 1974
- 资源: 1万+
最新资源
- 梦幻西游道人20241105j
- 采用JavaFx编写的加解密工具完整源码
- ventoy，linux环境，安装系统必备软件
- 基于 Javascript 实现的图像裁剪，图像缩放(最邻近插值，双线性差值，三次卷积插值)，图像滤镜（灰度，模糊，锐化，卡通）
- 基于java的高校固定资产管理系统【程序员VIP专用】.zip
- S14英雄联盟全球总决赛B站直播弹幕
- 基于javafx+swing实现桌面应用记事本项目(完整的项目，包含源码和素材)
- 新年年会抽奖券批量打印工具ver2.07 -2024.xlsm
- 代码公示-CSP-J2-S2-2024-已解密.zip
- 基于javaFx+swing开发桌球小游戏项目(完整的项目，包含源码和素材)
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
