以下是 PBA官网首页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>
<title>PBA官网首页jQuery焦点图</title>
<link href="css/framework.css" rel="stylesheet" />
<link href="css/stylenewss.css" rel="stylesheet" type="text/css">
<link href="css/fashionfoucs_lrtk.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.plugin.min.js" type="text/javascript"></script>
</head>
<body style="background:#f6f6f6;">
<br>
<br>
<br>
<div style="margin: 0px auto; width:1200px; padding:0px; ">
<div class="lit">
<p><a href="#/" >
<img src="images/1top_pic1.jpg" border="0" /></a></p>
<p style="margin-top:2px;"><a href="/cty.html" >
<img src="images/2top_pic2.jpg" border="0" /></a></p>
<p style="margin-top:2px;">
<a href="http://www.pba.cn/xznt" >
<img src="images/3top_pic3.jpg" border="0" /></a></p>
</div>
</div>
<div id="banner">
<ul id="banner_img">
<li class="item1"><a href="#/" >
<div class="wrapper">
</div>
</a></li>
<li class="item2"><a href="#/" >
<div class="wrapper">
</div>
</a></li>
<li class="item3">
<a href="#/" >
<div class="wrapper">
</div>
</a></li>
<li class="item4"><a href="#/" >
<div class="wrapper">
</div>
</a></li>
<li class="item6"><a href="#/" >
<div class="wrapper">
</div>
</a></li>
</ul>
<div id="banner_ctr">
<div id="drag_ctr">
</div>
<ul>
<li style="width:0px;"></li>
<li class="styclsa">
<a href="#/" class="astysa">BB家族首发</a></li>
<li style="width:1px;"></li>
<li class="styclsa"><a href="#/" class="astysa">
超值礼包</a></li>
<li style="width:1px;"></li>
<li class="styclsa">
<a href="#/" class="astysa">红包提前换</a></li>
<li style="width:1px;"></li>
<li class="styclsa"><a href="#/" class="astysa">
美妆特卖</a></li>
<li style="width:1px;"></li>
<li class="styclsa"><a href="#/" class="astysa">
PBA 9周年</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/fashionfoucs.js"></script>
</body>
</html>JS代码(fashionfoucs.js):
var curIndex = 0;
var time = 800;
var slideTime = 6000;
var adTxt = $("#banner_img>li>div>.ad_txt");
var adImg = $("#banner_img>li>div>.ad_img");
var int = setInterval("autoSlide()",slideTime);
$("#banner_ctr>ul>li[class!='first-item'][class!='last-item']").mouseover(function (){
var ct=$(this).index("#banner_ctr>ul>li[class!='first-item'][class!='last-item']");
if(ct==1 || ct==0){
ct=0;
}
if(ct==2 || ct==3){
ct=1;
}
if(ct==5 || ct==4){
ct=2;
}
if(ct==6 || ct==7){
ct=3;
}
if(ct==8 || ct==9){
ct=4;
}
if(ct<0){
ct=0;
}
show(ct);
window.clearInterval(int);
int = setInterval("autoSlide(1)",slideTime);
}
);
function autoSlide(ct){
curIndex + 1 >= 5? curIndex = -1:0;
show(curIndex + 1);
}
function show(index){
$.easing.def = "easeOutQuad";
$("#drag_ctr").stop(false,true).animate({
left:index * 120 + 0}
,time);
$("#banner_img>li").eq(curIndex).stop(false,true).fadeOut(time);
adTxt.eq(curIndex).stop(false,true).animate({
top:"340px"}
,time);
adImg.eq(curIndex).stop(false,true).animate({
right:"700px"}
,time);
setTimeout(function (){
$("#banner_img>li").eq(index).stop(false,true).fadeIn(time);
adTxt.eq(index).children("p").css({
paddingTop:"50px",paddingBottom:"50px"}
).stop(false,true).animate({
paddingTop:"0",paddingBottom:"0"}
,time);
adTxt.eq(index).css({
top:"0",opacity:"0"}
).stop(false,true).animate({
top:"170px",opacity:"1"}
,time);
adImg.eq(index).css({
right:"700px",opacity:"0"}
).stop(false,true).animate({
right:"500px",opacity:"1"}
,time);
}
,200) curIndex = index;
}
CSS代码(fashionfoucs_lrtk.css):
@charset "UTF-8";.wrapper{width:986px;margin:0 auto;position:relative;height:390px;}
#banner{width:100%;height:390px;background:#000;overflow:hidden;position:relative;}
#banner_img{display:block;position:relative;}
#banner_img li{position:absolute;top:0;left:0;width:100%;background-position:center;background-size:cover;display:none;}
/*设置背景图片-------开始*/
#banner_img li.item1{background-image:url(1lunbo1.jpg);display:block;}
#banner_img li.item2{background-image:url(2lunbo2.jpg);}
#banner_img li.item3{background-image:url(3lunbo3.jpg);}
#banner_img li.item4{background-image:url(1hnav1.jpg);}
#banner_img li.item6{background-image:url(jiuzhou1920x390-9.jpg);}
/*设置背景图片--------结束*/
#banner_img .ad_img{position:absolute;right:10px;top:80px;width:506px;height:404px;}
#banner_img .ad_txt{position:absolute;left:10px;top:170px;color:#fff;text-shadow:1px 1px rgba(51,51,51,0.3);}
#banner_img .ad_txt h2{font:bold 36px/60px Microsoft YaHei;}
#banner_img .ad_txt a{display:block;width:100px;height:25px;line-height:25px;text-align:center;margin-top:10px;background:#fff;color:#666;}
#banner_ctr{position:absolute;width:960px;height:122px;margin-left:-90px;left:35%;bottom:-75px;z-index:1;}
#banner_ctr ul{width:100%;}
#banner_ctr li{float:left;display:inline-block;height:27px;text-align:center;vertical-align:middle;cursor:pointer;}
.styclsa{line-height:27px;background:url(kk.png) no-repeat;height:27px;color:#ffffff;font-size:12.48px;padding:0px 0px 0 0px;width:119px;margin:0 auto;overflow:hidden;font-family:"宋体";zoom:1;}
.astysa{color:#ffffff;font-size:12.48px;text-align:center;}
#drag_ctr{position:absolute;top:-5px;cursor:pointer;left:0px;width:119px;height:32px;bottom:120px;background:url(kk1.png) no-repeat;padding:0px 0px 0 0px;margin:0 auto;overflow:hidden;color:#fff;filter:alpha(opacity=50);color:#ffffff;}
分享到QQ
分享到微博
微信扫一扫
