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