以下是 站酷首页jQuery焦点图轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
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=utf-8" />
<title>站酷首页jQuery焦点图</title>
<meta name="viewport" content="width=1200" />
<link rel="stylesheet" type="text/css" href="css/globalwide.css" />
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.slide-zool.js"></script>
<script>
$(function(){
$(".indexShowBox").slideJ({
leftBtn:".indexShowLeft",
rightBtn:".indexShowRight",
speed:800
});
});
</script>
</head>
<body>
<div class="goTop" id="goTop">
<a href="#" class="goTopLink"></a></div>
<div class="longbox w1003">
<div class="longConCam">
<div class="indexShow">
<a href="javascript:void(0)" class="indexShowLeft"></a>
<a href="javascript:void(0)" class="indexShowRight"></a>
<div class="indexShowBox">
<ul>
<li>
<a href="#/?special/hellorf/" target="_blank">
<img src="images/1374813592552.jpg" width="1083" height="350" /></a></li>
<li>
<a href="#/?work/ZMjI3NDY4NA==.html" target="_blank">
<img src="images/1374721281658.jpg" width="1083" height="350" /></a></li>
<li>
<a href="#/?work/ZMjI3NDQ4MA==.html" target="_blank">
<img src="images/1374721265231.jpg" width="1083" height="350" /></a></li>
<li>
<a href="#/?work/ZMjI3MzgyOA==.html" target="_blank">
<img src="images/1374721243494.jpg" width="1083" height="350" /></a></li>
<li>
<a href="#/?work/ZMjI3Mzc4MA==.html" target="_blank">
<img src="images/1374721222029.jpg" width="1083" height="350" /></a></li>
<li>
<a href="#/?work/ZMjI3MjIzNg==.html" target="_blank">
<img src="images/1374721189755.jpg" width="1083" height="350" /></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>JS代码(jquery.slide-zool.js):
(function($){
$.fn.slideJ = function(options){
var defaults ={
//默认属性width:$(this).width(),height:$(this).height(),nav:".slideNav",leftBtn:".slideLeft",rightBtn:".slideRight",speed:200,time:4000,type:"opacity"}
var options = $.extend(defaults,options);
//参数合并var sildeElem = $(this),//滑动模块slideCl = sildeElem.find("li"),slideNavCl = $(options.nav).find("a"),total = slideCl.size(),//图片数量nowNum = 1,active = false;
if(total<=1){
return;
}
//数量小于等于1不做操作//整体CSS设置$(this).css({
"position":"relative","height":options.height,"width":options.width}
);
//取消A标签虚线框var aHideFocus = options.nav+" a"+","+options.leftBtn+" a,"+options.rightBtn+" a,"+options.leftBtn+","+options.rightBtn;
$(aHideFocus).attr("hideFocus","hideFocus");
this.each(function(){
//分发轮换效果switch(options.type){
case "opacity":opacityAnimateJ(options);
break;
case "slide":slideAnimateJ(options);
break;
default:break;
}
;
}
);
//------------淡入淡出----------------------function opacityAnimateJ(){
$(sildeElem).find("ul").css({
position:"relative",height:options.height,width:options.width,overflow:"hidden"}
);
slideCl.css({
position:"absolute"}
);
slideNavCl.eq(0).addClass("selected");
slideCl.css({
opacity:0,"z-index":"0"}
);
slideCl.eq(0).css({
opacity:1,"z-index":"1"}
);
var interval = setInterval(checkNum,options.time);
slideNavCl.each(function(index){
$(this).click(function(){
if(active==true){
return;
}
nowNum = index;
checkNum();
clearInterval(interval);
interval = setInterval(checkNum,options.time);
}
);
}
);
$(options.rightBtn).click(function(){
if(active==true){
return;
}
clearInterval(interval);
checkNum();
interval = setInterval(checkNum,options.time);
}
);
$(options.leftBtn).click(function(){
if(active==true){
return;
}
clearInterval(interval);
var nx = nowNum-2;
var cx=0;
if(nx==-1){
nx = total-1;
cx = 0;
}
else if(nx==-2){
nx = total-2;
cx = total-1;
}
else{
cx=nx+1;
}
toggle_scroll(nx);
nowNum = cx;
interval = setInterval(checkNum,options.time);
}
);
function checkNum(){
if(nowNum<total-1){
toggle_scroll();
nowNum++;
}
else{
toggle_scroll();
nowNum=0;
}
}
function toggle_scroll(n){
active = true;
if(n!=null){
nowNum = n;
}
slideCl.css({
"z-index":"0"}
);
sildeElem.find("li.selected").css({
"z-index":1}
);
slideCl.eq(nowNum).css({
"z-index":"2",opacity:0}
);
//slideCl.animate({
opacity:0}
,options.speed);
slideCl.eq(nowNum).animate({
opacity:1}
,options.speed,function(){
active = false}
);
slideNavCl.removeClass("selected");
slideNavCl.eq(nowNum).addClass("selected");
slideCl.removeClass("selected");
slideCl.eq(nowNum).addClass("selected");
}
}
//------------左右滑动--------------------function slideAnimateJ(){
}
}
}
)(jQuery);
CSS代码(globalwide.css):
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.6 Verdana,Helvetica,sans-serif;}
/*雅黑：\5FAE\8F6F\96C5\9ED1 Verdana,Helvetica,sans-serif*/
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a:link,a:visited{color:#7f7f7f;text-decoration:none;}
a:hover,a:active{color:#000;text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.layout:after{content:'\20';display:block;height:0;clear:both;}
.layout{*zoom:1;}
.clear{clear:both;}
html{zoom:expression(function(ele){ele.style.zoom="1";document.execCommand("BackgroundImageCache",false,true);}
(this));}
body{background:#f4f4f4;word-break:break-all;}
/*html{overflow-x:hidden;overflow-y:auto;}
body{overflow:hidden;}
*/
.vm *{display:inline-block;vertical-align:middle;}
.vm option{display:block;}
.vtb *{vertical-align:text-bottom;}
/*常用*/
.w30{width:30px;}
.w85{width:85px;}
.w90{width:90px;}
.w140{width:140px;}
.w165{width:165px;}
.w180{width:180px}
.w190{width:190px;}
.w220{width:220px;}
.w230{width:230px;}
.w250{width:250px;}
.w300{width:300px;}
.w336{width:336px;}
.w350{width:350px;}
.w400{width:400px;}
.w530{width:530px;}
.w640{width:640px;}
.w800{width:800px;}
.w810{width:810px;}
.w1004{width:1083px;}
.h55{height:55px;}
.h100{height:100px;}
.h140{height:140px;}
.h150{height:150px;}
.f12{font-size:12px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.f20{font-size:20px;}
.yh{font-family:"微软雅黑";}
.cf30{color:#f30;}
a.cf30:link,a.cf30:visited{color:#f30;}
a.cf30:hover,a.cf30:active{color:#f30;}
.cf60{color:#f60;}
a.cf60:link,a.cf60:visited{color:#f60;}
a.cf60:hover,a.cf60:active{color:#f60;}
.cf90{color:#ffb900;}
a.cf90:link,a.cf90:visited{color:#ffb900;}
a.cf90:hover,a.cf90:active{color:#ffb900;}
.c000{color:#000;}
.c333{color:#333;}
.c666{color:#666;}
.c999{color:#999;}
.cccc{color:#ccc;}
.caaa{color:#aaa;}
.orange{color:#ffba00;}
a.orange:link,a.orange:visited{color:#ffba00;}
a.orange:hover,a.orange:active{color:#f30;}
.c009cff{color:#4095ce;}
a.c009cff:link,a.c009cff:visited{color:#4095ce;}
a.c009cff:hover,a.c009cff:active{color:#4095ce;}
.c7f7f7f{color:#7f7f7f;}
a.c7f7f7f:link,a.c7f7f7f:visited{color:#7f7f7f;}
a.c7f7f7f:hover,a.c7f7f7f:active{color:#f30;}
.c4e4e4e{color:#4e4e4e;}
.cc20000{color:#c20000}
.cfdb900{color:#fdb900;}
.purple{color:#e5004f;}
.ff0084{color:#ff0084;}
a.ff0084:link,a.ff0084:visited{color:#ff0084;}
a.ff0084:hover,a.ff0084:active{color:#f30;}
.a6ce38{color:#a6ce384;}
a.a6ce38:link,a.a6ce38:visited{color:#a6ce38;}
a.a6ce38:hover,a.a6ce38:active{color:#f30;}
a.c4095ce,.c4095ce{color:#4095ce;}
a.c4095ce:hover{color:#f30;}
a.ca6ce38,.ca6ce38{color:#a6ce38;}
a.ca6ce38:hover{color:#f30;}
.fLeft{float:left;}
.fRight{float:right;}
.left{text-align:left;}
.center{text-align:center;}
.right{text-align:right;}
.absolute{position:absolute;}
.relative{position:relative;}
.hide{display:none;}
.hide.selected{display:block;}
.block{display:block;}
.noBold{font-weight:normal;}
.bold{font-weight:bold;}
.ofHidden{overflow:hidden;}
.longbox{width:1084px;margin:20px auto;position:relative;z-index:2;}
.longbox.w1003{width:1083px;}
.mblLeft{float:left;padding:5px 0 0 10px;}
.mblRight{margin-left:65px;}
.mblContent{padding:10px 20px;}
.mblFunc{text-align:right;color:#c1c1c1;height:16px;}
.mblCon{color:#333;line-height:24px;}
.imgVM img{vertical-align:-4px;}
.workLeftTop{padding:15px 20px;border-bottom:1px solid #f4f4f4;}
.adBoxMiddle{padding:20px 0;text-align:center;}
.commentFunc p{float:right;}
.small .inputLong{padding:20px 20px;background:#fff;}
.small .inputLong .normalArea{width:710px;}
.small .inputLong .commentFunc{width:724px;height:30px;}
.small .commentArea{width:646px;}
.small .commentFunc{width:658px;}
/**/
.msgWrapper{font-size:14px;background:#fff;padding:10px 0;}
.newad{width:250px;height:230px;overflow:hidden;text-align:center;}
.indexShow{position:relative;}
.indexShowBox{width:1083px;height:350px;overflow:hidden;border-top:1px solid #f4f4f4;border-bottom:1px solid #f4f4f4;}
.indexShowLeft{position:absolute;left:-40px;top:45%;display:inline-block;width:28px;height:28px;background:url(sl.png) no-repeat center center;}
.indexShowRight{position:absolute;right:-40px;top:45%;display:inline-block;width:28px;height:28px;background:url(sr.png) no-repeat center center;}
分享到QQ
分享到微博
微信扫一扫
