jquery - 向幻灯片添加按钮

Question

我在这里有这个非常简单的幻灯片：http: //jsfiddle.net/Jtec5/17/
这是代码：
HTML：

<div id="slideshow">
   <div>
     <img src="http://i.imgur.com/M0US5a4.jpg">
   </div>
   <div>
     <img src="http://i.imgur.com/Akqe7Hm.png">
   </div>
   <div>
     <img src="http://i.imgur.com/X2IfizW.jpg">
   </div>
</div>

CSS：

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 500px; 
    height: 300px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

查询：

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

我正在尝试添加类似的按钮：这告诉我我在哪张照片中以及幻灯片中有多少张照片，当我按下按钮时，它会将我带到幻灯片中的一张照片好吧，我想代码必须包含该<ul>元素，我尝试过这样做并且我想出了这个解决方案，但我不喜欢它，因为当我按下按钮时它不会带我到它应该做的照片，而且它的代码非常高。 . http://jsfiddle.net/Jtec5/2/ 还有其他建议吗？

Answer 1

在您希望按钮所在的页面中添加一个跨度

<span id='slideselector'></span>

在 ready 函数中，为每个.imgLikediv 添加一个 index 属性，并在选择器 span 中添加一个带有 click 处理程序的相应单选按钮

$('.imgLike').each(function(i,el) {
    $(el).attr('img-index',i);
    $("<input>").attr({'id':'img-'+i, 'type':'radio', 'value':i, 'name':'slideselector'}).click(function() {select(i);}).appendTo($('#slideselector'))
});

在区间之外定义区间函数，以便点击处理程序可以调用它，并让它选择与当前图像对应的单选按钮：

function rotate(speed) { 
  $('#slideshow > div:first')
    .fadeOut(speed)
    .next()
    .fadeIn(speed)
    .end()
    .appendTo('#slideshow');
  $('input[name="slideselector"]')[$('#slideshow > div:first div.imgLike').attr('img-index')].checked=true;
}

点击处理程序看起来像：

function select(idx) {
    clearInterval(interval);
    $('#slideshow > div:first').fadeOut(1000)
    while ($('#slideshow > div:first .imgLike').attr('img-index') != idx) {
      rotate(0);
    }
    $('#slideshow > div:first').fadeIn(1000);    
    interval = setInterval(function(){rotate(1000);}, 3000);
}

开始这一切：

var interval = setInterval(function(){rotate(1000);}, 3000);

它看起来像这样：jsFiddle

只需设置按钮样式以适合您的主题。

编辑：添加了一些样式使其更漂亮的 jsFiddle

Answer 2

try this

<style>
#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 500px; 
    height: 300px;
    overflow:hidden;
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}


#slideshow .buttons{
    display:block;
    z-index:5;
    position: absolute; 
    top:20px;
    left:20px;
}
#slideshow .buttons a{
    background:#666;
    display:block;
    width:10px;
    height:10px;
    float:left;
    margin:0 2px;
}
#slideshow .buttons a:hover, #slideshow .buttons a.active{
    background:#000;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>

// define plugin
(function($){ 
    // Advertisement loader
    $.fn.slideshow = function(user_options) {

        // container
        var container = $(this), buttonsContainer= $('.buttons', container), buttons ;

        // All divs:
        var divs = container.find("div");
        var divI = 0;

        // Default options:
        var default_options = {
            path: "",
            duration: 3000
        };

        // Create combined options:
        var options = $.extend(default_options, user_options);


        //show next
        var addButtons = function(){

            for( var i=0; i<divs.size(); i++){
                buttonsContainer.append('<a href="#" data-i="'+i+'"></a>')
            };
            buttons = $('a' , buttonsContainer);

            buttons.click(function(e){
                e.preventDefault();
                var a = $(this);
                buttons.removeClass('active');
                a.addClass('active');

                divs.eq(divI).stop().hide();

                divI = a.data('i');
                show();
            });
        };

        //show next
        var show = function(){
            divs.eq(divI).fadeIn(500, delay).addClass("active");
            buttons.eq(divI).addClass("active");
        };

        // dummy animation for delaying current one
        var delay = function(){
            divs.eq(divI).animate({opacity:100}, options.duration , hide);
        };

        // hide current
        var hide = function(){
            divs.eq(divI).hide(500, function(){
                divs.eq(divI).removeClass("active");
                buttons.eq(divI).removeClass("active");

                divI ++;
                if( divI >= divs.size()) divI = 0;

                show();
            });
        };

        // init
        divs.hide();
        addButtons();
        // start show first
        show();

    }
})(jQuery);  

//call plugin
jQuery(document).ready(function(){
    // Call to above function:
    $("#slideshow").slideshow();
}); 

</script>

<div id="slideshow">
   <div>
     <img src="http://i.imgur.com/M0US5a4.jpg">
   </div>
   <div>
     <img src="http://i.imgur.com/Akqe7Hm.png">
   </div>
   <div>
     <img src="http://i.imgur.com/X2IfizW.jpg">
   </div>
   <span class="buttons"></span>
</div>