如何實現自定義滑蓋點

Question

DEMO

嘿，

我有一個和上一個按鈕一個簡單的工作滑塊。

什麼IAM的嘗試：

• 相反的下一步和上一個按鈕，我實現幻燈片總數=按鈕

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();}); 
}); 

例子：

Answer 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樣式。主動...

Answer 2

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