360随身WiFi官网jQ焦点图轮播滚动切换特效代码

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

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

以下是 360随身WiFi官网jQ焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>360随身WiFi官网jQuery焦点图</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css">
<style>
    body{
        font-family:'Microsoft Yahei';
        background-color:#eeeeee;
    }

    
    .slide-wp{
        width:1900px; 
        height:460px; 
        position:relative; 
        left:50%; 
        margin-left:-950px;
    }
    .slides, .slide-bg{
        height:460px; 
        background-color:#fff; 
        overflow-x:hidden;
    }
    .slidesjs-pagination{
        position:absolute;
        top:420px;
        left:50%;
        z-index:11;
        margin-left:-52px;
    }
    .slidesjs-pagination li{
        float:left;
        margin-right:10px;
    }
    .slidesjs-pagination li a{
        text-indent:-9999px;
        background-color:#333;
        display:inline-block;
        *display:block;
        _display:block;
        width:25px;
        height:7px;
    }
    .slidesjs-pagination li a.active{
        background-color:#666;
    }
    .slideChild{
        width:945px;
        margin:0 auto;
        z-index:10;
        height:460px;
        position:relative;
    }
    .slideChild a.opa{
        position:absolute;
        top:0;
        left:0;
        display:inline-block;
        *display:block;
        _display:block;
        width:100px;
        height:50px;
        background-color:#fff;
        filter:alpha(opacity=0); 
        -ms-filter:"alpha(opacity=0)"; 
        opacity:0;
    }
    .slideChild a.a-jd{
        top:320px;
        left:135px;
        width:230px;
        height:55px;
    }
    .slideChild a.a-video{
        top:50px;
        left:40px;
        width:230px;
        height:285px;
    }
    .slideChild a.a-ad{
        position:absolute;
        background-color:#202020;
        color:#fff;
        text-align:center;
        top:365px;
        left:404px;
        width:130px;
        height:32px;
        line-height:32px;
        font-size:16px;
    }
    .slideChild span.timeTip{
        color:#fbd504;
        font-size:56px;
        position:absolute;
        top:165px;
        left:170px;
        font-weight:bold;
    }
    .slideImg{
        position:absolute;
        top:0;
        left:0;
        z-index:9;
    }


</style>
</head>
<body>
<br>
<div class="slide-bg">
	<div class="slide-wp">
        <div id="slides" class="slides">
            <div>
                <div class="slideChild" style="display:none;">
                    <span class="timeTip">7月18日 11:00准时开启</span>
                    <a class="a-ad js-aAd" href="#">预订查询&gt;&gt;</a>
                </div>
                <img class="slideImg" src="images/t01746f5ad67139695c.jpg" galleryimg="no">
            </div>
            <div>
                <div class="slideChild">
                    <a class="a-jd opa js-aJd" href="#"></a>
                </div>
        	    <img class="slideImg" src="images/t01ad48eb0945669efd.jpg" galleryimg="no">
            </div>
            <div>
                <div class="slideChild">
                    <a class="a-video opa js-aVideo" href="#" target="_blank"></a>
                </div>
        	    <img class="slideImg" src="images/t010065ee4026733ca0.jpg" galleryimg="no">
            </div>
        </div><!--end slides-->
    </div><!--end slide-wp-->
</div><!--end slide-bg-->
<div class="uptop"><a href="#"></a></div><!--end top-->
<script src="js/181.js"></script>
<script src="js/jquery.slides.min.js"></script>
<script>
$(function() {
	$('#slides').slidesjs({
		play:{
			active: false,
			effect: "fade",
			auto: true,
			interval: 4000
		},
		effect: {
			fade: {
			speed: 1500,
			crossfade: true
			}
		},
		pagination: {
			active: true
		},
		navigation:{
			active: false
		}
	});
});

</script>
</body>
</html>

JS代码(jquery.slides.min.js):

/* SlidesJS 3.0.3 http://slidesjs.com (c) 2013 by Nathan Searles http://nathansearles.com Updated:March 15th,2013 Apache License:http://www.apache.org/licenses/LICENSE-2.0*/
(function(){
	(function(a,b,c){
	var d,e,f;
	return f="slidesjs",e={
	width:940,height:528,start:1,navigation:{
	active:!0,effect:"slide"}
,pagination:{
	active:!0,effect:"slide"}
,play:{
	active:!1,effect:"slide",interval:5e3,auto:!1,swap:!0,pauseOnHover:!1,restartDelay:2500}
,effect:{
	slide:{
	speed:500}
,fade:{
	speed:300,crossfade:!0}
}
,callback:{
	loaded:function(){
}
,start:function(){
}
,complete:function(){
}
}
}
,d=function(){
	function b(b,c){
	this.element=b,this.options=a.extend(!0,{
}
,e,c),this._defaults=e,this._name=f,this.init()}
return b}
(),d.prototype.init=function(){
	var c,d,e,f,g,h,i=this;
	return c=a(this.element),this.data=a.data(this),a.data(this,"animating",!1),a.data(this,"total",c.children().not(".slidesjs-navigation",c).length),a.data(this,"current",this.options.start-1),a.data(this,"vendorPrefix",this._getVendorPrefix()),"undefined"!=typeof TouchEvent&&(a.data(this,"touch",!0),this.options.effect.slide.speed=this.options.effect.slide.speed/2),c.css({
	overflow:"hidden"}
),c.slidesContainer=c.children().not(".slidesjs-navigation",c).wrapAll("<div class='slidesjs-container'>",c).parent().css({
	overflow:"hidden",position:"relative"}
),a(".slidesjs-container",c).wrapInner("<div class='slidesjs-control'>",c).children(),a(".slidesjs-control",c).css({
	position:"relative",left:0}
),a(".slidesjs-control",c).children().addClass("slidesjs-slide").css({
	position:"absolute",top:0,left:0,width:"100%",zIndex:0,display:"none",webkitBackfaceVisibility:"hidden"}
),a.each(a(".slidesjs-control",c).children(),function(b){
	var c;
	return c=a(this),c.attr("slidesjs-index",b)}
),this.data.touch&&(a(".slidesjs-control",c).on("touchstart",function(a){
	return i._touchstart(a)}
),a(".slidesjs-control",c).on("touchmove",function(a){
	return i._touchmove(a)}
),a(".slidesjs-control",c).on("touchend",function(a){
	return i._touchend(a)}
)),c.fadeIn(0),this.update(),this.data.touch&&this._setuptouch(),a(".slidesjs-control",c).children(":eq("+this.data.current+")").eq(0).fadeIn(0,function(){
	return a(this).css({
	zIndex:10}
)}
),this.options.navigation.active&&(g=a("<a>",{
	"class":"slidesjs-previous slidesjs-navigation",href:"#",title:"Previous",text:"Previous"}
).appendTo(c),d=a("<a>",{
	"class":"slidesjs-next slidesjs-navigation",href:"#",title:"Next",text:"Next"}
).appendTo(c)),a(".slidesjs-next",c).click(function(a){
	return a.preventDefault(),i.stop(!0),i.next(i.options.navigation.effect)}
),a(".slidesjs-previous",c).click(function(a){
	return a.preventDefault(),i.stop(!0),i.previous(i.options.navigation.effect)}
),this.options.play.active&&(f=a("<a>",{
	"class":"slidesjs-play slidesjs-navigation",href:"#",title:"Play",text:"Play"}
).appendTo(c),h=a("<a>",{
	"class":"slidesjs-stop slidesjs-navigation",href:"#",title:"Stop",text:"Stop"}
).appendTo(c),f.click(function(a){
	return a.preventDefault(),i.play(!0)}
),h.click(function(a){
	return a.preventDefault(),i.stop(!0)}
),this.options.play.swap&&h.css({
	display:"none"}
)),this.options.pagination.active&&(e=a("<ul>",{
	"class":"slidesjs-pagination"}
).appendTo(c),a.each(Array(this.data.total),function(b){
	var c,d;
	return c=a("<li>",{
	"class":"slidesjs-pagination-item"}
).appendTo(e),d=a("<a>",{
	href:"#","data-slidesjs-item":b,html:b+1}
).appendTo(c),d.click(function(b){
	return b.preventDefault(),i.stop(!0),i.goto(1*a(b.currentTarget).attr("data-slidesjs-item")+1)}
)}
)),a(b).bind("resize",function(){
	return i.update()}
),this._setActive(),this.options.play.auto&&this.play(),this.options.callback.loaded(this.options.start)}
,d.prototype._setActive=function(b){
	var c,d;
	return c=a(this.element),this.data=a.data(this),d=b>-1?b:this.data.current,a(".active",c).removeClass("active"),a("li:eq("+d+") a",c).addClass("active")}
,d.prototype.update=function(){
	var b,c,d;
	return b=a(this.element),this.data=a.data(this),a(".slidesjs-control",b).children(":not(:eq("+this.data.current+"))").css({
	display:"none",left:0,zIndex:0}
),d=b.width(),c=this.options.height/this.options.width*d,this.options.width=d,this.options.height=c,a(".slidesjs-control,.slidesjs-container",b).css({
	width:d,height:c}
)}
,d.prototype.next=function(b){
	var c;
	return c=a(this.element),this.data=a.data(this),a.data(this,"direction","next"),void 0===b&&(b=this.options.navigation.effect),"fade"===b?this._fade():this._slide()}
,d.prototype.previous=function(b){
	var c;
	return c=a(this.element),this.data=a.data(this),a.data(this,"direction","previous"),void 0===b&&(b=this.options.navigation.effect),"fade"===b?this._fade():this._slide()}
,d.prototype.goto=function(b){
	var c,d;
	if(c=a(this.element),this.data=a.data(this),void 0===d&&(d=this.options.pagination.effect),b>this.data.total?b=this.data.total:1>b&&(b=1),"number"==typeof b)return"fade"===d?this._fade(b):this._slide(b);
	if("string"==typeof b){
	if("first"===b)return"fade"===d?this._fade(0):this._slide(0);
	if("last"===b)return"fade"===d?this._fade(this.data.total):this._slide(this.data.total)}
}
,d.prototype._setuptouch=function(){
	var b,c,d,e;
	return b=a(this.element),this.data=a.data(this),e=a(".slidesjs-control",b),c=this.data.current+1,d=this.data.current-1,0>d&&(d=this.data.total-1),c>this.data.total-1&&(c=0),e.children(":eq("+c+")").css({
	display:"block",left:this.options.width}
),e.children(":eq("+d+")").css({
	display:"block",left:-this.options.width}
)}
,d.prototype._touchstart=function(b){
	var c,d;
	return c=a(this.element),this.data=a.data(this),d=b.originalEvent.touches[0],this._setuptouch(),a.data(this,"touchtimer",Number(new Date)),a.data(this,"touchstartx",d.pageX),a.data(this,"touchstarty",d.pageY),b.stopPropagation()}
,d.prototype._touchend=function(b){
	var c,d,e,f,g,h,i,j=this;
	return c=a(this.element),this.data=a.data(this),h=b.originalEvent.touches[0],f=a(".slidesjs-control",c),f.position().left>.5*this.options.width||f.position().left>.1*this.options.width&&250>Number(new Date)-this.data.touchtimer?(a.data(this,"direction","previous"),this._slide()):f.position().left<-(.5*this.options.width)||f.position().left<-(.1*this.options.width)&&250>Number(new Date)-this.data.touchtimer?(a.data(this,"direction","next"),this._slide()):(e=this.data.vendorPrefix,i=e+"Transform",d=e+"TransitionDuration",g=e+"TransitionTimingFunction",f[0].style[i]="translateX(0px)",f[0].style[d]=.85*this.options.effect.slide.speed+"ms"),f.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function(){
	return e=j.data.vendorPrefix,i=e+"Transform",d=e+"TransitionDuration",g=e+"TransitionTimingFunction",f[0].style[i]="",f[0].style[d]="",f[0].style[g]=""}
),b.stopPropagation()}
,d.prototype._touchmove=function(b){
	var c,d,e,f,g;
	return c=a(this.element),this.data=a.data(this),f=b.originalEvent.touches[0],d=this.data.vendorPrefix,e=a(".slidesjs-control",c),g=d+"Transform",a.data(this,"scrolling",Math.abs(f.pageX-this.data.touchstartx)<Math.abs(f.pageY-this.data.touchstarty)),this.data.animating||this.data.scrolling||(b.preventDefault(),this._setuptouch(),e[0].style[g]="translateX("+(f.pageX-this.data.touchstartx)+"px)"),b.stopPropagation()}
,d.prototype.play=function(b){
	var c,d,e,f=this;
	return c=a(this.element),this.data=a.data(this),!this.data.playInterval&&(b&&(d=this.data.current,this.data.direction="next","fade"===this.options.play.effect?this._fade():this._slide()),a.data(this,"playInterval",setInterval(function(){
	return d=f.data.current,f.data.direction="next","fade"===f.options.play.effect?f._fade():f._slide()}
,this.options.play.interval)),e=a(".slidesjs-container",c),this.options.play.pauseOnHover&&(e.unbind(),e.bind("mouseenter",function(){
	return f.stop()}
),e.bind("mouseleave",function(){
	return f.options.play.restartDelay?a.data(f,"restartDelay",setTimeout(function(){
	return f.play(!0)}
,f.options.play.restartDelay)):f.play()}
)),a.data(this,"playing",!0),a(".slidesjs-play",c).addClass("slidesjs-playing"),this.options.play.swap)?(a(".slidesjs-play",c).hide(),a(".slidesjs-stop",c).show()):void 0}
,d.prototype.stop=function(b){
	var c;
	return c=a(this.element),this.data=a.data(this),clearInterval(this.data.playInterval),this.options.play.pauseOnHover&&b&&a(".slidesjs-container",c).unbind(),a.data(this,"playInterval",null),a.data(this,"playing",!1),a(".slidesjs-play",c).removeClass("slidesjs-playing"),this.options.play.swap?(a(".slidesjs-stop",c).hide(),a(".slidesjs-play",c).show()):void 0}
,d.prototype._slide=function(b){
	var c,d,e,f,g,h,i,j,k,l,m=this;
	return c=a(this.element),this.data=a.data(this),this.data.animating||b===this.data.current+1?void 0:(a.data(this,"animating",!0),d=this.data.current,b>-1?(b-=1,l=b>d?1:-1,e=b>d?-this.options.width:this.options.width,g=b):(l="next"===this.data.direction?1:-1,e="next"===this.data.direction?-this.options.width:this.options.width,g=d+l),-1===g&&(g=this.data.total-1),g===this.data.total&&(g=0),this._setActive(g),i=a(".slidesjs-control",c),b>-1&&i.children(":not(:eq("+d+"))").css({
	display:"none",left:0,zIndex:0}
),i.children(":eq("+g+")").css({
	display:"block",left:l*this.options.width,zIndex:10}
),this.options.callback.start(d+1),this.data.vendorPrefix?(h=this.data.vendorPrefix,k=h+"Transform",f=h+"TransitionDuration",j=h+"TransitionTimingFunction",i[0].style[k]="translateX("+e+"px)",i[0].style[f]=this.options.effect.slide.speed+"ms",i.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function(){
	return i[0].style[k]="",i[0].style[f]="",i.children(":eq("+g+")").css({
	left:0}
),i.children(":eq("+d+")").css({
	display:"none",left:0,zIndex:0}
),a.data(m,"current",g),a.data(m,"animating",!1),i.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd"),i.children(":not(:eq("+g+"))").css({
	display:"none",left:0,zIndex:0}
),m.data.touch&&m._setuptouch(),m.options.callback.complete(g+1)}
)):i.stop().animate({
	left:e}
,this.options.effect.slide.speed,function(){
	return i.css({
	left:0}
),i.children(":eq("+g+")").css({
	left:0}
),i.children(":eq("+d+")").css({
	display:"none",left:0,zIndex:0}
,a.data(m,"current",g),a.data(m,"animating",!1),m.options.callback.complete(g+1))}
))}
,d.prototype._fade=function(b){
	var c,d,e,f,g,h=this;
	return c=a(this.element),this.data=a.data(this),this.data.animating||b===this.data.current+1?void 0:(a.data(this,"animating",!0),d=this.data.current,b?(b-=1,g=b>d?1:-1,e=b):(g="next"===this.data.direction?1:-1,e=d+g),-1===e&&(e=this.data.total-1),e===this.data.total&&(e=0),this._setActive(e),f=a(".slidesjs-control",c),f.children(":eq("+e+")").css({
	display:"none",left:0,zIndex:10}
),this.options.callback.start(d+1),this.options.effect.fade.crossfade?(f.children(":eq("+this.data.current+")").stop().fadeOut(this.options.effect.fade.speed),f.children(":eq("+e+")").stop().fadeIn(this.options.effect.fade.speed,function(){
	return f.children(":eq("+e+")").css({
	zIndex:0}
),a.data(h,"animating",!1),a.data(h,"current",e),h.options.callback.complete(e+1)}
)):f.children(":eq("+d+")").stop().fadeOut(this.options.effect.fade.speed,function(){
	return f.children(":eq("+e+")").stop().fadeIn(h.options.effect.fade.speed,function(){
	return f.children(":eq("+e+")").css({
	zIndex:10}
)}
),a.data(h,"animating",!1),a.data(h,"current",e),h.options.callback.complete(e+1)}
))}
,d.prototype._getVendorPrefix=function(){
	var a,b,d,e,f;
	for(a=c.body||c.documentElement,d=a.style,e="transition",f=["Moz","Webkit","Khtml","O","ms"],e=e.charAt(0).toUpperCase()+e.substr(1),b=0;
	f.length>b;
	){
	if("string"==typeof d[f[b]+e])return f[b];
	b++}
return!1}
,a.fn[f]=function(b){
	return this.each(function(){
	return a.data(this,"plugin_"+f)?void 0:a.data(this,"plugin_"+f,new d(this,b))}
)}
}
)(jQuery,window,document)}
).call(this);

CSS代码(zzsc.css):

html{overflow:scroll}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0}
body{font:12px/1.5 Tahoma,Helvetica,Arial,"\5b8b\4f53";color:#383737;background:0}
button,input,select,textarea{vertical-align:middle}
ol,ul{list-style:none}
h1,h2,h3,h4,h5,h6{font-size:100%}
fieldset,img{border:0;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}
address,caption,cite,code,dfn,em,th,var{font-weight:normal;font-style:normal}
a{text-decoration:none;cursor:pointer;color:#393939}
a:hover{text-decoration:none;color:#fd7313}
.orange{color:#f2ad0b}
.bg_gray{background:#f0f0f0}
.underline,.underline:hover{text-decoration:underline}
.f-l{float:left}
.f-r{float:right}
.c-b{clear:both}
.clear{clear:both;height:0;font-size:0;overflow:hidden}
.clearfix:after{content:"020";display:block;height:0;clear:both;visibility:hidden}
.clearfix{clear:both;zoom:1}
.v-a-m{vertical-align:middle}
.ctype1{color:#fd7c22}
.ctype2{color:#fff}
.hd-wp{clear:both;background:url(http://p9.qhimg.com/t01188f02c80f36d0a7.jpg) top repeat-x;border-bottom:1px solid #d9d9d9}
.hd{clear:both;width:960px;height:59px;margin:0 auto}
.logo{float:left;width:127px;height:42px;background:url(http://p6.qhimg.com/t01641345076a445f91.jpg) no-repeat;margin:9px 0 0 9px;overflow:hidden;display:inline}
.logo a{display:block;width:124px;height:42px}
.nnav{height:31px;float:right;padding-top:25px}
.nnav a{text-align:center;margin:0 10px;color:#6d6d6d;display:inline;text-decoration:none;float:left;line-height:22px;height:22px;padding-top:3px;font-size:14px;font-family:"Microsoft YaHei"}
.nnav a:hover{color:#000}
.nnav a.cur{color:#ff7e23;font-weight:bold;border-bottom:2px solid #ff7e23}
.nnav a.cur:hover{text-decoration:none}
.nnav a.boot{width:104px;height:25px}
.slide-bg{clear:both;height:455px;background:#383838}
.slide-wp{width:945px;height:455px;margin:0 auto;position:relative}
.slides{height:455px;overflow:hidden}
.slide-txt{position:absolute;top:43px;left:41px;z-index:10000}
.slide-txt h2{width:484px;height:203px;background:url(http://p1.qhimg.com/t019fe042c1896ea357.png) no-repeat;overflow:hidden;line-height:100em;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="http://p1.qhimg.com/t019fe042c1896ea357.png");_background:0}
.slide-txt dl{clear:both;font-family:"Microsoft YaHei";padding-left:15px}
.slide-txt dt{font-size:20px}
.slide-txt dt.slogon{font-size:14px}
.slide-txt dt.tip{color:#f07e05;font-size:14px;width:300px;text-align:center;margin-top:20px}
.slide-txt dt.tip2{color:#fff;margin-top:30px;margin-left:-10px;height:30px;font-size:12px;text-align:center;width:384px;line-height:30px;background:url(http://p6.qhimg.com/t01a69bf9f21f4a8382.png) 0 0 no-repeat;_background:url(http://p6.qhimg.com/t0186ac6152df672f2c.gif) 0 0 no-repeat}
.slide-txt dt span{display:block;font-size:28px}
.slide-txt dd{overflow:hidden;zoom:1;padding:17px 0 0 40px}
.slide-txt dd strong{color:#fd7c22;padding-left:10px;font-size:16px;font-style:italic;margin-top:14px}
.slide-txt dd strong span{font-size:22px}
.btn-1{background:url(http://p9.qhimg.com/t01ce40894d387d75bf.png) no-repeat;width:188px;height:57px;cursor:pointer;display:inline-block;text-align:center;line-height:47px;font-size:26px;text-shadow:0 0 6px #666;color:#fff;_background:url(http://p5.qhimg.com/t01f08af333b5d6993d.gif) no-repeat}
.btn-1 a,.btn-1 a:hover{color:#fff;display:block;width:100%;height:100%}
.btn-1-disabled{cursor:default;margin-left:45px;background:url(http://p8.qhimg.com/t017f98953821e931b8.png) 0 0 no-repeat;_background:url(http://p2.qhimg.com/t01617a88bfa66106aa.gif) 0 0 no-repeat}
.btn-1-disabled a,.btn-1-disabled a:hover{cursor:default}
.wrap{width:940px;margin:0 auto}
.intro dl{clear:both;overflow:hidden;zoom:1;background:url(http://p1.qhimg.com/d/inn/ed3b886c/linebg.png) no-repeat bottom;border-bottom:1px solid #dfdfdf}
.intro dt{float:left}
.intro .intro-1 dt{margin-top:35px}
.intro .intro-2 dt{float:right;margin-bottom:40px}
.intro .intro-3 dt{margin:15px 0 0 40px}
.intro .intro-4 dt{float:right;margin-top:15px}
.intro .intro-5{padding-bottom:45px}
.intro .intro-5 dt{float:right;margin:45px 0 0 35px;background:#d3d3d3;width:482px;height:361px}
.intro dd{overflow:hidden;zoom:1;padding:85px 0 0 50px;width:340px}
.intro .intro-1 dd{padding-top:60px}
h3,h4{color:#fd7313;font-weight:normal;font-family:"Microsoft YaHei";font-size:33px}
h4{font-size:18px;color:#585858;font-weight:bold;padding:5px 0 20px}
.intro dd p{line-height:22px}
.intro-b{text-align:center;padding:50px 0 30px}

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