淘先锋技术网

首页 1 2 3 4 5 6 7

JQuery 幻灯片/轮播/焦点图特效(右侧选项卡)_网页特效

今天在写zblog模板的时候需要一个轮播特效，轮播触发部分为右侧选项卡，所以在网上找了一个案例！

案例：http://www.jq22.com/demo/JQueryyj-141111194733/

GIF1.gif特效代码：

<!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>    
<link rel="stylesheet" type="text/css" href="css/style.css"/>    
<script type="text/javascript" src="js/jquery.min.js"></script>    
<script type="text/javascript">    
$(function(){    
	var oFocus=$('#focus'),    
oRight=oFocus.find('.right'),    
oLeft=oFocus.find('.left'),    
aRLi=oRight.find('li'),    
aLLi=oLeft.find('li'),    
index=0,    
timer = null;    
	aRLi.click(function(){    
index=$(this).index()    
$(this).addClass('active').siblings().removeClass();    
aLLi.eq(index).addClass('active').siblings().removeClass();    
aLLi.eq(index).stop().animate({'opacity':1},300).siblings().stop().animate({'opacity':0},300);    
stopFoucs();    
	})    
	oLeft.mouseenter(function(){    
stopFoucs();    
	}).mouseleave(function(){		
    
startFocus();    
	});    
	timer = setInterval(function(){    
startFocus();    
	},5000);    
	function startFocus(){    
index++;    
index = index > aRLi.size()-1 ? 0 :index;    
aLLi.eq(index).addClass('active').siblings().removeClass();    
aLLi.eq(index).stop().animate({'opacity':1},300).siblings().stop().animate({'opacity':0},300);    
aRLi.eq(index).addClass('active').siblings().removeClass();    
	}    
	function stopFoucs(){    
clearInterval(timer);    
	}    
})    
</script>    
<div class="focus" id="focus">    
	<div class="left">    
<ul>    
<li class="active" style="opacity:1; filter:alpha(opacity=100);"><p>图一</p><img src="images/1.jpg"/></li>    
<li><p>图二</p><img src="images/2.jpg"/></li>    
<li><p>图三</p><img src="images/3.jpg"/></li>    
<li><p>图四</p><img src="images/4.jpg"/></li>    
</ul>    
	</div>    
	<div class="right">    
<ul>    
<li class="active"><i class="i1"></i>图一</li>    
<li><i class="i2"></i>图二</li>    
<li><i class="i3"></i>图三</li>    
<li><i class="i4"></i>图四</li>    
</ul>    
	</div>    
</div>	    
</body>    
</html>

CSS：

@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background:#fff; color:#333;font-weight:500; font-family:'Microsoft Yahei';}
.focus{height:415px;width:980px;margin:40px auto 0 auto;}
.focus .left{float:left; width:680px; height:415px; position:relative;overflow:hidden;}
.focus .left li{position:absolute; left:0; top:0; width:842px; height:415px; z-index:1; opacity:0; filter:alpha(opacity=0);}
.focus .left li.active{z-index:2;}
.focus .left li p{display:none;}
.focus .right{float:right; width:282px;}
.focus .right li{height:88px; overflow:hidden; padding-left:10px;background-image:url(../images/btns.png);background-position:-120px 0; color:#33cccc; font-size:24px; line-height:88px; margin-bottom:21px;cursor: pointer;}
.focus .right li:hover,.focus .right li.active{color:#fff;background-position:-120px -120px; }
.focus .right li i{background-image:url(../images/btns.png); background-repeat:no-repeat; width:60px; height:60px; float:left; margin:15px 19px 0px 0;}
.focus .right li i.i1{background-position:0 0;}
.focus .right li i.i2{background-position:0 -60px;}
.focus .right li i.i3{background-position:0 -120px;}
.focus .right li i.i4{background-position:0 -180px;}
.focus .right li:hover i.i1,.focus .right li.active i.i1{background-position:-60px 0;}
.focus .right li:hover i.i2,.focus .right li.active i.i2{background-position:-60px -60px;}
.focus .right li:hover i.i3,.focus .right li.active i.i3{background-position:-60px -120px;}
.focus .right li:hover i.i4,.focus .right li.active i.i4{background-position:-60px -180px;}

以上就是整个轮播右侧选项卡切换特效代码！