<!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="http://www.jb51.net" target="blank"><img src="images/bd_photo1.jpg" width="268" height="173" /></a>
<p><a href="http://www.jb51.net" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">上海基地</div>
<a href="http://www.jb51.net" target="blank"><img src="images/bd_photo2.jpg" width="268" height="173" /></a>
<p><a href="http://www.jb51.net" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">武汉基地</div>
<a href="http://www.jb51.net" target="blank"><img src="images/bd_photo3.jpg" width="268" height="173" /></a>
<p><a href="http://www.jb51.net" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">西安基地</div>
<a href="http://www.jb51.net" target="blank"><img src="images/bd_photo4.jpg" width="268" height="173" /></a>
<p><a href="http://www.jb51.net" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">长春基地</div>
<a href="http://www.jb51.net" target="blank"><img src="images/bd_photo5.jpg" width="268" height="173" /></a>
<p><a href="http://www.jb51.net" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">大连基地</div>
<a href="http://www.jb51.net" target="blank"><img src="images/bd_photo6.jpg" width="268" height="173" /></a>
<p><a href="http://www.jb51.net" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">成都基地</div>
<a href="http://www.jb51.net" target="blank"><img src="images/bd_photo7.jpg" width="268" height="173" /></a>
<p><a href="http://www.jb51.net" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">杭州基地</div>
<a href="http://www.jb51.net" target="blank"><img src="images/bd_photo8.jpg" width="268" height="173" /></a>
<p><a href="http://www.jb51.net" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">沈阳基地</div>
<a href="http://www.jb51.net" target="blank"><img src="images/bd_photo9.jpg" width="268" height="173" /></a>
<p><a href="http://www.jb51.net" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">合肥基地</div>
<a href="http://www.jb51.net" target="blank"><img src="images/bd_photo10.jpg" width="268" height="173" /></a>
<p><a href="http://www.jb51.net" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">长沙基地</div>
<a href="http://www.jb51.net" target="blank"><img src="images/bd_photo11.jpg" width="268" height="173" /></a>
<p><a href="http://www.jb51.net" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
<li>
<div class="bc_chgTitle">郑州基地</div>
<a href="http://www.jb51.net" target="blank"><img src="images/bd_photo12.jpg" width="268" height="173" /></a>
<p><a href="http://www.jb51.net" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带，占地面积近200亩，拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
</li>
</ul>
</div>
</div>
<a href="#" class="bd_rbtn"></a>
</div>
<center>
<a href="http://www.jb51.net" target="blank"><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>
基于jQuery实现的多区块点击切换图文特效源码.zip （24个子文件） 
132689935579919528 css 
global.css 2KB images 
hbd_rbtn.jpg 13KB bd_btn.jpg 3KB bd_lbtn.jpg 568B bd_photo12.jpg 34KB bodyBg.jpg 307B bd_photo9.jpg 34KB hbd_lbtn.jpg 13KB bd_photo11.jpg 34KB bd_photo10.jpg 34KB bodyBg2.jpg 306B bd_photo6.jpg 17KB bd_photo3.jpg 28KB bd_photo1.jpg 34KB bd_photo4.jpg 20KB bd_photo8.jpg 34KB bodyBg3.jpg 307B bd_photo5.jpg 28KB bd_photo7.jpg 20KB bd_bg1.jpg 14KB bd_photo2.jpg 32KB bd_rbtn.jpg 550B
index.html 7KB js jquery.js 91KB资源评论
毕业_设计
- 粉丝: 1976
- 资源: 1万+
最新资源
- 基于Django和HTML的新疆地区水稻产量影响因素可视化分析系统(含数据集)
- windows conan2应用构建模板
- 3_base.apk.1
- 基于STM32F103C8T6的4g模块（air724ug）
- 基于Java技术的ASC学业支持中心并行项目开发设计源码
- 基于Java和微信支付的wxmall开源卖票商城设计源码
- 基于Java和前端技术的东软环保公众监督系统设计源码
- 基于Python、HTML、CSS的crawlerdemo软件工程实训爬虫设计源码
- 基于多智能体深度强化学习的边缘协同任务卸载方法设计源码
- 基于BS架构的Java、Vue、JavaScript、CSS、HTML整合的毕业设计源码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
