<div class="tab_hd_inner">
<volist name="plist" id="item">
<div type="index" data-index="0" οnclick="jump({twotree#$item['id']})" id='{twotree#$item['id']}' class="item">{twotree#$item.name}</div>
</volist>
</div>
<script>
function jump(id) {
window.location.href='index.php?g=App&m=Cms&a=lists&id='+id;
}
function getQueryParam(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)
return unescape(r[2]);
return null;
}
var aid =getQueryParam('id');
var qid =$('#hid').val();
if(aid==null){
$('.tab_hd_inner .item').eq(0).addClass('active');
}
if(aid==qid){
$('#'+aid).addClass('active');
}
</script>
//仿爱奇艺 导航栏切换
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超简洁的爱奇艺轮播图仿制-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<style>
body {
margin:0px;
padding:0px;
}
#bbox {
position:relative;
margin:0 auto;
margin-top:20px;
}
#bbox,#pics {
width:100%;
height:410px;
}
#pics {
}.pic {
position:absolute;
}
#nav_list {
width:247px;
height:371px;
background-image:url(../images/site-focuslist_bg_new.png);
position:absolute;
top:12px;
right:10px;
}
#lists {
padding-top:24px;
}
.lis {
width:221px;
list-style:none;
margin:0 auto;
}
.tag {
width:221px;
margin:0 auto;
font-size:14px;
color:#000;
display:block;
line-height:33px;
text-decoration:none;
text-indent:20px;
}
.bg {
background-color:#63b504;
}
</style>
</head>
<body>
<div id="bbox">
<div id="pics">
<div class="pic"><img src="http://www.jq22.com/img/cs/500x300-1.png"></div>
<div class="pic"><img src="http://www.jq22.com/img/cs/500x300-2.png"></div>
<div class="pic"><img src="http://www.jq22.com/img/cs/500x300-3.png"></div>
<div class="pic"><img src="http://www.jq22.com/img/cs/500x300-4.png"></div>
<div class="pic"><img src="http://www.jq22.com/img/cs/500x300-5.png"></div>
<div class="pic"><img src="http://www.jq22.com/img/cs/500x300-6.png"></div>
<div class="pic"><img src="http://www.jq22.com/img/cs/500x300-7.png"></div>
<div class="pic"><img src="http://www.jq22.com/img/cs/500x300-8.png"></div>
<div class="pic"><img src="http://www.jq22.com/img/cs/500x300-9.png"></div>
<div class="pic"><img src="http://www.jq22.com/img/cs/500x300-6.png"></div>
</div>
<div id="nav_list">
<nav id="lists">
<li class="lis"><a class="tag bg" href="javascript:void(0)">余罪2: 卧底兄弟团整装齐发 </a></li>
<li class="lis"><a class="tag" href="javascript:void(0)">我们的法则:四爷军刀傍身登岛</a></li>
<li class="lis"><a class="tag" href="javascript:void(0)">跑男:宋小宝成民歌宝藏</a></li>
<li class="lis"><a class="tag" href="javascript:void(0)">十三亿分贝:河南权志龙登场</a></li>
<li class="lis"><a class="tag" href="javascript:void(0)">挑战者联盟:小新杠上薛之谦</a></li>
<li class="lis"><a class="tag" href="javascript:void(0)">好先生:张艺兴电视首秀上线</a></li>
<li class="lis"><a class="tag" href="javascript:void(0)">跨界歌王:刘涛挑战高难度情歌</a></li>
<li class="lis"><a class="tag" href="javascript:void(0)">加油美少女:晓明变呆萌教主</a></li>
<li class="lis"><a class="tag" href="javascript:void(0)">电影圈双子座女星大起底</a></li>
<li class="lis"><a class="tag" href="javascript:void(0)">蜜蜂少女队:林志颖助阵拉票</a></li>
</nav>
</div>
</div><script>
// JavaScript Document
//定义图片的下标值为i
var i = 0;
var timer = null;
$(function() {
//图片默认显示第一张,隐藏其它图片
$(".pic").eq(0).show().siblings().hide();
//调用时间定时器方法
getTimer();
//鼠标移上列表的事件
$(".lis").hover(function() {
//通过相应的列表下标找到对应的图片
i = $(".lis").index($(this));
//调用显示方法
show();
//清除时间定时器
clearInterval(timer);
}, function() {
//获取到新的图片下标后重新绑定时间定时器
getTimer();
});
//设置时间定时器,时间设置为4执行一次
function getTimer() {
timer = setInterval(function() {
//执行下一张图片
i++;
//如果播放到最后一张,就调回第一张,循环播放
if (i == 10) {
i = 0;
}
show();
}, 4000);
}
//轮播图的循环显示方法
function show() {
//显示图片
$(".pic").eq(i).show().siblings().hide();
//显示列表
$(".tag").parent().eq(i).children().addClass("bg").parent().siblings().children().removeClass("bg");
}
})</script>
</body>
</html>