单个页面上有多个该轮播实例-无法使其正常工作 [英] Multiple instances of this carousel on a single page - can't get it to work

问题描述

此代码来自教程，因此最初不是我自己的作品.我想做的是在单个页面上多次执行此操作.我已经尝试过了，但到目前为止还是失败了-通过给ID轮播"编号，依此类推.任何帮助将不胜感激.我正在把头发扯掉.

This code comes from a tutorial so it's not originally my own work. What I am trying to do is implement this several times on a single page. I have tried and so far failed - by numbering the id "carousel" and so forth. Any help would be seriously appreciated. I'm tearing my hair out.

http://jsfiddle.net/AndyMP/zcKDV/5/

出于完整性考虑，这是目前的轮播JQuery.

For completeness.. this is the carousel JQuery as it stands.

//rotation speed and timer
var speed = 5000;
var run = setInterval('rotate()', speed);   

//grab the width and calculate left value
var item_width = $('#slides li').outerWidth();
var left_value = item_width * (-1);

//move the last item before first item, just in case user click prev button
$('#slides li:first').before($('#slides li:last'));

//set the default item to the correct position
$('#slides ul').css({'left' : left_value});

//if user clicked on prev button
$('#prev').click(function() {

    //get the right position            
    var left_indent = parseInt($('#slides ul').css('left')) + item_width;

    //slide the item            
    $('#slides ul').animate({'left' : left_indent}, 200,function(){    

        //move the last item and put it as first item               
        $('#slides li:first').before($('#slides li:last'));           

        //set the default item to correct position
        $('#slides ul').css({'left' : left_value});

    });

    //cancel the link behavior            
    return false;

});


//if user clicked on next button
$('#next').click(function() {

    //get the right position
    var left_indent = parseInt($('#slides ul').css('left')) - item_width;

    //slide the item
    $('#slides ul').animate({'left' : left_indent}, 200, function () {

        //move the first item and put it as last item
        $('#slides li:last').after($('#slides li:first'));                  

        //set the default item to correct position
        $('#slides ul').css({'left' : left_value});

    });

    //cancel the link behavior
    return false;

});        

//if mouse hover, pause the auto rotation, otherwise rotate it
$('#slides').hover(

    function() {
        clearInterval(run);
    },
    function() {
        run = setInterval('rotate()', speed);   
    }
);



//a simple function to click next link
//a timer will call this function, and the rotation will begin :)  
function rotate() {
$('#next').click();
}

推荐答案

当我重复代码，css和html时，我可以工作多个.你可以看看这个. (存在一些CSS问题，但可以使用)

When i duplicate code, css and html and i works multiple. You can look at this. (There is some css issues but it works)

http://jsfiddle.net/serkanalgur/mWe4c/

这篇关于单个页面上有多个该轮播实例-无法使其正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！