Question

当我需要在一个页面上的多个位置使用此滑块时，我遇到了问题。

为什么？
我有几年JS菜单的页面，当我点击年份“2005”然后我显示div（通过JQuery - 重新加载页面，我不能使用）我有一些链接，这个链接必须在滑块（CaroufredSel我首选）。之后我点击“2014”然后我隐藏“div 2005”并显示“2014”有相同的滑块但是另一个内容（例如 - 在2005年我有10个链接;在2014年我有7个链接）

我试过了什么？ - Caroufredsel在课堂上的使用（不在ID上），但在这种情况下仅适用于第一个滑块 - 之后我尝试使用更多的滑动这样的滑动：

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('#posuvnik_investic_0').carouFredSel({
      direction:  'up',
      auto:{
        play:false,
        pauseOnHover: true,
        pauseOnEvent: false
      },
      scroll:{
        duration: 500,
        items : "-1"
      },
      items:{
        visible:4,
        minimum:5
      },
      prev: '#prev_0',
      next: '#next_0',
      pagination: "#pager_0",
      swipe: {
        onMouse: false,
        onTouch: true
      }
    });
    $('#posuvnik_investic_1').carouFredSel({
      direction:  'up',
      auto:{
        play:false,
        pauseOnHover: true,
        pauseOnEvent: false
      },
      scroll:{
        duration: 500,
        items : "-1"
      },
      items:{
        visible:4,
        minimum:5
      },
      prev: '#prev_1',
      next: '#next_1',
      pagination: "#pager_1",
      swipe: {
        onMouse: false,
        onTouch: true
      }
    });
  });
</script>

这段代码不太好，但测试还可以。但这也行不通。

我是否可以通过某种方式在一个页面上运行多个（例如10个）Caroufredsel滑块？

Answer 1

如果你想使用carouFredSel。你会做这个.js脚本

$(".sec_elem").carouFredSel({
circular: true,
infinite: false,
width:'100%',
auto    : true,
scroll  : {
    items   : 1,
    pauseOnHover    : true,
    duration    : 1000
},
prev    : {
    button  : function(){
        return $(this).parents('.image_carousel').find('.prev');
    },
    key     : "left"
},
next    : {
    button  : function(){
        return $(this).parents('.image_carousel').find('.next');
    },
    key     : "right"
}
});

... HTML

<div class="image_carousel">
<div class="sec_elem">
    <div class="tem-bl">
        <img src="image.jpg" alt=""/>
    </div>
    <div class="tem-bl">
        <img src="image.jpg" alt=""/>
    </div>
    <div class="tem-bl">
        <img src="image.jpg" alt=""/>
    </div>
</div>

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

Answer 2

java脚本

//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();
 }
 //First One
// Second Time
//rotation speed and timer
var speed = 5000;
var run = setInterval('rotate()', speed);   

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

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

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

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

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

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

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

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

    });

    //cancel the link behavior            
    return false;

});


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

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

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

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

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

    });

    //cancel the link behavior
    return false;

});        

//if mouse hover, pause the auto rotation, otherwise rotate it
$('#slides1').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() {
$('#next1').click();
}

CSS

#carousel, #caoursel1 {
width:255px;
height:290px;   
margin:0 auto;
}

#slides, #slides1 {
overflow:hidden;
/* fix ie overflow issue */
position:relative;
width:250px;
height:250px;
border:1px solid #ccc;
}

/* remove the list styles, width : item width * total items */ 
#slides ul, #slides1 ul {
position:relative;
left:0;
top:0;
list-style:none;
margin:0;
padding:0;  
width:750px;            
}

/* width of the item, in this case I put 250x250x gif */
#slides li, #slides1 li {
width:250px;
height:250px;   
float:left;
}

#slides li img, #slides1 li {
padding:5px;
}

/* Styling for prev and next buttons */
#buttons, #buttons1 {
padding:0 0 5px 0;  
float:right;
}

#buttons a, #buttons1 a {
display:block; 
width:31px; 
height:32px;
text-indent:-999em;
float:left;
outline:0;
}

a#prev, a#prev1 {
background:url(http://www.queness.com/resources/html/carousel/arrow.gif) 0 -31px no-repeat; 
}

a#prev:hover, a#prev1:hover {
background:url(http://www.queness.com/resources/html/carousel/arrow.gif) 0 0 no-repeat;
}

a#next, a#next1 {
background:url(http://www.queness.com/resources/html/carousel/arrow.gif) -32px -31px no-repeat; 
}

a#next:hover, a#next1:hover {
background:url(http://www.queness.com/resources/html/carousel/arrow.gif) -32px 0 no-repeat;
}

.clear {clear:both}

HTML

<div id="carousel">
<div id="buttons">
    <a href="#" id="prev">prev</a>
    <a href="#" id="next">next</a>
    <div class="clear"></div>
</div>

<div class="clear"></div>

<div id="slides"> 
    <ul>
        <li><img src="http://www.queness.com/resources/html/carousel/slide1.gif" width="240"    height="240" alt="Slide 1"/></li>
        <li><img src="http://www.queness.com/resources/html/carousel/slide2.gif" width="240" height="240" alt="Slide 2"/></li>
        <li><img src="http://www.queness.com/resources/html/carousel/slide3.gif" width="240"  height="240" alt="Slide 3"/></li>
    </ul>
     <div class="clear"></div>
 </div>

</div>

<div id="carousel1">
<div id="buttons1">
    <a href="#" id="prev1">prev</a>
    <a href="#" id="next1">next</a>
    <div class="clear"></div>
</div>

<div class="clear"></div>

<div id="slides1"> 
    <ul>
        <li><img src="http://www.queness.com/resources/html/carousel/slide1.gif" width="240"  height="240" alt="Slide 1"/></li>
        <li><img src="http://www.queness.com/resources/html/carousel/slide2.gif" width="240" height="240" alt="Slide 2"/></li>
        <li><img src="http://www.queness.com/resources/html/carousel/slide3.gif" width="240" height="240" alt="Slide 3"/></li>
    </ul>
    <div class="clear"></div>
 </div>

一页上有多个相同的Caroufredsel

2 个答案: