js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS广告代码 > JS幻灯片

仿车轮网带左右滚动JS焦点图轮播特效代码

发布时间:2015-08-24 23:15:00    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

仿车轮网带左右滚动JS焦点图轮播特效代码
<!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>仿车轮网带左右滚动JS焦点图轮播特效代码- js特效代码网</title>    
<link rel="stylesheet" href="images/style.css" />    
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>    
<script type="text/javascript" src="js/jquery.DB_tabMotionBanner.min.js"></script>    
</head>    
<body>    
<div class="DB_tab25">    
	<ul class="DB_bgSet">    
		<li style="background:url(images/bj1.jpg) no-repeat 100% 100%;"></li>    
		<li style="background:#e66c57"></li>    
		<li style="background:#202f3d"></li>    
		<li style="background:url(images/bj2.jpg) no-repeat 100% 100%;"></li>    
	</ul>    
	<ul class="DB_imgSet">    
		<li onClick="javascript:window.location.href='http://www.jstxdm.com';">    
			<img class="DB_1_1" src="images/kjzname.png" alt="">    
			<img class="DB_1_2" src="images/kjzjx.png" alt="">    
<img class="DB_1_3" src="images/bn_01.png" alt="">    
		</li>    
		<li onClick="javascript:window.location.href='http://www.jstxdm.com';">    
			<img class="DB_2_1" src="images/addchelun.png" alt="">    
			<img class="DB_2_2" src="images/addt.png" alt="">    
			<img class="DB_2_3" src="images/zw.png" alt="">    
		</li>    
		<li onClick="javascript:window.location.href='http://www.jstxdm.com';">    
			<img class="DB_3_1" src="images/bn32.png" alt="">    
			<img class="DB_3_2" src="images/bn33.png" alt="">    
			<img class="DB_3_3" src="images/bn3.png" alt="">    
		</li>    
		<li onClick="javascript:window.location.href='http://www.jstxdm.com';">    
			<img class="DB_4_1" src="images/bn_04.png" alt="">    
			<img class="DB_4_2" src="images/bn_042.png" alt="">    
			<img class="DB_4_3" src="images/bn_043.png" alt="">    
			<img class="DB_4_4" src="images/bn_044.png" alt="">    
</li>    
	</ul>    
	<div class="DB_menuWrap">    
		<ul class="DB_menuSet">    
			<li><img src="images/btn_off.png" alt=""></li>    
			<li><img src="images/btn_off.png" alt=""></li>    
			<li><img src="images/btn_off.png" alt=""></li>    
			<li><img src="images/btn_off.png" alt=""></li>    
		</ul>    
		<div class="DB_next"><img src="images/nextArrow.png" alt="NEXT"></div>    
		<div class="DB_prev"><img src="images/prevArrow.png" alt="PREV"></div>    
	</div>    
</div>    
<script type="text/javascript">    
$('.DB_tab25').DB_tabMotionBanner({    
	key:'b28551',    
	autoRollingTime:10000,    
	bgSpeed:500,    
	motion:{    
		DB_1_1:{left:-50,opacity:0,speed:1000,delay:500},    
		DB_1_2:{left:-50,opacity:0,speed:1000,delay:1000},    
		DB_1_3:{left:100,opacity:0,speed:1000,delay:1500},    
		DB_2_1:{top:50,opacity:0,speed:1000,delay:500},    
		DB_2_2:{top:50,opacity:0,speed:1000,delay:1000},    
		DB_2_3:{top:100,opacity:0,speed:1000,delay:1500},    
		DB_3_1:{left:-50,opacity:0,speed:1000,delay:500},    
		DB_3_2:{top:50,opacity:0,speed:1000,delay:1000},    
		DB_3_3:{top:0,opacity:0,speed:1000,delay:1500},    
		DB_4_1:{top:50,opacity:0,speed:1000,delay:500},    
		DB_4_2:{top:0,opacity:0,speed:1000,delay:1000},    
		DB_4_3:{top:0,opacity:0,speed:1000,delay:1500},    
		DB_4_4:{top:30,opacity:0,speed:1000,delay:2000},    
		DB_4_5:{top:100,opacity:0,speed:1000,delay:3000},    
		end:null    
	}    
})    
</script>    
</html>



左右滚动 JS焦点图 轮播特效代码

仿车轮网带左右滚动JS焦点图轮播特效代码

jQuery仿迅雷动漫左右滚动焦点图特效

jquery实现全屏图片左右滚动预览焦点图特效

Query图文左右滚动代码(箭头控制)

jQuery实现左右滚动轮播焦点图特效

jQuery实现多边形箭头左右滚动切换焦点图特效代码

JQuery带箭头图片左右滚动特效插件

js实现带焦点的上下滚动、左右滚动的幻灯片焦点图特效代码实例

js实现图片幻灯片焦点图左右滚动、带箭头的可控制滚动特效代码

有缩略图和文字描述的JS焦点图代码

娱乐频道7栏JS焦点图代码

友荐云推荐
大家说 此评论不代表本站观点