<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=utf-8>
<meta name=description content="">
<meta name=viewport content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div class="main">
<ul>
<li class="current" sliderId = "1" ><img src="img/1.jpg" alt=""></li>
<li style="" sliderId = "2"><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" sliderId="3" alt=""></li>
</ul>
<span class="buttonSpan"><strong>3/</strong><small class="sliderPageIndex">1</small></span>
<button class="rightSpan"> > </button>
<button class='leftSpan'> < </button>
</div>
</body>
<style>
*{margin:0;padding:0}
.main {
top:100px;
left: 200px;
height: 200px;
width: 300px;
overflow: hidden;
position: relative;
}
.rightSpan {
position: absolute;
right: 0px;
top:50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.buttonSpan{
bottom: 2px;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
}
.leftSpan {
position: absolute;
left: 0px;
top:50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.main li {
display:inline-block;
display:-moz-inline-stack;
}
</style>
<script>
$($('.rightSpan')[0]).click(function(){
var imgs = $(".main li");
for(var index=0;index<imgs.length;index++){
$(imgs[index]).css('display',"none");
if(imgs[index].classList.contains('current')){
imgs[index].classList.remove('current');
if(index === imgs.length -1){
$(imgs[0]).css('display',"inline");
$(imgs[0]).addClass('current');
setPageIndex(1);
}else{
$(imgs[index+1]).css('display',"inline");
$(imgs[index+1]).addClass('current');
setPageIndex(index+2);
}
break;
}
}
});
$($('.leftSpan')[0]).click(function () {
var imgs = $(".main li");
for(var index=0;index<imgs.length;index++){
$(imgs[index]).css('display',"none");
if(imgs[index].classList.contains('current')){
imgs[index].classList.remove('current');
if(index === 0){
$(imgs[imgs.length-1]).css('display',"inline");
$(imgs[imgs.length-1]).addClass('current');
setPageIndex(imgs.length);
}else{
$(imgs[index-1]).css('display',"inline");
$(imgs[index-1]).addClass('current');
setPageIndex(index);
}
break;
}
}
});
function setPageIndex(pageIndex) {
$('.sliderPageIndex')[0].innerText = pageIndex;
}
</script>
</html>
