<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>jQuery个性化图片轮播效果</title>
<script src="js/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="./css/common.css">
<style>
.container{position: relative; zoom: 1; overflow: hidden}
.index-kv{width: 100%; height: 550px; overflow: hidden;left: 0}
.kv-img a{display: block; height: 550px}
.kv-img{width: 100%; height: 100%; position: relative; overflow: hidden}
.kv-img .index-kv-swipe{width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; display: none}
.kv-img .index-kv-swipe.active{display: block}
.kv-img .index-kv-pic{width: 100%; height: 100%; background-repeat: no-repeat; background-position: center 0; background-size: cover}
.kv-num{width: 161px; height: 24px; *height: 22px; text-align: center; position: absolute; top: 308px; left: 50%; margin-left: -80px; overflow: hidden; padding-top: 8px; *padding-top: 10px; background: no-repeat; background-position: -391px -364px}
.kv-num li{display: inline-block; *display: inline; *zoom: 1; width: 12px; height: 12px; margin: 0 3px; cursor: pointer; background: #434343; border-radius: 6px; transition: width .3s ease-out}
.kv-num li.active{width: 29px; background: #1791F0}
</style>
<script>
/* 首页大屏广告效果 */
$(function() {
// return;
var $imgrolls = $(".index-kv .kv-num li"); //选项卡区域
//$imgrolls.css("opacity", "0.5"); //设置选项卡透明度
var len = $imgrolls.length;
var index = 0;
var adTimer = null;
//选项卡的鼠标悬浮、离开调用函数
$imgrolls.mouseover(function() {
index = $imgrolls.index(this);
showImg(index);
}).eq(0).mouseover();
//滑入 停止动画，滑出开始动画.
$('.index-kv').hover(function() {
if (adTimer) {
clearInterval(adTimer);
}
}, function() {
adTimer = setInterval(function() {
showImg(index);
index++;
if (index == len) {
index = 0;
}
}, 5000);
}).trigger("mouseleave");
})
//显示不同的幻灯片
function showImg(index) {
var $rollobj = $(".index-kv");
var $rolllist = $rollobj.find(".kv-num li");
// var newhref = $rolllist.eq(index).attr("href");
// $("#jnImageroll .imgWrap").attr("href", newhref)
// .find("img").eq(index).stop(true, true).fadeIn().siblings().fadeOut();
$(".kv-img").find(".index-kv-swipe").eq(index).fadeIn().siblings().fadeOut();
// $rolllist.removeClass("active").css("opacity", "0.5").eq(index).addClass("active").css("opacity", "1");
$rolllist.removeClass("active").eq(index).addClass("active");
}
</script>
</head>
<body>
<div class="container">
<div class="index-kv" >
<div class="kv-img" >
<div class="index-kv-swipe active">
<div class="index-kv-pic" >
<a href="#" target="_blank" title="愚人节搞事情"></a>
</div>
</div>
<div class="index-kv-swipe">
<div class="index-kv-pic" >
<a href="#" target="_blank" title="大天使之剑"></a>
</div>
</div>
<div class="index-kv-swipe">
<div class="index-kv-pic" >
<a href="#" target="_blank" title="少年群侠传"></a>
</div>
</div>
<div class="index-kv-swipe">
<div class="index-kv-pic" >
<a href="#" target="_blank" title="永恒纪元"></a>
</div>
</div>
<div class="index-kv-swipe">
<div class="index-kv-pic" >
<a href="#" target="_blank" title="37直播"></a>
</div>
</div>
<div class="index-kv-swipe">
<div class="index-kv-pic" >
<a href="#" target="_blank" title=" 乾坤战纪"></a>
</div>
</div>
</div>
<ul class="kv-num" >
<li class="active"></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
</ul>
</div>
</div>
</body>
</html>