=> slider.css
#slidercont{
margin:auto;
}
.butt{
float:left;
display: block;
margin-top:50px;
cursor:pointer;
}
.slider{
float:left;
width:840px;
height:120px;
padding:5px;
margin-right:5px;
margin-left:5px;
overflow:hidden;
border:1px solid #000;
}
.slider ul{
width:10000px;
list-style:none;
margin:0;
padding:0;
}
.slider ul li{
float:left;
margin-left:5px;
margin-right:5px;
}
.slider ul li img{
width:200px;
height:120px;
border:none;
}
=> slider.js
(function(){
var sliderW = $('.slider').css('width'),
sliderUl = $('.slider').children('ul'),
sliderLi = sliderUl.children('li'),
sliderWInt = parseInt(sliderW),
img = sliderUl.find('img'),
W = img.css('width'),
MR = sliderLi.css('margin-right'),
ML = sliderLi.css('margin-left'),
imgWidth = parseInt(W) + parseInt(MR) + parseInt(ML),
imgWInt = parseInt(imgWidth),
x = Math.floor(sliderWInt / imgWInt),
imgLen = img.length - x,
totImgWidth = imgLen * imgWInt,
current = 1;
$('.butt').on('click', function(){
var direct = $(this).data('dir'),
loc = imgWidth;
(direct === 'next') ? ++current : --current;
if(current === 0){
current = imgLen + 1;
loc = totImgWidth;
direct = 'next';
}else if(current - 2 === imgLen){
current = 1;
loc = 0;
}
transition(sliderUl, loc, direct);
});
function transition(cont, loc, direct){
var unit;
if(direct && loc !== 0){
unit = (direct === 'next') ? '-=' : '+=';
}
cont.animate({
'margin-left': unit ? (unit + loc) : loc
});
}
})();
=> slider.html
Slider
<<
>>
<script></script>
<script></script>
