<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>
