<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset='utf-8' />
<script src='js/jquery.js'></script>
<style>
.box div {display:inline-block;text-align:center;cursor:pointer;}
.box{text-align:center;}
.show{position:absolute;left:26%;z-index:10;}
.left{position:absolute;left:0px;z-index:2}
.right{position:absolute;right:0px;z-index:1}
.zleft{width:872px;height:410px;background:black;position:absolute;left:0px;top:0px;opacity:0.8;z-index:7;}
.zright{width:872px;height:410px;background:black;position:absolute;right:0px;top:0px;opacity:0.8;z-index:7;}
.lunbo .hide{display:none;}
.thmail ul li{float:left;list-style:none;margin:5px;position:relative;}
.bimg{position:absolute;top:0px;left:0px;display:inline-block;width:116px;height:60px;background:url("image/focus-cover-11660.png") no-repeat ;}
</style>
</head>
<body>
<div class='box'>
<div style="width:100%;height:410px;position:relative;top:0px;left:0px;">
<div class='zleft'></div>
<div class='zright'></div>
<div class="lunbo" style="width:100%;height:410px;">
<div class="hide"><img src='image/52fec253dfc642b1bd19bd82f9ef80e7.jpg'></div>
<div class='left'><img src='image/1f24b0c646604418ae1d99957dd24e26.jpg'></div>
<div class='show'><img src='image/2c64e3e1bf5241b7a3333bf85f92285b.jpg'></div>
<div class='right'><img src='image/4bd9ea60fe1e48a5915f581cdfd167f5.jpg'></div>
<div class="hide"><img src='image/26e576c390a14e55a7f436b583e23c6c.jpg'></div>
<div class="hide"><img src='image/a7c63324731e45a1906238c22c84040a.jpg'></div>
<div class="hide"><img src='image/5526d35ea50b4327b9265fcdfeaec016.jpg'></div>
</div>
</div>
<div class="thmail">
<ul>
<li><div><img src="image/27bfbb99592648a5a608a32eb540c9ba.jpg"><i></i></div></li>
<li><div><img src="image/92bbcb10ea054a6691513c9c1b7c330a.jpg"><i></i></div></li>
<li><div><img src="image/74b079ce8fdf4e7cac6e5b89b5869ab3.jpg"><i></i></div></li>
<li><div><img src="image/765cd9d886a242b285eaaaee8e5538e0.jpg"><i></i></div></li>
<li><div><img src="image/66d98cc94ec849ef8fa3e84687753f88.jpg"><i></i></div></li>
<li><div><img src="image/635f13361b7b42dc90322a57044cdaaa.jpg"><i></i></div></li>
<li><div><img src="image/b4392fa100c44b608c2a2e6100699be3.jpg"><i></i></div></li>
</ul>
</div>
</div>
<script>
$("body").on("click",".zleft",function(){
clearInterval(status);
if($(".show").prev().html() !== undefined){
if($(".show").next().html() == undefined){
$(".lunbo div").eq(0).addClass("hide").removeClass("right");
}else{
$(".show").next().addClass("hide").removeClass("right");
}
$(".show").addClass("right").removeClass("show").prev().addClass("show").removeClass("left");
if($(".show").prev().html() == undefined){
$(".lunbo div").eq($(".lunbo div").length-1).addClass("left").removeClass("hide");
}else{
$(".show").prev().removeClass("hide").addClass("left");
}
}else{
$(".show").addClass("right").removeClass("show").next().removeClass("right").addClass("hide");
$(".lunbo div").eq($(".lunbo div").length-1).addClass("show").removeClass("left").prev().removeClass("hide").addClass("left");
}
$(".thmail ul li").find("i").removeClass("bimg");
$(".thmail ul li").eq($(".show").index()).find("div i").addClass("bimg");
use();
})
$("body").on("click",".zright",function(){
clearInterval(status);
if($(".show").next().html() !== undefined){
if($(".show").prev().html() == undefined){
$(".lunbo div").eq($(".lunbo div").length-1).addClass("hide").removeClass("left");
}else{
$(".show").prev().addClass("hide").removeClass("left");
}
$(".show").addClass("left").removeClass("show").next().addClass("show").removeClass("right");
if($(".show").next().html() == undefined){
$(".lunbo div").eq(0).addClass("right").removeClass("hide");
}else{
$(".show").next().removeClass("hide").addClass("right");
}
}else{
$(".show").addClass("left").removeClass("show").prev().removeClass("left").addClass("hide");
$(".lunbo div").eq(0).addClass("show").removeClass("right");
$(".lunbo div").eq(0).next().removeClass("hide").addClass("right");
}
$(".thmail ul li").find("i").removeClass("bimg");
$(".thmail ul li").eq($(".show").index()).find("div i").addClass("bimg");
use();
})
var status = '';
function use(){
status = setInterval(function(){
$(".zright").trigger("click");
},"3000");
}
use();
$(".thmail ul li div img").mousemove(function(){
$(this).parents("li").siblings().find("i").removeClass("bimg");
$(this).next().addClass("bimg");
if($(".show").prev().html() == undefined){
$(".lunbo div").eq($(".lunbo div").length-1).removeClass("left").addClass("hide");
}else{
$(".show").prev().removeClass("left").addClass("hide");
}
if($(".show").next().html() == undefined){
$(".lunbo div").eq(0).removeClass("right").addClass("hide");
}else{
$(".show").next().removeClass("right").addClass("hide");
}
$(".show").removeClass("show").addClass("hide");
$(".lunbo div").eq($(this).parents("li").index()).removeClass("hide").addClass("show");
if($(".show").prev().html() == undefined){
$(".lunbo div").eq($(".lunbo div").length-1).removeClass("hide").addClass("left");
}else{
$(".show").prev().removeClass("hide").addClass("left");
}
if($(".show").next().html() == undefined){
$(".lunbo div").eq(0).removeClass("hide").addClass("right");
}else{
$(".show").next().removeClass("hide").addClass("right");
}
})
</script>
</body>
</html>
