jQuery点击选项卡标签切换图文滚动展示特效



114 453 152



特效描述:点击选项卡 标签切换 图文滚动展示 滚动特效,

代码结构

1. 引入CSS

<link href="css/global.css" type="text/css" rel="stylesheet"/>
<link href="css/global.css" type="text/css" rel="stylesheet"/>

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>

3. 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>
</head>
<body style="padding:50px 0 0 0;">
<!--效果开始-->
<div class="bd_con4">
	<div class="bd_t3">第九站长</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.dijiuzhanzhang.com" target="blank"><img src="images/bd_photo1.jpg" width="268" height="173" /></a>
							<p><a href="http://www.dijiuzhanzhang.com" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
						</li>
						<li>
							<div class="bc_chgTitle">上海基地</div>
							<a href="http://www.dijiuzhanzhang.com" target="blank"><img src="images/bd_photo2.jpg" width="268" height="173" /></a>
							<p><a href="http://www.dijiuzhanzhang.com" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
						</li>
						<li>
							<div class="bc_chgTitle">武汉基地</div>
							<a href="http://www.dijiuzhanzhang.com" target="blank"><img src="images/bd_photo3.jpg" width="268" height="173" /></a>
							<p><a href="http://www.dijiuzhanzhang.com" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
						</li>
						<li>
							<div class="bc_chgTitle">西安基地</div>
							<a href="http://www.dijiuzhanzhang.com" target="blank"><img src="images/bd_photo4.jpg" width="268" height="173" /></a>
							<p><a href="http://www.dijiuzhanzhang.com" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
						</li>
						<li>
							<div class="bc_chgTitle">长春基地</div>
							<a href="http://www.dijiuzhanzhang.com" target="blank"><img src="images/bd_photo5.jpg" width="268" height="173" /></a>
							<p><a href="http://www.dijiuzhanzhang.com" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
						</li>
						<li>
							<div class="bc_chgTitle">大连基地</div>
							<a href="http://www.dijiuzhanzhang.com" target="blank"><img src="images/bd_photo6.jpg" width="268" height="173" /></a>
							<p><a href="http://www.dijiuzhanzhang.com" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
						</li>
						<li>
							<div class="bc_chgTitle">成都基地</div>
							<a href="http://www.dijiuzhanzhang.com" target="blank"><img src="images/bd_photo7.jpg" width="268" height="173" /></a>
							<p><a href="http://www.dijiuzhanzhang.com" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
						</li>
						<li>
							<div class="bc_chgTitle">杭州基地</div>
							<a href="http://www.dijiuzhanzhang.com" target="blank"><img src="images/bd_photo8.jpg" width="268" height="173" /></a>
							<p><a href="http://www.dijiuzhanzhang.com" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
						</li>
						<li>
							<div class="bc_chgTitle">沈阳基地</div>
							<a href="http://www.dijiuzhanzhang.com" target="blank"><img src="images/bd_photo9.jpg" width="268" height="173" /></a>
							<p><a href="http://www.dijiuzhanzhang.com" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
						</li>
						<li>
							<div class="bc_chgTitle">合肥基地</div>
							<a href="http://www.dijiuzhanzhang.com" target="blank"><img src="images/bd_photo10.jpg" width="268" height="173" /></a>
							<p><a href="http://www.dijiuzhanzhang.com" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
						</li>
						<li>
							<div class="bc_chgTitle">长沙基地</div>
							<a href="http://www.dijiuzhanzhang.com" target="blank"><img src="images/bd_photo11.jpg" width="268" height="173" /></a>
							<p><a href="http://www.dijiuzhanzhang.com" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
						</li>
						<li>
							<div class="bc_chgTitle">郑州基地</div>
							<a href="http://www.dijiuzhanzhang.com" target="blank"><img src="images/bd_photo12.jpg" width="268" height="173" /></a>
							<p><a href="http://www.dijiuzhanzhang.com" target="blank">介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p>
						</li>
					</ul>
				</div>
			</div>
			<a href="#" class="bd_rbtn"></a>
		</div>
		<center><a href="http://www.dijiuzhanzhang.com" 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>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 滚动切换 滚动条切换 滑动选项卡 滑动切换 flash焦点图 flash幻灯片 flashbanner flash图片轮播 自动滚动图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 焦点图 幻灯片 轮播图 bar焦点图 带简介的焦点图 图片滚动 图片滚动条 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到