jQuery點擊選項卡標簽切換圖文滾動展示特效



118 468 157



特效描述:點擊選項卡 標簽切換 圖文滾動展示 滾動特效,

代碼結構

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

加群請備注:從官網了解到

老夫子电子