我有一个带有下一个和上一个按钮的工作简单滑块。
我尝试的是什么:JS:
$(function(){
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, 200, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 200, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
$('a.control_prev').click(function (){moveLeft();});
$('a.control_next').click(function (){moveRight();});
});
示例:
答案 0 :(得分:1)
试试这段代码: -
$('<div class="pager"></div>').appendTo('#slider ')
for(i=0;i<slideCount ;i++){
$('.pager').append('<span></span>')
}
$('.pager span:nth-child(1)').addClass('active');
$('.pager span').click(function(){
var eq = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$('.slider ul').animate({left:'-' + slideWidth *eq},500)
})
我已经使用了当前点的活动类,因此在你的css中使用.active ...
答案 1 :(得分:1)
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
.slider { width: 320px; overflow: hidden; margin: 50px 0 0 50px; max-width: 100%; }
.slider ul { float: left; }
.slider li { float: left; list-style: none; }
.pager { float: left; margin: 5px; }
.pager span { width: 15px; height: 15px; background: #000; border-radius: 50%; display: inline-block; margin: 0 5px; cursor: pointer; color: #fff; }
.pager span.active { background-color: #f00; }
</style>
<div class="slider">
<ul>
<li title="First"><img src="story1.jpg" alt=""></li>
<li title="Second"><img src="story2.jpg" alt=""></li>
<li title="Last"><img src="story3.jpg" alt=""></li>
<li title="First"><img src="story1.jpg" alt=""></li>
<li title="Second"><img src="story2.jpg" alt=""></li>
<li title="Last"><img src="story3.jpg" alt=""></li>
</ul>
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>
</div>
<script>
$(document).ready(function() {
var slider_w = $('.slider').width();
var total_li = $('.slider li').length
var total_w = $('.slider').width()*total_li
$('.slider ul').width(total_w)
var count = 1;
// next button
$('a.next').click(function(){
count++
if(count <= total_li){
$('.slider ul').animate({marginLeft: '-=' + slider_w},500)
}
else{
count = 1
$('.slider ul').animate({marginLeft:0},500)
}
$('.pager span:nth-child('+ count +')').addClass('active').siblings().removeClass('active');
return false
})
//prev button
$('a.prev').click(function(){
count--
if(count > 0 ){
$('.slider ul').animate({marginLeft: '+=' + slider_w},500)
}
else{
count = total_li
$('.slider ul').animate({marginLeft:-total_w + slider_w },500)
}
$('.pager span:nth-child('+ count +')').addClass('active').siblings().removeClass('active');
return false
})
/// pager
$('<div class="pager"></div>').appendTo('.slider')
for(i=0;i<total_li;i++){
$('.pager').append('<span></span>')
}
$('.pager span:nth-child(1)').addClass('active');
$('.pager span').click(function(){
var eq = $(this).index();
$('.slider ul').animate({marginLeft:'-' + slider_w*eq},500)
count=eq + 1
$(this).addClass('active').siblings().removeClass('active');
})
});
</script>