车轮网带动画效果jQuery焦点图代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是车轮网带动画效果jQuery焦点图代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

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 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='#';">
			<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='#';">
			<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='#';">
			<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='#';">
			<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代码(jquery.DB_tabMotionBanner.min.js):

(function(a){
	a.fn.DB_tabMotionBanner = function(b){
	var c ={
	key:"",autoRollingTime:3000,bgSpeed:1000,motion:""}
;
	a.extend(c,b);
	return this.each(function(){
	var h = a(this);
	var k = h.find(".DB_imgSet");
	var r = h.find(".DB_imgSet li");
	var i = h.find(".DB_menuSet");
	var m = h.find(".DB_menuSet li");
	var e = h.find(".DB_bgSet li");
	var q = h.find(".DB_next");
	var g = h.find(".DB_prev");
	var f = r.length;
	var p = 0;
	var j = 0;
	s();
	function s(){
	l();
	d();
	t();
	o()}
function l(){
	k.css({
	position:"relative"}
);
	r.css({
	position:"absolute"}
);
	for (var y = 0;
	y < f;
	y++){
	if (y == p){
	r.eq(y).show()}
else{
	r.eq(y).hide()}
}
for (var y = 0;
	y < r.length;
	y++){
	var x = r.eq(y).find("img");
	for (var w = 0;
	w < x.length;
	w++){
	var A = x.eq(w);
	var v = c.motion[A.attr("class")];
	if (v != null){
	var z = Number(A.css("left").split("px")[0]);
	var B = Number(A.css("top").split("px")[0]);
	A.data({
	x2:z,y2:B,x1:z + v.left,y1:B + v.top,opacity:v.opacity,speed:v.speed,delay:v.delay == null ? 0:v.delay}
)}
}
}
}
function d(){
	h.bind("mouseenter",function(){
	clearInterval(j);
	q.show();
	g.show()}
);
	h.bind("mouseleave",function(){
	t();
	q.hide();
	g.hide()}
);
	m.bind("click",function(){
	if (a(this).index() != p){
	p = a(this).index();
	o()}
}
);
	m.bind("mouseenter",function(){
	n(a(this).find("img"),"src","_off","_on")}
);
	m.bind("mouseleave",function(){
	if (p != a(this).index()){
	n(a(this).find("img"),"src","_on","_off")}
}
);
	q.bind("click",function(){
	u()}
);
	g.bind("click",function(){
	p--;
	if (p == -1){
	p = f - 1}
o()}
)}
function u(){
	p = ++p % f;
	o()}
function t(){
	j = setInterval(u,c.autoRollingTime)}
function o(){
	for (var z = 0;
	z < r.length;
	z++){
	var A = r.eq(z);
	var y = e.eq(z);
	if (p == z){
	A.show();
	var x = A.find("img");
	for (var w = 0;
	w < x.length;
	w++){
	var A = x.eq(w);
	var v = c.motion[A.attr("class")];
	if (v != null){
	if (A.attr("src").indexOf(".png") > 0 && a.browser.msie && a.browser.version < 9){
	A.css({
	left:A.data("x1"),top:A.data("y1"),opacity:1,display:"none"}
)}
else{
	A.css({
	left:A.data("x1"),top:A.data("y1"),opacity:A.data("opacity")}
)}
A.stop().delay(A.data("delay")).queue(function(){
	a(this).css("display","block");
	a(this).dequeue()}
).animate({
	left:A.data("x2"),top:A.data("y2"),opacity:1}
,A.data("speed"))}
}
n(m.eq(z).find("img"),"src","_off","_on");
	m.eq(z).addClass("select");
	y.stop(true,true).fadeIn(c.bgSpeed)}
else{
	A.hide();
	n(m.eq(z).find("img"),"src","_on","_off");
	m.eq(z).removeClass("select");
	y.stop(true,true).fadeOut(c.bgSpeed)}
}
}
function n(w,z,v,x){
	var y = w.attr(z);
	if (String(y).search(v) != -1){
	w.attr(z,y.replace(v,x))}
}
}
)}
}
)(jQuery);

附件:下载该文件资源,减少时间成本(增值服务)