<!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="100%;height:410px;position:relative;top:0px;left:0px;"> <div class='zleft'></div> <div class='zright'></div> <div class="lunbo" style="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>