文章/答案/技术大牛

发布

社区首页 >问答首页 >创建垂直图像旋转木马

问创建垂直图像旋转木马
EN

Stack Overflow用户

提问于 2016-01-07 07:09:21

回答 3查看 1.3K关注 0票数 5

我试图创建一个自定义垂直图像旋转木马，因为我不能使用任何插件，因为js事件附加到我需要保留的图像，而唯一适合我的方法就是创建定制的旋转木马。

Functionalities

图像传送带在视口中有三个相同的大小。
图像旋转木马有“下一个/前一个”按钮，允许您查看/选择更多图像。
下一个/前一个按钮一次只允许一个步骤，这意味着它不会选择下一组图像并在视口中显示它。

旋转木马允许您选择视口中的任何图像，当单击next/prev按钮时，这将同步。

上面列出的所有功能都已经实现。

问题

最后一个图像将不会在next按钮之前突然/停止，因为它将在中间创建空白。

JS代码

$(function(){
        var image_height = 0;
        var gallery_offset = 0;
        var image_count = $('img.thumbnail').length;
        var click_count = 0;
        var image_height = 0;
        var last_images_count = 0;

        $('.gallery-container a').click(function(){
          $('.gallery-container a').removeClass('active')
            $(this).addClass('active');

        });

        jQuery('.thumbnail').each(function(){
          $(this).on('load', function(){ image_height = $(this).parent().outerHeight(); });
          image_height = $(this).parent().outerHeight();
        })

        // Disable arrows if the images count is 3 below
        if(image_count <= 3) {
            $('.product-more-pictures .up, .product-more-pictures .down').addClass('disabled')
            click_count = 0;
        }

        // Set the first image as active
        jQuery('.gallery-container img.thumbnail').first().click();
        var thumb_active = jQuery('.gallery-container .active');

        $('.gallery-container a').on('click', function() {
            thumb_active = jQuery('.gallery-container .active');
        });

        $('.product-more-pictures .down').on('click', function (e) {
            $('.product-more-pictures .up').removeClass('disabled')
            if(thumb_active.nextAll(':lt(1)').length) {
              thumb_active.nextAll(':lt(1)').children().click()
              thumb_active = jQuery('.gallery-container .active');

            } 

            if( ! thumb_active.next().length) {
              $(this).addClass('disabled')
            } else {
              $(this).removeClass('disabled');
            }

            if (click_count < image_count) {
                click_count = click_count + 1;

                update_gallery('down');
            }



        });

        $('.product-more-pictures .up').on('click', function () {
            $('.product-more-pictures .down').removeClass('disabled')
            if(thumb_active.prevAll(':lt(1)').length) {
              thumb_active.prevAll(':lt(1)').children().click()
              thumb_active = jQuery('.gallery-container .active');
            }

            if( ! thumb_active.prev().length) {
              $(this).addClass('disabled')
            } else {
              $(this).removeClass('disabled');
            }

            if (click_count > 0) {
                click_count = click_count - 1;

                update_gallery('up');

            }
        });

        function update_gallery(direction) {         
            gallery_offset = click_count * image_height;
            last_images_count = thumb_active.nextAll().length;

            $(".gallery-container").animate({
              'top': '-' + gallery_offset + 'px'
            }, 800);

        }

});

小提琴：https://jsfiddle.net/qrvrdjch/6/

如能提供任何帮助，将不胜感激:)

javascript

jquery

carousel

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-01-07 09:04:49

试试这个..。您需要初始化单击计数为-1，并将if (click_count < image_count)更改为"if (click_count < image_count - 3)“，因为在加载时首先是默认选定的图像，因此此图像将满足您的需要--我猜是NB:在css和HTML中不需要更改

$(function(){
    var image_height = 0;
    var gallery_offset = 0;
    var image_count = $('img.thumbnail').length;
    var click_count = -1;
    var image_height = 0;
    var last_images_count = 0;

    $('.gallery-container a').click(function(){
      $('.gallery-container a').removeClass('active')
        $(this).addClass('active');

    });

    jQuery('.thumbnail').each(function(){
      $(this).on('load', function(){ image_height = $(this).parent().outerHeight(); });
      image_height = $(this).parent().outerHeight();
    })

    // Disable arrows if the images count is 3 below
    if(image_count <= 3) {
        $('.product-more-pictures .up, .product-more-pictures .down').addClass('disabled')
        click_count = 0;
    }

    // Set the first image as active
    jQuery('.gallery-container img.thumbnail').first().click();
    var thumb_active = jQuery('.gallery-container .active');

    $('.gallery-container a').on('click', function() {
        thumb_active = jQuery('.gallery-container .active');
    });

    $('.product-more-pictures .down').on('click', function (e) {
        $('.product-more-pictures .up').removeClass('disabled')
        if(thumb_active.nextAll(':lt(1)').length) {
          thumb_active.nextAll(':lt(1)').children().click()
          thumb_active = jQuery('.gallery-container .active');

        } 

        if( ! thumb_active.next().length) {
          $(this).addClass('disabled')
        } else {
          $(this).removeClass('disabled');
        }
        if (click_count < image_count - 3) {
            console.log(image_count)
            console.log(click_count)
            click_count = click_count + 1;

            update_gallery('down');
        }



    });

    $('.product-more-pictures .up').on('click', function () {
        $('.product-more-pictures .down').removeClass('disabled')
        if(thumb_active.prevAll(':lt(1)').length) {
          thumb_active.prevAll(':lt(1)').children().click()
          thumb_active = jQuery('.gallery-container .active');
        }

        if( ! thumb_active.prev().length) {
          $(this).addClass('disabled')
        } else {
          $(this).removeClass('disabled');
        }

        if (click_count > 0) {
            click_count = click_count - 1;

            update_gallery('up');

        }
    });

    function update_gallery(direction) {         
        gallery_offset = click_count * image_height;
        last_images_count = thumb_active.nextAll().length;

        $(".gallery-container").animate({
          'top': '-' + gallery_offset + 'px'
        }, 800);

    }

});

票数 5

Stack Overflow用户

发布于 2016-01-07 08:27:47

你快到了。你只需要编辑一个条件。将"if (click_count < image_count)“按钮下的”事件“(JSFiddle中的第48行)更改为"if (click_count < image_count-3)”

$(function(){
        var image_height = 0;
        var gallery_offset = 0;
        var image_count = $('img.thumbnail').length;
        var click_count = 0;
      	var image_height = 0;
        var last_images_count = 0;
        
        $('.gallery-container a').click(function(){
          $('.gallery-container a').removeClass('active')
        	$(this).addClass('active');
          
        });
        
      	jQuery('.thumbnail').each(function(){
          $(this).on('load', function(){ image_height = $(this).parent().outerHeight(); });
          image_height = $(this).parent().outerHeight();
        })
        
        // Disable arrows if the images count is 3 below
        if(image_count <= 3) {
        	$('.product-more-pictures .up, .product-more-pictures .down').addClass('disabled')
            click_count = 0;
        }
        
        // Set the first image as active
        jQuery('.gallery-container img.thumbnail').first().click();
      	var thumb_active = jQuery('.gallery-container .active');
        
        $('.gallery-container a').on('click', function() {
        	thumb_active = jQuery('.gallery-container .active');
        });

        $('.product-more-pictures .down').on('click', function (e) {
          	$('.product-more-pictures .up').removeClass('disabled')
          	if(thumb_active.nextAll(':lt(1)').length) {
              thumb_active.nextAll(':lt(1)').children().click()
              thumb_active = jQuery('.gallery-container .active');

            } 
          
            if( ! thumb_active.next().length) {
              $(this).addClass('disabled')
            } else {
              $(this).removeClass('disabled');
            }
            
            if (click_count < image_count-3) {
                click_count = click_count + 1;
              
                update_gallery('down');
            }
          
            
          	
        });

        $('.product-more-pictures .up').on('click', function () {
          	$('.product-more-pictures .down').removeClass('disabled')
          	if(thumb_active.prevAll(':lt(1)').length) {
              thumb_active.prevAll(':lt(1)').children().click()
              thumb_active = jQuery('.gallery-container .active');
            }
          
          	if( ! thumb_active.prev().length) {
              $(this).addClass('disabled')
            } else {
              $(this).removeClass('disabled');
            }
            
            if (click_count > 0) {
                click_count = click_count - 1;
                
                update_gallery('up');
                
            }
        });
      
        function update_gallery(direction) {         
            gallery_offset = click_count * image_height;
            last_images_count = thumb_active.nextAll().length;
           
            $(".gallery-container").animate({
              'top': '-' + gallery_offset + 'px'
            }, 800);
        
        }
        
});

.product-more-pictures a {
  display: block;
  text-align: center;
}

.product-more-pictures a.disabled {
  pointer-events: none !important;
  cursor: default;
  visibility: visible !important;
  background: #C3C3C3;
}

.product-more-pictures a.down.disabled:before,
.product-more-pictures a.up.disabled:before{
	content: ' ';
    background: rgba(255, 255, 255, 0.42);
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    bottom: 0px;
}

.product-more-pictures {
  text-align: right;
  height: 549px;
  width: 111px;
  overflow: hidden;
  position: relative;

}

.gallery-container {
  position: relative;
  padding: 30px 0px;
}

.gallery-container img {
  margin-bottom: 0px;
}

#product-photos .product-more-pictures {
  width: 18.516667%;
}

.product-more-pictures .up,
.product-more-pictures .down {
  position: absolute;
  background: #999;
  padding: 0px;
  width: 100%;
  text-align: center;
  z-index: 80;
  color: #fff;
  padding: 5px 10px;
}

.product-more-pictures .up { top: 0px; }
.product-more-pictures .down {
  bottom: 0px; 
}

.product-more-pictures a.active img {
  border: solid 1px rgba(95, 95, 95,0.75) !important;
}

.product-more-pictures .icon-chevron-up,
.product-more-pictures .icon-chevron-down {
  color: #fff !important;
  font-size: 21px;
  position: relative;
}

.product-more-pictures .icon-chevron-up {
  top: 0px;
}

.zoomContainer { z-index: 999; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-more-pictures desktop-3">
      <a href="#" class="up">up</a>
      <div class="gallery-container">
      
          <a href="#">
            <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_027_compact.jpg?v=1451925772" alt="Sheer Perfection Tunic">
          </a>
    
          <a href="#">
            <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_111_compact.jpg?v=1451925773"alt="Sheer Perfection Tunic">
          </a>
      
          <a href="#">
            <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_194_compact.jpg?v=1451925774" alt="Sheer Perfection Tunic">
          </a>
    
          <a href="#" >
            <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_029_compact.jpg?v=1451925774" alt="Sheer Perfection Tunic">
          </a>
    
          <a href="#">
            <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_095_compact.jpg?v=1451925775" data-image-id="8200864135" alt="Sheer Perfection Tunic">
          </a>
    
          <a href="#">
            <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_135_compact.jpg?v=1451925776" data-image-id="8200864327" alt="Sheer Perfection Tunic">
          </a>
    
          <a href="#" >
            <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_149_compact.jpg?v=1451925776" data-image-id="8200864775" alt="Sheer Perfection Tunic">
          </a>
    
          <a href="#" >
            <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_152_compact.jpg?v=1451925777" data-image-id="8200865671" alt="Sheer Perfection Tunic">
          </a>
    
          <a href="#">
            <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_159_compact.jpg?v=1451925778" data-image-id="8200866183" alt="Sheer Perfection Tunic">
          </a>
      
      </div>
      <a href="#" class="down">down</a>
    </div>

票数 4

Stack Overflow用户

发布于 2016-01-07 09:49:39

$(function(){
        var image_height = 0;
        var gallery_offset = 0;
        var image_count = $('img.thumbnail').length;
        var image_show = 3;
        var click_count = 0;
      	var image_height = 0;
        var last_images_count = 0;
        
        $('.gallery-container a').click(function(){
          $('.gallery-container a').removeClass('active')
        	$(this).addClass('active');
          
        });
        
      	jQuery('.thumbnail').each(function(){
          $(this).on('load', function(){ image_height = $(this).parent().outerHeight(); });
          image_height = $(this).parent().outerHeight();
        })
        
        // Disable arrows if the images count is 3 below
        if(image_count <= 3) {
        	$('.product-more-pictures .up, .product-more-pictures .down').addClass('disabled')
            click_count = 0;
        }
        
        // Set the first image as active
        jQuery('.gallery-container img.thumbnail').first().click();
      	var thumb_active = jQuery('.gallery-container .active');
        
        $('.gallery-container a').on('click', function() {
        	thumb_active = jQuery('.gallery-container .active');
        });

        $('.product-more-pictures .down').on('click', function (e) {
          	$('.product-more-pictures .up').removeClass('disabled')
          	if(thumb_active.nextAll(':lt(1)').length) {
              thumb_active.nextAll(':lt(1)').children().click()
              thumb_active = jQuery('.gallery-container .active');

            } 
          
            if( ! thumb_active.next().length || click_count > (image_count-image_show)) {
              $(this).addClass('disabled')
            } else {
              $(this).removeClass('disabled');
            }
          
            if (click_count < (image_count-image_show)) {
                click_count = click_count+1;
                update_gallery('down');
            }
          
            
          	
        });

        $('.product-more-pictures .up').on('click', function () {
          	$('.product-more-pictures .down').removeClass('disabled')
          	if(thumb_active.prevAll(':lt(1)').length) {
              thumb_active.prevAll(':lt(1)').children().click()
              thumb_active = jQuery('.gallery-container .active');
            }
          
          	if( ! thumb_active.prev().length) {
              $(this).addClass('disabled')
            } else {
              $(this).removeClass('disabled');
            }
            
            if (click_count > 0) {
                click_count = click_count - 1;
                
                update_gallery('up');
                
            }
        });
      
        function update_gallery(direction) {  
            gallery_offset = click_count * image_height;
            last_images_count = thumb_active.nextAll().length;
           
            $(".gallery-container").animate({
              'top': '-' + gallery_offset + 'px'
            }, 800);
        
        }
        
});

嗨,

我为句柄图像计数增加了一个可验证的image_show=3。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34649242

复制

相似问题

问创建垂直图像旋转木马
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建垂直图像旋转木马EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建垂直图像旋转木马
EN