以下是 带指针和缩略图的横向焦点图代码轮播滚动切换特效 的示例演示效果:
部分效果截图:
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="此代码内容为带指针和缩略图的横向焦点图代码" />
<title>带指针和缩略图的横向焦点图代码</title>
<link rel="stylesheet" type="text/css" href="css/lrtk.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>
</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">
A Poem by Shel Silverstein <br />
<span>Falling Up</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>
<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>
</body>
</html>JS代码(ycodaslider-2.0.pack.js):
/* * * YCodaSlider plugin 2.0 * $Date:2008-05-11 23:22:34 +0200 (dom,11 mag 2008) $ * @requires jQuery v1.2.3 * @optional Easing v1.3 * @optional Easing v1.3 * * Copyright (c) 2008 Massimiliano Balestrieri * Examples and docs at:http://maxb.net/blog/ * Licensed GPL licenses:* http://www.gnu.org/licenses/gpl.html * * Based on http://www.ndoherty.com/coda-slider of Niall Doherty * Inspired by the clever folks at http://www.panic.com/coda * Many thanks to Gian Carlo Mingati. Coda-Slider is a heavily modified version of his slideViewer,which can be found at http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html * */
eval(function(p,a,c,k,e,r){
e=function(c){
return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
if(!''.replace(/^/,String)){
while(c--)r[e(c)]=k[c]||e(c);
k=[function(e){
return r[e]}
];
e=function(){
return'\\w+'}
;
c=1}
;
while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);
return p}
('4(9(){
4("7.5-C").1m(\'<p q="18"><1E /><1x /></p>\')}
);
h(!1l.f)j f={
}
;
f.k={
A:0,F:9(a){
h(f.k.A==0)4(\'1D\').R(\'<1w 1v="1s/F" E="\'+a+\'" 1k="1h" 1f="1e" />\')}
,1d:9(c){
c=4.1O({
1K:Z}
,c);
X g.J(9(a){
f.k.A++;
f.k.17(g,c);
j b=4(g).8().8().8().1F(0);
b.3={
}
;
b.3.w=c||{
}
;
h(g.y)b.3.y=g.y;
f.k.14(b);
f.k.13(b);
f.k.6(b);
f.k.l(b);
f.k.15(b);
f.k.16(b)}
)}
,17:9(a,b){
4(a).t("5-C").o("5-B");
4(a).G(\'<7 q="5-1i" 1g="5-\'+f.k.A+\'">\');
4(a).G(\'<7 q="5-G">\');
4(a).G(\'<7 q="5-C">\');
j c=4(".5-12",a);
h(c.11()>0)c.G(\'<7 q="5-H">\')}
,13:9(a){
j b=4("7.5-B",a);
a.3.v=b.i("7.5-H").N();
a.3.m=b.i("7.5-H").11();
a.3.1c=a.3.v*a.3.m;
a.3.M=a.3.m*2;
b.F("N",a.3.1c)}
,14:9(a){
4("p.18",a).1M();
4("7.5-C",a).t("5-C").o("5-1a")}
,6:9(a){
h(s.r&&Y(s.r.L(1))<=a.3.m){
a.3.6=Y(s.r.L(1));
a.3.A=-(a.3.v*(a.3.6-1));
4(a).i("7.5-B").F({
"K":a.3.A}
)}
u{
a.3.6=1}
}
,l:9(b){
j c=4("7.5-1a",b);
c.19(\'<7 q="5-W"><a E="#">1J</a></7>\');
c.1I(\'<7 q="5-V"><a E="#">1G</a></7>\');
c.19(\'<7 q="5-l"><U><\\/U></7>\');
j d=4("7.5-l U",b);
j e=4("7.5-H",b);
e.J(9(n){
j a=4("7.5-12",g).1C("1B");
h(a)d.R(\'<x><a E="#\'+(n+1)+\'">\'+a+\'</a></x>\');
u d.R(\'<x><a E="#\'+(n+1)+\'">\'+(n+1)+\'</a></x>\')}
);
d.i("x").J(9(a){
b.3.M+=4(g).N()}
);
d.8().F("N",b.3.M)}
,15:9(b){
4("7.5-l a",b).J(9(z){
b.3.M+=1A;
4(g).1z("D",9(){
4(g).o("6").8().8().i("a").1y(4(g)).t("6");
j a=-(b.3.v*z);
b.3.6=z+1;
h(b.3.y)f.Q.10(b,(b.3.6-1),b.3.m);
4("7.5-B",b).P({
K:a}
,b.3.w.T,b.3.w.O)}
)}
);
4("7.5-W a",b).D(9(){
h(b.3.6==1){
j a=-(b.3.v*(b.3.m-1));
b.3.6=b.3.m;
4(g).8().8().i("7.5-l a.6").t("6").8().8().i("x:1u a").o("6")}
u{
b.3.6-=1;
j a=-(b.3.v*(b.3.6-1));
4(g).8().8().i("7.5-l a.6").t("6").8().1t().i("a").o("6")}
;
h(b.3.y)f.Q.10(b,(b.3.6-1),b.3.m);
4(g).8().8().i("7.5-B").P({
K:a}
,b.3.w.T,b.3.w.O);
s.r=b.3.6;
X Z}
);
4("7.5-V a",b).D(9(){
h(b.3.6==b.3.m){
j a=0;
b.3.6=1;
4(g).8().8().i("7.5-l a.6").t("6").8().8().i("a:S(0)").o("6")}
u{
j a=-(b.3.v*b.3.6);
b.3.6+=1;
4(g).8().8().i("7.5-l a.6").t("6").8().1r().i("a").o("6")}
;
h(b.3.y)f.Q.10(b,(b.3.6-1),b.3.m);
4(g).8().8().i("7.5-B").P({
K:a}
,b.3.w.T,b.3.w.O);
s.r=b.3.6;
X Z}
);
4(1q).1p(9(e){
h(e==1H){
I=1o.1n}
u{
I=e.1L}
h(I==1j){
4("7.5-W a",b).1b("D",b)}
u h(I==1N){
4("7.5-V a",b).1b("D",b)}
}
)}
,16:9(a){
h(s.r&&Y(s.r.L(1))<=a.3.m){
4("7.5-l a:S("+(s.r.L(1)-1)+")",a).o("6")}
u{
4("7.5-l a:S(0)",a).o("6")}
}
}
;
4.1P.3=f.k.1d;
',62,114,'|||ycodaslider|jQuery|yslider|current|div|parent|function||||||YCodaSlider|this|if|find|var|Base|nav|pc||addClass||class|hash|location|removeClass|else|pw|options|li|lazy||cnt|container|toggle|click|href|css|wrap|panel|keycode|each|left|slice|nw|width|easeFunc|animate|Lazy|append|eq|easeTime|ul|navr|navl|return|parseInt|false|lazyload|size|panelwrapper|count|init|bindings|defaults|gui|loading|before|viewer|trigger|vw|build|screen|media|id|stylesheet|body|190|rel|window|prepend|keyCode|event|keydown|document|next|text|prev|last|type|link|span|not|bind|80|title|attr|head|br|get|Right|null|after|Left|height|which|remove|188|extend|fn'.split('|'),0,{
}
))CSS代码(lrtk.css):
/*Featured Content Sliderby:Chris Coyier*/
*{margin:0;padding:0;}
/*UTILITY STYLES*/
.floatLeft{float:left;margin-right:10px;}
.floatRight{float:right;}
.clear{clear:both;}
a{outline:none;}
/*PAGE STRUCTURE*/
#page-wrap{width:500px;margin:0 auto;position:relative;min-height:500px;background:url(../images/bg.png) top center;}
/*TYPOGRAPHY*/
ul{list-style:square inside;}
a,a:visited{text-decoration:none;}
blockquote{padding:0 20px;margin-left:20px;border-left:20px solid #ccc;font-size:14px;font-family:Georgia,serif;font-style:italic;margin-top:10px;}
/*SLIDER*/
.slider-wrap{width:419px;position:absolute;top:87px;left:40px;}
.stripViewer .panelContainer.panel ul{text-align:left;margin:0 15px 0 30px;}
.stripViewer{position:relative;overflow:hidden;width:419px;height:285px;}
.stripViewer .panelContainer{position:relative;left:0;top:0;}
.stripViewer .panelContainer .panel{float:left;height:100%;position:relative;width:419px;}
.stripNavL,.stripNavR,.stripNav{display:none;}
.nav-thumb{border:1px solid black;margin-right:5px;}
#movers-row{margin:-43px 0 0 62px;}
#movers-row div{width:20%;float:left;}
#movers-row div a.cross-link{float:right;}
.photo-meta-data{background:url(../images/transpBlack.png);padding:10px;height:30px;margin-top:-50px;position:relative;z-index:9999;color:white;}
.photo-meta-data span{font-size:13px;}
.cross-link{display:block;width:62px;margin-top:-14px;position:relative;padding-top:15px;z-index:9999;}
.active-thumb{background:transparent url(../images/icon-uparrowsmallwhite.png) top center no-repeat;}
分享到QQ
分享到微博
微信扫一扫
