如何在商品滑块中保留导航按钮

时间：2013-06-10 12:27:27

标签： javascript jquery

我在我的网站上使用提供滑块，其中包含16张幻灯片。我想保持导航（上一个和下一个按钮）到滑块，我可以使用这些按钮移动到每个幻灯片。（目前有导航按钮从一个页面移动到另一个我不想要的页面）< / p>

这可能吗？

HTML 

<ul>
    <li>    
        <div class="image" id="s1">
        <img src="images/s10-img.png" width="203" height="226" alt="s10">
        </div>                                      
    </li>
    <li>    
        <div class="image" id="s2">
        <img src="images/s10-img.png" width="203" height="226" alt="s10">
        </div>                                      
    </li>
    <li>    
        <div class="image" id="s3">
        <img src="images/s10-img.png" width="203" height="226" alt="s10">
        </div>                                      
    </li>
    <li>    
        <div class="image" id="s4">
        <img src="images/s10-img.png" width="203" height="226" alt="s10">
        </div>                                      
    </li>
    <li>    
        <div class="image" id="s5">
        <img src="images/s10-img.png" width="203" height="226" alt="s10">
        </div>                                      
    </li>
    <li>    
        <div class="image" id="s6">
        <img src="images/s10-img.png" width="203" height="226" alt="s10">
        </div>                                      
    </li>
.........
16slides    
</ul>

JS 

if ( typeof( os_args )==='undefined' ) os_args = [];
var os_speed = ( os_args.speed ) ? os_args.speed : 500;
var os_timeout = os_args.timeout;

var os_title = '.title';    // slide title element selector
var os_desc = '.desc';      // slide description element selector

var os_pagerElementsOnPage = 1;     // number of pager elements on page
var os_pagerElementWidth = 160;
var os_pagerWidth = os_pagerElementsOnPage * os_pagerElementWidth;

var os_manual = false;      // true - pause, false - play
var os_currPage = 0;        // current page number ( 0 - start )
var os_slidesCount = 0;     // slides count
var os_pagesCount = 0;      // pages count

function setPagerWidth() {
    var pagerLenght = jQuery('#os_pager > ul > li').length;
    var pagerWidth = pagerLenght * os_pagerElementWidth; 
    jQuery('#os_pager > ul').width(pagerWidth);
}

function goToPage(page) {
    jQuery('#os_pager > ul').animate({
        'left': '-' + os_pagerWidth * page + 'px' 
    },500);
}

function goToNextPage() {
    var os_nextPageFirstSlide = 0;
    var os_nextPage = os_currPage + 1;

    if ( os_nextPage < os_pagesCount) {
        os_nextPageFirstSlide = os_nextPage * os_pagerElementsOnPage;
    } else {
        // tu mozna zrobic blokowanie powrotu do poczatku jesli ma nie byc petli
    }

    os_manual = false; // pokaz ma sie wznawiac po kliknieciu next/prev
    jQuery('#os_cycle').cycle(os_nextPageFirstSlide);
}

function goToPrevPage() {
    var os_prevPageFirstSlide = 0;
    var os_prevPage = os_currPage - 1;

    if ( os_currPage <= os_pagesCount) {
        os_prevPageFirstSlide = os_currPage - 1;
    } else {
        // tu mozna zrobic blokowanie powrotu do poczatku jesli ma nie byc petli
        os_prevPageFirstSlide = ( os_currPage + 1 );
    }

    os_manual = false; // pokaz ma sie wznawiac po kliknieciu next/prev
    jQuery('#os_cycle').cycle(os_prevPageFirstSlide);
}

// creates pager elements
function pagerAnchorBuilder(id, slide) {
    var output = "";
    var title = jQuery('#os_cycle > li:eq('+id+') .title h2').text();
    var thumbnail = jQuery('#os_cycle > li:eq('+id+') .thumbnail img').attr('src');
    output += "<li>"+
        "<a href='#'>"
        +"<div class='icon'>"
        +"<img src='"+ thumbnail +"' />"        
        +"</div>"
        +"<p>"+ title +"</p>"
        +"</a>"
        +"</li>";   

    return output;
}    

function onBefore(curr, next, opts, fwd) {
    jQuery(next).find(os_title).css({'display':'none', 'right':'-950px'});
    jQuery(next).find(os_desc).css({'display':'none', 'left':'-950px'});

    // prevent doing this when pager element click
    if (!os_manual)
    {
        if (opts.nextSlide == 0) {
            os_currPage = 0;    
        }
        else if (opts.nextSlide % os_pagerElementsOnPage == 0) {            
            os_currPage += 1;
        }
        goToPage(os_currPage);
    }
}

function onAfter(curr, next, opts, fwd) {
    jQuery(this).find(os_title).css({'display':'block'}).delay(70).stop().animate({'right':'0px'}, 250, 'easeOutQuad');
    jQuery(this).find(os_desc).css({'display':'block'}).delay(250).stop().animate({'left':'0px'}, 400, 'easeOutQuad');
}

function init() {
    setPagerWidth()
    os_slidesCount =  jQuery('#os_pager > ul > li').length;
    os_pagesCount = os_slidesCount / os_pagerElementsOnPage;
    os_pagesCount = Math.ceil(os_pagesCount);
}

jQuery(document).ready(function($){

    $('#Offer_slider .controls').append('<div id="os_pager"><ul></ul></div>');

    $('#os_cycle').cycle({
        fx:         'scrollLeft',
        easing:     'easeOutQuad',
        cleartype:  false,
        speed:      os_speed,
        timeout:    os_timeout,
        nowrap:     0,
        sync:       0,
        pause:      1,  // pause on hover
        randomizeEffects:   0,
        before:     onBefore,
        after:      onAfter,
        pager:      '#os_pager > ul',
        pagerAnchorBuilder: pagerAnchorBuilder 
    });

    init();

    $('#os_pager > ul > li > a').click(function(){
        os_manual = true;
        $('#os_cycle').cycle('pause');
    })

    $('#next_arrow').click(function(){
        goToNextPage();     
        return false;
    });

    $('#prev_arrow').click(function(){
        goToPrevPage();     
        return false;
    });

});

1 个答案:

答案 0 :(得分：0)

OFFFFFFFFFFFFO atlast我找到了自己的解决方案....请查看下面的更新代码以获得解决方案。 我唯一改变的是上一个和下一个按钮代码。

希望能帮助其他人。

的 JS 的

if ( typeof( os_args )==='undefined' ) os_args = [];
var os_speed = ( os_args.speed ) ? os_args.speed : 500;
var os_timeout = os_args.timeout;

var os_title = '.title';    // slide title element selector
var os_desc = '.desc';      // slide description element selector

var os_pagerElementsOnPage = 1;     // number of pager elements on page
var os_pagerElementWidth = 160;
var os_pagerWidth = os_pagerElementsOnPage * os_pagerElementWidth;

var os_manual = false;      // true - pause, false - play
var os_currPage = 0;        // current page number ( 0 - start )
var os_slidesCount = 0;     // slides count
var os_pagesCount = 0;      // pages count

function setPagerWidth() {
    var pagerLenght = jQuery('#os_pager > ul > li').length;
    var pagerWidth = pagerLenght * os_pagerElementWidth; 
    jQuery('#os_pager > ul').width(pagerWidth);
}

function goToPage(page) {
    jQuery('#os_pager > ul').animate({
        'left': '-' + os_pagerWidth * page + 'px' 
    },500);
}

function goToNextPage() {
    var os_nextPageFirstSlide = 0;
    var os_nextPage = os_currPage + 1;

    if ( os_nextPage < os_pagesCount) {
        os_nextPageFirstSlide = os_currPage * os_pagerElementsOnPage;
    } else {
        // tu mozna zrobic blokowanie powrotu do poczatku jesli ma nie byc petli
    }

    os_manual = false; // pokaz ma sie wznawiac po kliknieciu next/prev
    jQuery('#os_cycle').cycle(os_nextPageFirstSlide);
}

function goToPrevPage() {
    var os_prevPageFirstSlide = 0;
    var os_prevPage = os_currPage - 1;

    if ( os_prevPage <= os_pagesCount) {
        os_prevPageFirstSlide = (os_currPage - 1) * os_pagerElementsOnPage;

    } else {
        // tu mozna zrobic blokowanie powrotu do poczatku jesli ma nie byc petli
        os_prevPageFirstSlide = os_prevPage - 1;
    }
    os_currPage = os_currPage - 1;
    os_manual = false; // pokaz ma sie wznawiac po kliknieciu next/prev
    jQuery('#os_cycle').cycle(os_prevPageFirstSlide);

}

// creates pager elements
function pagerAnchorBuilder(id, slide) {
    var output = "";
    var title = jQuery('#os_cycle > li:eq('+id+') .title h2').text();
    var thumbnail = jQuery('#os_cycle > li:eq('+id+') .thumbnail img').attr('src');
    output += "<li>"+
        "<a href='#'>"
        +"<div class='icon'>"
        +"<img src='"+ thumbnail +"' />"        
        +"</div>"
        +"<p>"+ title +"</p>"
        +"</a>"
        +"</li>";   

    return output;
}    

function onBefore(curr, next, opts, fwd) {
    jQuery(next).find(os_title).css({'display':'none', 'right':'-950px'});
    jQuery(next).find(os_desc).css({'display':'none', 'left':'-950px'});

    // prevent doing this when pager element click
    if (!os_manual)
    {
        if (opts.nextSlide == 0) {
            os_currPage = 0;    
        }
        else if (opts.nextSlide % os_pagerElementsOnPage == 0) {            
            os_currPage += 1;
        }
        goToPage(os_currPage);
    }
}

function onAfter(curr, next, opts, fwd) {
    jQuery(this).find(os_title).css({'display':'block'}).delay(70).stop().animate({'right':'0px'}, 250, 'easeOutQuad');
    jQuery(this).find(os_desc).css({'display':'block'}).delay(250).stop().animate({'left':'0px'}, 400, 'easeOutQuad');
}

function init() {
    setPagerWidth()
    os_slidesCount =  jQuery('#os_pager > ul > li').length;
    os_pagesCount = os_slidesCount / os_pagerElementsOnPage;
    os_pagesCount = Math.ceil(os_pagesCount);
}

jQuery(document).ready(function($){

    $('#Offer_slider .controls').append('<div id="os_pager"><ul></ul></div>');

    $('#os_cycle').cycle({
        fx:         'scrollLeft',
        easing:     'easeOutQuad',
        cleartype:  false,
        speed:      os_speed,
        timeout:    os_timeout,
        nowrap:     0,
        sync:       0,
        pause:      1,  // pause on hover
        randomizeEffects:   0,
        before:     onBefore,
        after:      onAfter,
        pager:      '#os_pager > ul',
        pagerAnchorBuilder: pagerAnchorBuilder 
    });

    init();

    $('#os_pager > ul > li > a').click(function(){
        os_manual = true;
        $('#os_cycle').cycle('pause');
    })

    $('#next_arrow').click(function(){
        goToNextPage();     
        return false;
    });

    $('#prev_arrow').click(function(){
        goToPrevPage();     
        return false;
    });

});
相关问题
最新问题