jQuery焦点图推送轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery焦点图推送轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Orbit Demo</title>
    <!-- Attach our CSS -->
    <link rel="stylesheet" href="dummy-images/orbit-1.2.3.css">
    <link rel="stylesheet" href="dummy-images/demo-style.css">
    <!-- Attach necessary JS -->
    <script type="text/javascript" src="dummy-images/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="dummy-images/jquery.orbit-1.2.3.min.js"></script>

    <!--[if IE]>
         <style type="text/css">
             .timer { display: none !important; }
             div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
        </style>
    <![endif]-->
    <!-- Run the plugin -->
    <script type="text/javascript">
        $(window).load(function () {
            $('#featured').orbit();
        });
    </script>

</head>
<body>

    <div class="container">
        <h4>ZURB's Orbit Slider</h4>
        <a href="http://www.zurb.com/playground/orbit-jquery-image-slider">View Docs + Playground for Orbit</a>
        <div id="featured">
            <div class="content" style="">
                <h1>Orbit does content now.</h1>
                <h3>Highlight me...I'm text.</h3>
            </div>
            <a href=""><img src="dummy-images/overflow.jpg" /></a>
            <img src="dummy-images/captions.jpg" data-caption="#htmlCaption" />
            <img src="dummy-images/features.jpg" />
        </div>
    </div>
</body>
</html>

JS代码(jquery.orbit-1.2.3.min.js):

/* * jQuery Orbit Plugin 1.2.3 * www.ZURB.com/playground * Copyright 2010,ZURB * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php*/
(function(d){
	d.fn.orbit=function(a){
	a=d.extend({
	animation:"horizontal-push",animationSpeed:600,timer:!0,advanceSpeed:4E3,pauseOnHover:!1,startClockOnMouseOut:!1,startClockOnMouseOutAfter:1E3,directionalNav:!0,captions:!0,captionAnimation:"fade",captionAnimationSpeed:600,bullets:!1,bulletThumbs:!1,bulletThumbLocation:"",afterSlideChange:function(){
}
}
,a);
	return this.each(function(){
	function q(){
	if(!a.timer||a.timer=="false")return!1;
	else r.is(":hidden")?s=setInterval(function(){
	l("next")}
,a.advanceSpeed):(o=!0,x.removeClass("active"),s=setInterval(function(){
	var a="rotate("+m+"deg)";
	m+=2;
	t.css({
	"-webkit-transform":a,"-moz-transform":a,"-o-transform":a}
);
	m>180&&(t.addClass("move"),y.addClass("move"));
	m>360&&(t.removeClass("move"),y.removeClass("move"),m=0,l("next"))}
,a.advanceSpeed/180))}
function n(){
	if(!a.timer||a.timer=="false")return!1;
	else o=!1,clearInterval(s),x.addClass("active")}
function z(){
	if(!a.captions||a.captions=="false")return!1;
	else{
	var c=e.eq(b).data("caption");
	(_captionHTML=d(c).html())?(j.attr("id",c).html(_captionHTML),a.captionAnimation=="none"&&j.show(),a.captionAnimation=="fade"&&j.fadeIn(a.captionAnimationSpeed),a.captionAnimation=="slideOpen"&&j.slideDown(a.captionAnimationSpeed)):(a.captionAnimation=="none"&&j.hide(),a.captionAnimation=="fade"&&j.fadeOut(a.captionAnimationSpeed),a.captionAnimation=="slideOpen"&&j.slideUp(a.captionAnimationSpeed))}
}
function A(){
	if(a.bullets)C.children("li").removeClass("active").eq(b).addClass("active");
	else return!1}
function l(c){
	function d(){
	e.eq(f).css({
	"z-index":1}
);
	u=!1;
	a.afterSlideChange.call(this)}
var f=b,g=c;
	if(f==g)return!1;
	if(e.length=="1")return!1;
	u||(u=!0,c=="next"?(b++,b==p&&(b=0)):c=="prev"?(b--,b<0&&(b=p-1)):(b=c,f<b?g="next":f>b&&(g="prev")),A(),e.eq(f).css({
	"z-index":2}
),a.animation=="fade"&&e.eq(b).css({
	opacity:0,"z-index":3}
).animate({
	opacity:1}
,a.animationSpeed,d),a.animation=="horizontal-slide"&&(g=="next"&&e.eq(b).css({
	left:h,"z-index":3}
).animate({
	left:0}
,a.animationSpeed,d),g=="prev"&&e.eq(b).css({
	left:-h,"z-index":3}
).animate({
	left:0}
,a.animationSpeed,d)),a.animation=="vertical-slide"&&(g=="prev"&&e.eq(b).css({
	top:v,"z-index":3}
).animate({
	top:0}
,a.animationSpeed,d),g=="next"&&e.eq(b).css({
	top:-v,"z-index":3}
).animate({
	top:0}
,a.animationSpeed,d)),a.animation=="horizontal-push"&&(g=="next"&&(e.eq(b).css({
	left:h,"z-index":3}
).animate({
	left:0}
,a.animationSpeed,d),e.eq(f).animate({
	left:-h}
,a.animationSpeed)),g=="prev"&&(e.eq(b).css({
	left:-h,"z-index":3}
).animate({
	left:0}
,a.animationSpeed,d),e.eq(f).animate({
	left:h}
,a.animationSpeed))),z())}
var b=0,p=0,h,v,u,f=d(this).addClass("orbit"),c=f.wrap('<div class="orbit-wrapper" />').parent();
	f.add(h).width("1px").height("1px");
	var e=f.children("img,a,div");
	e.each(function(){
	var a=d(this),b=a.width(),a=a.height();
	b>f.width()&&(f.add(c).width(b),h=f.width());
	a>f.height()&&(f.add(c).height(a),v=f.height());
	p++}
);
	if(e.length==1)a.directionalNav=!1,a.timer=!1,a.bullets=!1;
	e.eq(b).css({
	"z-index":3}
).fadeIn(function(){
	e.css({
	display:"block"}
)}
);
	if(a.timer){
	c.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');
	var r=c.children("div.timer"),o;
	if(r.length!=0){
	var t=d("div.timer span.rotator"),y=d("div.timer span.mask"),x=d("div.timer span.pause"),m=0,s;
	q();
	r.click(function(){
	o?n():q()}
);
	if(a.startClockOnMouseOut){
	var B;
	c.mouseleave(function(){
	B=setTimeout(function(){
	o||q()}
,a.startClockOnMouseOutAfter)}
);
	c.mouseenter(function(){
	clearTimeout(B)}
)}
}
}
a.pauseOnHover&&c.mouseenter(function(){
	n()}
);
	if(a.captions){
	c.append('<div class="orbit-caption"></div>');
	var j=c.children(".orbit-caption");
	z()}
if(a.directionalNav){
	if(a.directionalNav=="false")return!1;
	c.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');
	var k=c.children("div.slider-nav").children("span.left"),w=c.children("div.slider-nav").children("span.right");
	k.click(function(){
	n();
	l("prev")}
);
	w.click(function(){
	n();
	l("next")}
)}
if(a.bullets){
	c.append('<ul class="orbit-bullets"></ul>');
	var C=c.children("ul.orbit-bullets");
	for(i=0;
	i<p;
	i++){
	k=d("<li>"+(i+1)+"</li>");
	if(a.bulletThumbs&&(w=e.eq(i).data("thumb")))k=d('<li class="has-thumb">'+i+"</li>"),k.css({
	background:"url("+a.bulletThumbLocation+w+") no-repeat"}
);
	c.children("ul.orbit-bullets").append(k);
	k.data("index",i);
	k.click(function(){
	n();
	l(d(this).data("index"))}
)}
A()}
}
)}
}
)(jQuery);

CSS代码(orbit-1.2.3.css):

/* CSS for jQuery Orbit Plugin 1.2.3 * www.ZURB.com/playground * Copyright 2010,ZURB * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php/* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY ================================================== */
#featured{width:940px;height:450px;background:#000 url('loading.gif') no-repeat center center;overflow:hidden;}
#featured>img,#featured>div,#featured>a{display:none;}
/* CONTAINER ================================================== */
div.orbit-wrapper{width:1px;height:1px;position:relative;}
div.orbit{width:1px;height:1px;position:relative;overflow:hidden}
div.orbit>img{position:absolute;top:0;left:0;display:none;}
div.orbit>a{border:none;position:absolute;top:0;left:0;line-height:0;display:none;}
.orbit>div{position:absolute;top:0;left:0;width:100%;height:100%;}
/* Note:If your slider only uses content or anchors,you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */
/* TIMER ================================================== */
div.timer{width:40px;height:40px;overflow:hidden;position:absolute;top:10px;right:10px;opacity:.6;cursor:pointer;z-index:1001;}
span.rotator{display:block;width:40px;height:40px;position:absolute;top:0;left:-20px;background:url(rotator-black.png) no-repeat;z-index:3;}
span.mask{display:block;width:20px;height:40px;position:absolute;top:0;right:0;z-index:2;overflow:hidden;}
span.rotator.move{left:0}
span.mask.move{width:40px;left:0;background:url(timer-black.png) repeat 0 0;}
span.pause{display:block;width:40px;height:40px;position:absolute;top:0;left:0;background:url(pause-black.png) no-repeat;z-index:4;opacity:0;}
span.pause.active{background:url(pause-black.png) no-repeat 0 -40px}
div.timer:hover span.pause,span.pause.active{opacity:1}
/* CAPTIONS ================================================== */
.orbit-caption{display:none;font-family:"HelveticaNeue","Helvetica-Neue",Helvetica,Arial,sans-serif;}
.orbit-wrapper .orbit-caption{background:#000;background:rgba(0,0,0,.6);z-index:1000;color:#fff;text-align:center;padding:7px 0;font-size:13px;position:absolute;right:0;bottom:0;width:100%;}
/* DIRECTIONAL NAV ================================================== */
div.slider-nav{display:block}
div.slider-nav span{width:78px;height:100px;text-indent:-9999px;position:absolute;z-index:1000;top:50%;margin-top:-50px;cursor:pointer;}
div.slider-nav span.right{background:url(right-arrow.png);right:0;}
div.slider-nav span.left{background:url(left-arrow.png);left:0;}
/* BULLET NAV ================================================== */
.orbit-bullets{position:absolute;z-index:1000;list-style:none;bottom:-40px;left:50%;margin-left:-50px;padding:0;}
.orbit-bullets li{float:left;margin-left:5px;cursor:pointer;color:#999;text-indent:-9999px;background:url(bullets.jpg) no-repeat 4px 0;width:13px;height:12px;overflow:hidden;}
.orbit-bullets li.active{color:#222;background-position:-8px 0;}
.orbit-bullets li.has-thumb{background:none;width:100px;height:75px;}
.orbit-bullets li.active.has-thumb{background-position:0 0;border-top:2px solid #000;}

附件:下载该文件资源,减少时间成本(增值服务)