<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> ul{list-style:none;} ul,body{margin:0;padding:0;} .slide-box{position:relative;} .clearfix:after {content:'';display: table;clear:both;} .slide-box {width:500px;border:1px solid #ccc;margin:50px auto;} .slide-content-wrap {height: 400px;width:500px;overflow:hidden;position:relative;} .slide-content { width:2500px; position:absolute; left:0; /*transition: all 0.5s ease-in-out;*/ } .slide-content .slide-panel { float:left;height: 400px;} .slide-content img {height:400px; width:500px;} .slide-nav-wrap{position:absolute;left:0;bottom:0;} .slide-item{float:left;height: 60px;} .slide-nav img{ height:60px;width:100px; } .slide-box:hover .prev, .slide-box:hover .next{display:block;} .prev, .next{ position: absolute; display:none; width:30px; height:60px; top:150px; text-indent:300000px; cursor: pointer; background: #ccc no-repeat center center; border-radius:5px; } .prev:hover, .next:hover { background-color: #aaa; } .prev{ left:25px; background-image: url("../image/prev.png"); } .next{ right:25px; background-image: url('../image/next.png'); } </style> <script src="../jquery-1.11.3.js"></script> <script type="text/javascript"> $(function(){ var slideWrap = $('.slide-box'); var triggers = $('.slide-item'); var target = $('.slide-content'); var curIndex = 0; function autoPlay(){ if(curIndex>3){ curIndex = 0; target.animate({left:-500*curIndex},500,'swing',function(){}); }else{ curIndex += 1; target.animate({left:-500*curIndex},500,'swing',function(){}); } } var autoID = setInterval(autoPlay,3000); slideWrap.hover(function(){ clearInterval(autoID); },function(){ autoID = setInterval(autoPlay,3000); }); triggers.each(function(index,item){ var trigger = $(item); trigger.on('mouseenter',function(e){ // target.css({left:-left}); if(target.is(':animated')){ target.stop(); } curIndex = trigger.index(); target.animate({left:-curIndex*500},500,'swing',function(){}); }); }); $('.next').click(function(e){ curIndex += 1; if(curIndex > 4){ curIndex = 0; } if(target.is(':animated')){ target.stop(); } target.animate({left:-500*curIndex},500,'swing',function(){}); }); $('.prev').click(function(){ curIndex -= 1; if(curIndex < 0){ curIndex = 4; } if(target.is(':animated')){ target.stop(); } target.animate({left:-500*curIndex},500,'swing',function(){}); }); }); </script> </head> <body> <div class="slide-box"> <div class="slide-content-wrap"> <ul class="slide-content clearfix"> <li class="slide-panel"><img src="../image/1.jpg"> </li> <li class="slide-panel"><img src="../image/2.jpg"> </li> <li class="slide-panel"><img src="../image/3.jpg"> </li> <li class="slide-panel"><img src="../image/4.jpg"> </li> <li class="slide-panel"><img src="../image/5.jpg"> </li> </ul> </div> <div class="slide-nav-wrap"> <ul class="slide-nav clearfix"> <li class="slide-item hover"><img src="../image/1.jpg"></li> <li class="slide-item"><img src="../image/2.jpg"> </li> <li class="slide-item"><img src="../image/3.jpg"> </li> <li class="slide-item"><img src="../image/4.jpg"> </li> <li class="slide-item"><img src="../image/5.jpg"> </li> </ul> </div> <div class="slide-operator"> <span class="next">next</span> <span class="prev">prev</span> <span class="pause">pause</span> </div> </div> </body> </html>