Как добавить кнопки «Следующая / Предыдущая» в слайд-шоу - PullRequest
Новая
       11

Как добавить кнопки «Следующая / Предыдущая» в слайд-шоу

2 голосов
/ 28 марта 2011

Hyper-mega-noob-question, я ломал голову над тем, как добавить следующие / предыдущие кнопки к простому слайдеру, который я нашел Сохой Танака, и хотел попросить вас помочь в этом деле. До сих пор я получил ползунок для работы со всплывающей подсказкой и для загрузки изображений из xml (согласно моему требованию), но я довольно новичок в jQuery и не могу заставить работать следующие / предыдущие кнопки :( .. Вот что я получил так далеко:

CSS 

body {
    margin: 0; padding: 0;
    font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}
*{outline: none;}
img {border: 0;}
.container {
    width: 322px;
    padding: 0;
    margin:30px 10px 0 10px;
}

/*--Main Container--*/
.main_view {
    position: relative;
}
/*--Window/Masking Styles--*/
.window {
    height:270px;   width: 320px;
    overflow: hidden; /*--Hides anything outside of the set width/height--*/
    position: relative;
}
.image_reel {
    position: absolute;
    top: 0; left: 0;
    z-index:1;
}

/*--Paging Styles--*/
.paging {
    position: relative;
    width: 320px; height:35px;
    text-align: center;
    line-height: 35px;
    display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
    padding: 0 2px;
    text-decoration: none;
    color: #000;
}
.paging a.active {
    color: #fff;
    font-weight: bold; 
    background: #920000; 
    border: 1px solid #610000;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

.box {
margin:0;
padding:0;
display: block;
width:318px;
height:268px;
float: left;
border:1px solid #ddd;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}

.box h3 {
font-size: 16px;
text-align:center;
white-space:wrap;
}

.box img {
margin-left:40px;
margin-bottom:-5px;
}

.box .slider-title {
color: red;
margin-bottom:4px;
margin-top:6px;
}

.box .slider-subtitle {
width:320px;
float:left;
margin-bottom:4px;
}

.box .input_Default {
width:320px;
display:block;
float:left;
text-align:center;
}

.loading {
background: url(loading.gif) no-repeat 0 0;
position: absolute;
top: 30px;
left: 30px;
z-index: 9999;
}

.subt {
color: #fff;
background:#1d1d1d;
padding:10px;
position:absolute;    
z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.moreinfo .subt { display:none; }

JS 

$(document).ready(function() {

        $.ajax({
        type: "GET",
        cache: false,
        url: "ads.xml",
        data: 'xml',
        success: function (d) {
    $(d).find('promo').each(function(){
        var $promo = $(this); 
        var title = $promo.find('title').text();
        var subtitle = $promo.find('subtitle').text();
        var image = $promo.attr('image');
        var link = $promo.attr('link');
        var index = $promo.attr('index');

        var ads = '<div class="box"><h3 class="slider-title">' + title + '</h3>';
        ads += '<dt> <a class="moreinfo" href="' + link + '" target="_blank"><img alt="' + subtitle + '" src="' + image + '" /><span class="subt">test sub</span></a></dt>';
        //ads += '<dd> <span class="loading" alt="Loading" />';
        ads += '<h3 class="slider-subtitle">' + subtitle + '</h3>' ;
        ads += '<div class="input_Default"><a href="' + link + '">Learn More</a></div>';
        ads += '</dd></div>';

        var pager = '<a href="#" rel="' + index + '">' + index + '</a>';

        $('.image_reel').append($(ads));
        $('.paging').append($(pager));

        //$('.loading').fadeOut(1400);
    });
}
});

$('.image_reel').ajaxStop(function() {

    $(".paging").show();
    $(".paging a:first").addClass("active");

    var imageWidth = $(".window").width();
    var imageSum = $(".box").size();
    var imageReelWidth = imageWidth * imageSum;

    $(".image_reel").css({'width' : imageReelWidth});

    rotate = function(){
        var triggerID = $active.attr("rel") - 1;
        var image_reelPosition = triggerID * imageWidth;

        $(".paging a").removeClass('active');
        $active.addClass('active');

        $(".image_reel").animate({ 
            left: -image_reelPosition
        }, 800 );
    }; 

    rotateSwitch = function(){
        play = setInterval(function(){
            $active = $('.paging a.active').next();
            if ( $active.length === 0) {
                $active = $('.paging a:first');
            }
            rotate();
        }, 7000);
    };

    rotateSwitch();

    $(".image_reel a").hover(function() {
        clearInterval(play);
    }, function() {
        rotateSwitch();
    }); 

    $(".paging a").click(function() {   
        $active = $(this);

        clearInterval(play);
        rotate();
        rotateSwitch();
        return false;
    });

    $(".next a").click(function() {
        $active = $('.paging a.active').parent().next().find('a');
        if ( $active.length === 0) { //If paging reaches the end…
        $active = $('.paging a:first'); //go back to first
    }

        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });

    $(".prev a").click(function() {
        $active = $('.paging a.active').prev();
        if ( $active.length === 0) { //If paging reaches the end…
        $active = $('.paging a:first'); //go back to first
    }
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });

    $('.moreinfo').each(function() {
        var subt = $(this).find('.subt');
        $(this).hover(
            function() { subt.appendTo('body'); },
            function() { subt.appendTo(this); }
        ).mousemove(function(e) {
            var x = e.pageX + 20,
                y = e.pageY + 20,
                w = subt.width(),
                h = subt.height(),
                dx = $(window).width() - (x + w),
                dy = $(window).height() - (y + h);

            if ( dx < 20 ) x = e.pageX - w - 20;
            if ( dy < 20 ) y = e.pageY - h - 20;

            subt.css({ left: x, top: y });
        });         
    });

});

});

HTML 

<div class="container">
            <div class="window">    
                <div class="image_reel">
                </div>
            </div>
            <div class="paging">
<a rel="nofollow" href="#" class="next" >next</a>
<a href="#" class="next" >next</a>
<a href="#" class="prev" rel="nofollow" >previous</a>
            </div>
<a rel="nofollow" href="#" class="next" >next</a>
<a rel="nofollow" href="#" class="next" >next</a>
</div>

Все изображения и кнопки извлекаются из XML, и это прекрасно работает, но моя следующая проблема - кнопки «следующий / предыдущий»: (.

Вот оригинальная, не XML-версия JSFiddle, которую я поставил для тестирования, EDIT, оригинальная версия http://jsfiddle.net/scPqJ/1/

Может ли один из вас, ниндзя, показать мне правильное направление?

EDIT

для любого будущего поколения, ищущего решение, пользователь в комментариях sohtanaka.com помог мне и заставил его работать, вот JsFiddle, http://jsfiddle.net/scPqJ/3/

Это Js для кнопок (вы устанавливаете его в конце исходного JS, перед конечными скобками:

JS 

$(".previous a").click(function() {    
    $active = $('.paging a.active').next();
    if ( $active.length === 0) { //If paging reaches the end...
        $active = $('.paging a:first'); //go back to first
    }

    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation
    return false; //Prevent browser jump to link anchor
});    


$(".next a").click(function() {    
    $active = $('.paging a.active').prev();
    if ( $active.length === 0) { //If paging reaches the end...
        $active = $('.paging a:last'); //go back to first
    }

    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation
    return false; //Prevent browser jump to link anchor
});

После того, как вы это настроите, все, что вам нужно сделать, это определить следующий / предыдущий div в html, например:

HTML 

<div class="next">
<a href="#" >next</a>
</div>

<div class="previous">
<a href="#" >previous</a>
</div>

и вуаля!

1 Ответ

2 голосов
/ 28 марта 2011

это должно работать (хотя это далеко от совершенства, см. Комментарии ниже): 

$('#next').click(function(){
    var $pagingLinks = $('.paging a');
    var $nowActive = $('.paging a.active');

    var nextIndex = $nowActive.index()+1;
    if(nextIndex == $pagingLinks.length) nextIndex = 0;
    $active = $pagingLinks.eq(nextIndex);       

    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation
    return false; //Prevent browser jump to link anchor     
});

Я предполагаю, что здесь у вас есть ссылка с id 'next', чтобы двигаться дальше.вы заметите, что вторая часть этого кода (начинающаяся с 'Reset Timer') взята из вашего кода (обработчик событий для нажатия на ссылки подкачки).

comments:

  • в коде ваших «пейджинговых» ссылок (я скопировал части), вы имеете дело с переменной «$ active».эта переменная определяется глобально (как свойство глобального объекта), чего обычно следует избегать.здесь вы используете jquery, поэтому, безусловно, имеет смысл инкапсулировать ваш код «слайдер» в плагин самостоятельно (см. документацию jquery для справки по этому вопросу)

  • вместоустановив переменную '$ active', вы можете просто добавить эту информацию в некоторый основной элемент вашего плагина, используя .data ()

...