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

Jquery的：

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

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

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

Answer 1

试试这个

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

Answer 2

在页面中添加希望按钮

的范围

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

在ready函数中，为每个.imgLike div添加一个索引属性，并在选择器范围内使用单击处理程序添加相应的单选按钮

$('.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

添加按钮以进行幻灯片放映

2 个答案: