https://online.lec-jp.com/js/slider.js

1$(function(){
2  
3  if($("#topslide").length){
4  
5    $("#slide_frame").after();
6    $(".slide_thumb_inner").before('<div class="slide_thumb_inner_pre"></div>');
7    $(".slide_thumb_inner_pre").html($(".slide_thumb_inner").html());
8  
9    $(".slide_thumb_inner").after('<div class="slide_thumb_inner_next"></div>');
10    $(".slide_thumb_inner_next").html($(".slide_thumb_inner").html());
11    
12    var $carousel = $('#slide_frame').carousel({
13        start: 1,
14        indicator: true
15      });
16    var active = 0;
17  
18    $(".carousel_indicator").before('<div id="thumb_wrap"></div>');
19    $("#thumb_wrap").html($("#thumb_wrap_dum").html());
20    $("#thumb_wrap_dum").remove();
21    
22    /*•Œˆ’è*/
23    var box_w = $('.thumb_box').width() + 10;
24    var box_c = $('.thumb_box').size() / 3;
25    $('.slide_thumb_inner').css('width',box_w * box_c);
26    $('.slide_thumb_inner_pre').css('width',box_w * box_c);
27    $('.slide_thumb_inner_next').css('width',box_w * box_c);
28    
29    /*ƒ|ƒWƒVƒ‡ƒ“Œˆ’è*/
30    var slide_thumb = $('#slide_thumb').width() / 2;
31    var left_position = slide_thumb - box_w/2;
32    var pre_position = left_position - box_w * box_c;
33    var next_position = left_position + box_w * box_c;
34    
35    $('.slide_thumb_inner').css('left',left_position);
36    $('.slide_thumb_inner_pre').css('left',pre_position);
37    $('.slide_thumb_inner_next').css('left',next_position);
38    
39    $('.slide_prev').on('click', function(ev) {
40      ev.preventDefault();
41      $carousel.carousel('prev');
42      active = active - 1;disp();
43    });
44    $('.slide_next').on('click', function(ev) {
45      ev.preventDefault();
46      $carousel.carousel('next');
47      active = active + 1;disp();
48    });
49    
50    setInterval(function() {
51      $carousel.carousel('next');
52      active = active + 1;disp();
53    }, 5000);
54    
55    function disp(){
56      if(active>=box_c){
57        position = left_position - box_w * active;
58        position2 = pre_position - box_w * active;
59        position3 = next_position - box_w * active;
60        $('.slide_thumb_inner').animate({"left":position},300,function(){$('.slide_thumb_inner').css('left',left_position);});
61        $('.slide_thumb_inner_pre').animate({"left":position2},300,function(){$('.slide_thumb_inner_pre').css('left',pre_position);});
62        $('.slide_thumb_inner_next').animate({"left":position3},300,function(){$('.slide_thumb_inner_next').css('left',next_position);});
63        active=0;
64      } else
65      if(active<0){
66        position = left_position - box_w * active;
67        position2 = pre_position - box_w * active;
68        position3 = next_position - box_w * active;
69        $('.slide_thumb_inner').animate({"left":position},300,function(){$('.slide_thumb_inner').css('left',left_position - box_w * (box_c-1));});
70        $('.slide_thumb_inner_pre').animate({"left":position2},300,function(){$('.slide_thumb_inner_pre').css('left',pre_position - box_w * (box_c-1));});
71        $('.slide_thumb_inner_next').animate({"left":position3},300,function(){$('.slide_thumb_inner_next').css('left',next_position - box_w * (box_c-1));});
72        active=box_c-1;
73      } else {
74        position = left_position - box_w * active;
75        position2 = pre_position - box_w * active;
76        position3 = next_position - box_w * active;
77        $('.slide_thumb_inner').animate({"left":position},300);
78        $('.slide_thumb_inner_pre').animate({"left":position2},300);
79        $('.slide_thumb_inner_next').animate({"left":position3},300);
80      }
81      
82    };
83  
84  }
85  
86})