以下是 jQuery多区块点击切换图文特效js代码 的示例演示效果:
部分效果截图:
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 href="css/global.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div style="background:#FFF; padding:50px;">
<!--效果开始-->
<div class="bd_con4">
<div class="bd_t3">2014最佳网页特效</div>
<div class="bd_c4l">
<ul>
<li class="bd_cutLi">南京</li>
<li>上海</li>
<li>武汉</li>
<li>西安</li>
<li>长春</li>
<li>大连</li>
<li>成都</li>
<li>杭州</li>
<li>沈阳</li>
<li>合肥</li>
<li>长沙</li>
<li>郑州</li>
</ul>
</div>
<div class="bd_c4r">
<div class="bd_c4top">
<a href="#" class="bd_lbtn"></a>
<div class="bd_chgBox">
<div class="bd_long">
<ul>
<li>
<div class="bc_chgTitle">南京基地</div>
<a href="#" ><img src="images/bd_photo1.jpg" width="268" height="173" /></a>
<p><a href="#" >介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">上海基地</div>
<a href="#" ><img src="images/bd_photo2.jpg" width="268" height="173" /></a>
<p><a href="#" >介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">武汉基地</div>
<a href="#" ><img src="images/bd_photo3.jpg" width="268" height="173" /></a>
<p><a href="#" >介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">西安基地</div>
<a href="#" ><img src="images/bd_photo4.jpg" width="268" height="173" /></a>
<p><a href="#" >介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">长春基地</div>
<a href="#" ><img src="images/bd_photo5.jpg" width="268" height="173" /></a>
<p><a href="#" >介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">大连基地</div>
<a href="#" ><img src="images/bd_photo6.jpg" width="268" height="173" /></a>
<p><a href="#" >介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">成都基地</div>
<a href="#" ><img src="images/bd_photo7.jpg" width="268" height="173" /></a>
<p><a href="#" >介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">杭州基地</div>
<a href="#" ><img src="images/bd_photo8.jpg" width="268" height="173" /></a>
<p><a href="#" >介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">沈阳基地</div>
<a href="#" ><img src="images/bd_photo9.jpg" width="268" height="173" /></a>
<p><a href="#" >介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">合肥基地</div>
<a href="#" ><img src="images/bd_photo10.jpg" width="268" height="173" /></a>
<p><a href="#" >介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">长沙基地</div>
<a href="#" ><img src="images/bd_photo11.jpg" width="268" height="173" /></a>
<p><a href="#" >介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">郑州基地</div>
<a href="#" ><img src="images/bd_photo12.jpg" width="268" height="173" /></a>
<p><a href="#" >介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
</ul>
</div>
</div>
<a href="#" class="bd_rbtn"></a>
</div>
<center>
<a href="#" ><img src="images/bd_btn.jpg" width="134" height="39" /></a>
</center>
</div>
</div>
<script language="javascript">
var cutItm=0;
function autoPlay(){
cutItm++;
if(cutItm>11){
cutItm=0;
}
$(".bd_c4l li").removeClass("bd_cutLi");
$(".bd_c4l li").eq(cutItm).addClass("bd_cutLi");
var leftVal=cutItm*268;
$(".bd_long").animate({left:-leftVal},500);
}
var timeer=setInterval(autoPlay,3000);
$(".bd_c4l,.bd_c4top").hover(function(){clearInterval(timeer)},function(){timeer=setInterval(autoPlay,3000);});
$(".bd_c4l li").click(function(){
cutItm=$(".bd_c4l li").index(this);
$(".bd_c4l li").removeClass("bd_cutLi");$(this).addClass("bd_cutLi");
var leftVal=cutItm*268;
$(".bd_long").animate({left:-leftVal},500);
});
$(".bd_lbtn").click(function(){
cutItm--;
if(cutItm<0){
cutItm=11;
}
$(".bd_c4l li").removeClass("bd_cutLi");
$(".bd_c4l li").eq(cutItm).addClass("bd_cutLi");
var leftVal=cutItm*268;
$(".bd_long").animate({left:-leftVal},500);
});
$(".bd_rbtn").click(function(){
cutItm++;
if(cutItm>11){
cutItm=0;
}
$(".bd_c4l li").removeClass("bd_cutLi");
$(".bd_c4l li").eq(cutItm).addClass("bd_cutLi");
var leftVal=cutItm*268;
$(".bd_long").animate({left:-leftVal},500);
});
</script>
<!--End-->
</div>
</body>
</html>
CSS代码(global.css):
/* CSS Document */
body{line-height:150%;margin:0;padding:0;text-align:left;font-size:12px;font-family:"宋体";color:#333;}
body>div{margin:0 auto;text-align:left;clear:both;}
div{text-align:left;}
h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,li,p,span,i,em{margin:0;padding:0;font-style:normal;}
h1,h2,h3,h4,h5,h6{font-size:14px;}
dl,dt,dd,ul,li{list-style-type:none;display:block;}
img{border:0;}
table{border-collapse:collapse;border-spacing:0}
from,select,input{margin:0;padding:0;vertical-align:middle;}
a{color:#000;text-decoration:none;}
a:hover{text-decoration:underline;}
.clear{clear:both;visibility:hidden;height:0;line-height:0;font-size:0;}
.clearfix:after{clear:both;content:".";height:0;display:block;visibility:hidden;}
.clearfix{*zoom:1;}
.bd_con4{background:#E7E2DF;height:408px;width:916px;border:1px solid #CCC;position:relative;margin:0px auto;}
.bd_t3{font:18px/45px "微软雅黑";color:#FFF;padding:0px 14px 14px;height:45px;position:absolute;left:-1px;top:-1px;background:url(../images/bd_bg1.jpg) no-repeat;width:610px;z-index:100;}
.bd_c4l{background:#F9F1E6;float:left;height:344px;width:552px;padding-top:64px;padding-left:25px;position:absolute;}
.bd_c4l ul li{font:18px/107px "微软雅黑";color:#FFF;text-align:center;height:107px;width:130px;cursor:pointer;background:#707070;margin:0px 3px 3px 0px;float:left;}
.bd_c4l ul .bd_cutLi{background:#6B0904;}
.bd_c4r{float:right;width:336px;}
.bd_c4top{height:333px;}
.bd_lbtn{padding:0px 0px 0px 5px;float:left;width:23px;background:url(../images/bd_lbtn.jpg) no-repeat;display:block;height:21px;margin-top:145px;}
.bd_rbtn{float:right;width:19px;padding-top:0px;padding-right:9px;display:block;height:21px;margin-top:145px;background:url(../images/bd_rbtn.jpg) no-repeat;}
.bd_lbtn:hover{background:url(../images/hbd_lbtn.jpg) no-repeat;}
.bd_rbtn:hover{background:url(../images/hbd_rbtn.jpg) no-repeat;}
.bd_chgBox{float:left;height:333px;width:268px;overflow:hidden;position:relative}
.bd_long{width:3216px;position:absolute;left:0px;top:0px;height:333px;}
.bd_long ul li{height:333px;width:268px;float:left;font-family:"微软雅黑";}
.bc_chgTitle{height:54px;text-align:center;width:268px;padding-top:9px;font:bold 16px/54px "微软雅黑";}
.bd_lbtn img,.bd_rbtn img{cursor:pointer}
.bd_long ul li p{font-size:14px;line-height:22px;padding-top:12px;}
分享到QQ
分享到微博
微信扫一扫
