以下是 带数字按钮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>
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body class="body_home">
<div class="banner">
<div class="showf">
<div class="shows" id="shows1">
<img src="images/banner_text1.png" class="text">
<img src="images/banner_img1.png" class="img">
</div>
<div class="shows" id="shows2">
<img src="images/banner_text2.png" class="text">
<img src="images/banner_img2.png" class="img">
</div>
<div class="shows" id="shows3">
<img src="images/banner_text3.png" class="text">
<img src="images/banner_img3.png" class="img">
</div>
<div class="shows" id="shows4">
<img src="images/banner_text4.png" class="text">
<img src="images/banner_img4.png" class="img">
</div>
<div class="shows" id="shows5">
<img src="images/banner_text5.png" class="text">
<img src="images/banner_img5.png" class="img">
</div>
<div class="shows" id="shows6">
<img src="images/banner_text6.png" class="text">
<img src="images/banner_img6.png" class="img">
</div>
<div class="shows" id="shows7">
<img src="images/banner_text7.png" class="text">
<img src="images/banner_img7.png" class="img">
</div>
<div class="shows" id="shows8">
<img src="images/banner_text8.png" class="text">
<img src="images/banner_img8.png" class="img">
</div>
<div class="shows" id="shows9">
<img src="images/banner_text9.png" class="text">
<img src="images/banner_img9.png" class="img">
</div>
<div class="clear"></div>
</div>
<div class="button">
<a href="javascript:void(0)" class="btn1 btn1_fire"></a>
<a href="javascript:void(0)" class="btn2"></a>
<a href="javascript:void(0)" class="btn3"></a>
<a href="javascript:void(0)" class="btn4"></a>
<a href="javascript:void(0)" class="btn5"></a>
<a href="javascript:void(0)" class="btn6"></a>
<a href="javascript:void(0)" class="btn7"></a>
<a href="javascript:void(0)" class="btn8"></a>
<a href="javascript:void(0)" class="btn9"></a>
<div class="clear"></div>
</div>
<div class="f"></div>
</div>
<script src="js/zzsc.js"></script>
</body>
</html>JS代码(zzsc.js):
/*控制背景视差效果*/
$(function(){
$(document).mousemove(function(e){
var offset=$(document).width()/2-e.clientX;
$(".banner").css({
"background-position":( ($(document).width()-1600)/2+offset/4 -100 )+"px 0px"}
);
}
);
}
);
/*banner*/
$(function(){
var banner_index=1;
function banner_timer(){
changeBanner(banner_index);
banner_index++;
if(banner_index==10){
banner_index=1;
}
setTimeout(banner_timer,5000);
}
;
banner_timer();
function changeBanner(_i){
var w=$('.shows:first').width();
for(var i=1;
i<10;
i++){
if( i==_i){
$('.banner .button a.btn'+i).addClass('btn'+i+'_fire');
}
else{
$('.banner .button a.btn'+i).removeClass('btn'+i+'_fire');
}
$('#shows'+i).stop().animate({
'left':((i-_i)*w)+'px'}
,500,function(){
$(this).show();
}
);
}
}
$('.banner .button a').click(function(){
for(var i=1;
i<10;
i++){
if( $(this).hasClass('btn'+i)){
banner_index=i;
changeBanner(i);
return;
}
}
}
);
}
);
CSS代码(main.css):
html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
legend{color:#000}
body{text-align:center;font-size:12px;background:url(../images/bg_body2.png) repeat-x #f2f2f2;font-family:"Microsoft YaHei";}
body.body_home{background:url(../images/bg_body.png) repeat-x rgb(242,242,242)}
.clear{clear:both;}
a{text-decoration:none;color:#000;}
a:hover{text-decoration:underline;}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.banner{width:100%;padding-top:106px;background:url(../images/bg_banner.jpg) center top no-repeat;}
.banner .title{height:130px;margin:auto;display:block;}
.banner .showf{overflow:hidden;margin:auto;width:100%;height:440px;position:relative;}
.banner .shows{float:left;display:none;width:100%;position:absolute;top:0px;left:0px;}
.banner .text,.banner .img,.banner .button,.banner .f{display:block;margin:auto;}
.banner .f{width:723px;height:16px;background:url(../images/banner_f.png);margin-bottom:12px;}
.banner .img{margin-top:12px;}
.banner .button{width:219px;}
.banner .button a{float:left;display:inline;width:23px;height:23px;margin-right:1px;background:url(../images/bg_banner_button.png) no-repeat;}
.banner .button a.btn1{background-position:-0px 0px;}
.banner .button a.btn2{background-position:-23px 0px;}
.banner .button a.btn3{background-position:-46px 0px;}
.banner .button a.btn4{background-position:-69px 0px;}
.banner .button a.btn5{background-position:-92px 0px;}
.banner .button a.btn6{background-position:-115px 0px;}
.banner .button a.btn7{background-position:-138px 0px;}
.banner .button a.btn8{background-position:-161px 0px;}
.banner .button a.btn9{background-position:-184px 0px;}
.banner .button a.btn1_fire{background-position:-0px -23px;}
.banner .button a.btn2_fire{background-position:-23px -23px;}
.banner .button a.btn3_fire{background-position:-46px -23px;}
.banner .button a.btn4_fire{background-position:-69px -23px;}
.banner .button a.btn5_fire{background-position:-92px -23px;}
.banner .button a.btn6_fire{background-position:-115px -23px;}
.banner .button a.btn7_fire{background-position:-138px -23px;}
.banner .button a.btn8_fire{background-position:-161px -23px;}
.banner .button a.btn9_fire{background-position:-184px -23px;}
分享到QQ
分享到微博
微信扫一扫
