以下是 大耳朵JS焦点图广告代码轮播滚动切换特效 的示例演示效果:
部分效果截图:
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="此代码内容为大耳朵JS焦点图广告代码" />
<title>大耳朵JS焦点图广告代码</title>
<link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script src="js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function formatText(index, panel) {
return index + "";
}
$(function () {
$('.anythingSlider').anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 3000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "Go", // Start text
stopText: "Stop", // Stop text
navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
});
$("#slide-jump").click(function(){
$('.anythingSlider').anythingSlider(6);
});
});
</script>
</head>
<body>
<div id="page-wrap">
<h1>AnythingSlider</h1>
<div class="anythingSlider">
<div class="wrapper">
<ul>
<li>
<img src="images/slide-civil-1.jpg" alt="" />
</li>
<li>
<div id="textSlide">
<img src="images/251356.jpg" alt="tomato sandwich" style="float: right; margin: 0 0 2px 10px;" />
<h3>Queenie's Killer Tomato Bagel Sandwich</h3>
<h4>Ingredients</h4>
<ul>
<li>1 bagel, split and toasted</li>
<li>2 tablespoons cream cheese</li>
<li>1 roma (plum) tomatoes, thinly sliced</li>
<li>salt and pepper to taste</li>
<li>4 leaves fresh basil</li>
</ul>
</div>
</li>
<li>
<img src="images/slide-env-1.jpg" alt="" />
</li>
<li>
<img src="images/slide-civil-2.jpg" alt="" />
</li>
<li>
<div id="quoteSlide">
<blockquote>Life is conversational. Web design should be the same way. On the web, you’re talking to someone you’ve probably never met – so it’s important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.</blockquote>
<p> - <a id='perma' href='http://quotesondesign.com/chikezie-ejiasi/'>Chikezie Ejiasi</a></p>
</div>
</li>
<li>
<img src="images/slide-env-2.jpg" alt="" />
</li>
</ul>
</div>
</div> <!-- END AnythingSlider -->
</div>
</body>
</html>JS代码(jquery.easing.1.2.js):
/* * jQuery EasIng v1.1.2 - http://gsgd.co.uk/sandbox/jquery.easIng.php * * Uses the built In easIng capabilities added In jQuery 1.1 * to offer multiple easIng options * * Copyright (c) 2007 George Smith * Licensed under the MIT License:* http://www.opensource.org/licenses/mit-license.php */
// t:current time,b:begInnIng value,c:change In value,d:durationjQuery.extend( jQuery.easing,{
easeInQuad:function (x,t,b,c,d){
return c*(t/=d)*t + b;
}
,easeOutQuad:function (x,t,b,c,d){
return -c *(t/=d)*(t-2) + b;
}
,easeInOutQuad:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
}
,easeInCubic:function (x,t,b,c,d){
return c*(t/=d)*t*t + b;
}
,easeOutCubic:function (x,t,b,c,d){
return c*((t=t/d-1)*t*t + 1) + b;
}
,easeInOutCubic:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
}
,easeInQuart:function (x,t,b,c,d){
return c*(t/=d)*t*t*t + b;
}
,easeOutQuart:function (x,t,b,c,d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
,easeInOutQuart:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
,easeInQuint:function (x,t,b,c,d){
return c*(t/=d)*t*t*t*t + b;
}
,easeOutQuint:function (x,t,b,c,d){
return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
,easeInOutQuint:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
}
,easeInSine:function (x,t,b,c,d){
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
}
,easeOutSine:function (x,t,b,c,d){
return c * Math.sin(t/d * (Math.PI/2)) + b;
}
,easeInOutSine:function (x,t,b,c,d){
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
,easeInExpo:function (x,t,b,c,d){
return (t==0) ? b:c * Math.pow(2,10 * (t/d - 1)) + b;
}
,easeOutExpo:function (x,t,b,c,d){
return (t==d) ? b+c:c * (-Math.pow(2,-10 * t/d) + 1) + b;
}
,easeInOutExpo:function (x,t,b,c,d){
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2,10 * (t - 1)) + b;
return c/2 * (-Math.pow(2,-10 * --t) + 2) + b;
}
,easeInCirc:function (x,t,b,c,d){
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
}
,easeOutCirc:function (x,t,b,c,d){
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
}
,easeInOutCirc:function (x,t,b,c,d){
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
}
,easeInElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d)==1) return b+c;
if (!p) p=d*.3;
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
,easeOutElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d)==1) return b+c;
if (!p) p=d*.3;
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}
,easeInOutElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d/2)==2) return b+c;
if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
}
,easeInBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
}
,easeOutBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
,easeInOutBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
,easeInBounce:function (x,t,b,c,d){
return c - jQuery.easing.easeOutBounce (x,d-t,0,c,d) + b;
}
,easeOutBounce:function (x,t,b,c,d){
if ((t/=d) < (1/2.75)){
return c*(7.5625*t*t) + b;
}
else if (t < (2/2.75)){
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
}
else if (t < (2.5/2.75)){
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
}
else{
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
,easeInOutBounce:function (x,t,b,c,d){
if (t < d/2) return jQuery.easing.easeInBounce (x,t*2,0,c,d) * .5 + b;
return jQuery.easing.easeOutBounce (x,t*2-d,0,c,d) * .5 + c*.5 + b;
}
}
);
CSS代码(page.css):
/* CSS-Tricks Example by Chris Coyier http://css-tricks.com*/
*{margin:0;padding:0;}
body{font:12px Georgia,Serif;}
a,a img{border:0;text-decoration:none;outline:0;}
#page-wrap{width:760px;padding:15px;background:white;margin:0 auto 50px;position:relative;}
#col1{width:49%;float:left;margin:0 0 20px 0;}
#col2{width:49%;float:right;}
h1{font:bold 60px Helvetica,Sans-Serif;letter-spacing:-2px;margin:20px 0;text-align:center;}
h2{font:bold 30px Helvetica,Sans-Serif;letter-spacing:-1px;margin:0 0 10px 0;}
h3{font:16px Georgia,Serif;margin:0 0 10px 0;}
h5{font:15px Georgia,Serif;text-align:center;}
pre{font:13px/1.8 Monaco,MonoSpace;margin:0 0 15px 0;}
ul{margin:0 0 25px 25px;}
ul li{font:15px Georgia,Serif;margin:0 0 8px 0;}
#dl{position:absolute;top:10px;right:0;background:black;color:white;-moz-border-radius:5px;-webkit-border-radius:5px;padding:3px 6px;}
#dl:hover{background:#666;}
/* This stuff is for the TitleBlock Plugin*/
.image{position:relative;margin-bottom:20px;width:100%;}
.image h2{position:absolute;top:220px;left:0;width:100%;}
.image h2 span{color:white;font:bold 30px/40px Helvetica,Sans-Serif;letter-spacing:-1px;background:rgb(0,0,0);background:rgba(0,0,0,0.7);padding:6px 8px;}
.image h2 span.spacer{padding:0 2px;background:none;}
/* For Specific Slides*/
#textSlide{padding:10px 30px;}
#textSlide h3{font:20px Georgia,Serif;}
#textSlide h4{text-transform:uppercase;font:15px Georgia,Serif;margin:10px 0;}
#textSlide ul{list-style:disc;margin:0 0 0 25px;}
#textSlide ul li{display:list-item;}
#quoteSlide{padding:30px;}
#quoteSlide blockquote{font:italic 24px/1.5 Georgia,Serif;text-align:center;color:#444;margin:0 0 10px 0;}
#quoteSlide p{text-align:center;}
CSS代码(slider.css):
/* anythingSlider v1.0 By Chris Coyier:http://css-tricks.com with major improvements by Doug Neiner:http://pixelgraphics.us/ based on work by Remy Sharp:http://jqueryfordesigners.com/*/
.anythingSlider{width:760px;height:360px;position:relative;margin:0 auto 15px;}
.anythingSlider .wrapper{width:680px;overflow:auto;height:341px;margin:0 40px;position:absolute;top:0;left:0;}
.anythingSlider .wrapper ul{width:9999px;list-style:none;position:absolute;top:0;left:0;background:#eee;border-top:3px solid #e0a213;border-bottom:3px solid #e0a213;margin:0;}
.anythingSlider ul li{display:block;float:left;padding:0;height:317px;width:680px;margin:0;}
.anythingSlider .arrow{display:block;height:200px;width:67px;background:url(../images/arrows.png) no-repeat 0 0;text-indent:-9999px;position:absolute;top:65px;cursor:pointer;}
.anythingSlider .forward{background-position:0 0;right:-20px;}
.anythingSlider .back{background-position:-67px 0;left:-20px;}
.anythingSlider .forward:hover{background-position:0 -200px;}
.anythingSlider .back:hover{background-position:-67px -200px;}
#thumbNav{position:relative;top:323px;text-align:center;}
#thumbNav a{color:black;font:11px/18px;Georgia,Serif;display:inline-block;padding:2px 8px;height:18px;margin:0 5px 0 0;background:#c58b04 url(../images/cellshade.png) repeat-x;text-align:center;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;}
#thumbNav a:hover{background-image:none;}
#thumbNav a.cur{background:#e0a213;}
#start-stop{background:green;background-image:url(../images/cellshade.png);background-repeat:repeat-x;color:white;padding:2px 5px;width:40px;text-align:center;position:absolute;right:45px;top:323px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;}
#start-stop.playing{background-color:red;}
#start-stop:hover{background-image:none;}
/* Prevents*/
.anythingSlider .wrapper ul ul{position:static;margin:0;background:none;overflow:visible;width:auto;border:0;}
.anythingSlider .wrapper ul ul li{float:none;height:auto;width:auto;background:none;}
分享到QQ
分享到微博
微信扫一扫
