0

我在这里有这个非常简单的幻灯片：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/ 还有其他建议吗？

4

2 回答 2

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

于 2013-08-15T23:45:31.427 回答
1

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>
于 2013-08-15T23:32:21.973 回答