Question

我正在尝试构建一个如下所述的手风琴菜单：

HTML

<div class="content_slider">
  <div class="content_title" data-default-text="<b>Diagonal Slider</b><br/>by @innvenio">
    <div class="text">
      <b>Diagonal Slider</b>
      <br/>by @innvenio
    </div>
  </div>
  <div class="gallery_content">
    <div class="gallery_item">
      <img src="http://static.innvenio.com/diagonalslider/images/1.jpg" data-title="Image 1" />
    </div>
    <div class="gallery_item">
      <img src="http://static.innvenio.com/diagonalslider/images/2.jpg" data-title="Image 2" />
    </div>
    <div class="gallery_item">
      <img src="http://static.innvenio.com/diagonalslider/images/3.jpg" data-title="Image 3" />
    </div>
    <div class="gallery_item">
      <img src="http://static.innvenio.com/diagonalslider/images/2.jpg" data-title="Image 4" />
    </div>
    <div class="gallery_item">
      <img src="http://static.innvenio.com/diagonalslider/images/1.jpg" data-title="Image 5" />
    </div>
  </div>
</div>

CSS

img {
  display: block;
  margin: 0px;
}

.content_title {
  position: absolute;
  padding: 50px 40px 50px 80px;
  background-color: #FFF;
  z-index: 100;
  font-size: 22px;
  margin-left: -60px;
  -webkit-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
  -moz-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
  -ms-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
  transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
}

.content_title .text {
  -webkit-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
  -moz-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
  -ms-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
  transform: translate3d(0, 0, 0) skew(20deg, 0deg);
}

.content_slider {
  width: 100%;
  overflow: hidden;
}

.gallery_content {
  overflow: hidden;
  margin-left: -170px;
}

.gallery_item {
  float: left;
  overflow: hidden;
  vertical-align: top;
  margin-left: -2px;
  -webkit-transition: width 500ms;
  -moz-transition: width 500ms;
  -o-transition: width 500ms;
  transition: width 500ms;
  -webkit-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
  -moz-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
  -ms-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
  transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
}

.gallery_item img {
  position: relative;
  -webkit-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
  -moz-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
  -ms-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
  transform: translate3d(0, 0, 0) skew(20deg, 0deg);
}

JS

<script type="text/javascript">

function loadSlider(slider,default_text){
    var w;
    var width = 0;
    var image_width = slider.find('.gallery_item img').width();
    var image_height = slider.find('.gallery_item img').height();
    var out = true;
    var valor = 0;        
    var length_gallery_item = slider.find('.gallery_item').length;

    valor = length_gallery_item * 25;
    if($(window).width()<1060){
        valor = length_gallery_item * 40;
    }
    w = $(window).width() + ($(window).width() / length_gallery_item) + valor;
    width = w / 3;
    slider.width(w);
    slider.height($(window).height());
    slider.find('.gallery_item').width((w / length_gallery_item));
    slider.find('.gallery_item img').css('margin-left', ((image_width / 2) * -1) + (w / length_gallery_item));
    if($(window).height()<image_height){            
        slider.find('.gallery_item img').css('top', ((image_height-$(window).height())/2)*-1);
    }
    var i = 1;
    slider.find('.gallery_item').each(function(){
        $(this).attr('data-position', i);
        i++;
    });

    height_img = slider.find('.gallery_item img').height();

    if(height_img<slider.height()){
        slider.height(height_img);
    }

    $('.content_slider').find('.content_title').css('margin-top',slider.height() - 200); 

    slider.find('.gallery_item').unbind("hover");
    slider.find('.gallery_item').hover(function(){
        if (out){
            zoomIn($(this), function(){
                out = false;    
            }); 
        }

    }, function(){
        zoomOut(function(){
            out = true; 
        });
    });

    function zoomOut(callback){
        slider.find('.gallery_item').each(function(){
            var x = w / length_gallery_item;
            $(this).css('width', x);
        });
        $('.content_slider').find('.content_title .text').html(default_text);
        callback();
    }

    function zoomIn(item, callback){
        slider.find('.gallery_item').each(function(){
            var x = (w / length_gallery_item) - (width / length_gallery_item-1);
            if ($(this).attr('data-position') != item.attr('data-position')){
                $(this).css('width', x);
            }
            else
            {
                item.css('width', ((w / length_gallery_item) + width) - ((width / length_gallery_item) * 1.5));
                var title = item.find('img').attr('data-title');
                $('.content_slider').find('.content_title .text').html(title);
            }
        });
        callback();
    }
}

(function($) {
    $.fn.createDiagonalSlider = function() {
        var slider = $(this);
        var doit;
        var default_text = $('.content_slider').find('.content_title').attr('data-default-text');

        setTimeout(function(){
            loadSlider(slider, default_text);
        }, 10);

        function resizedw(){
            loadSlider(slider, default_text);
        }
        window.onresize = function() {
            clearTimeout(doit);
            doit = setTimeout(function() {
                resizedw();
            }, 100);
        };

    }
}(jQuery));

</script>

但似乎有一个问题导致滑块（手风琴）出现问题。它不是一个接一个地显示图像，而是一个接一个地显示。 Here is the site I am working on:

您可以在主页的菜单下看到错误。

请有人看一看并善意纠正我。

谢谢。

Answer 1

这不是第一个图像标记的错误。它可见而不是图像本身的原因可能是因为标签缺少前导“＆lt;”。

现在你有了

img src="http://test.techkalph.com/wp-content/uploads/2015/10/golf-course-srinagar.jpg" data-title="Image 1"/>

但你可能应该

<img src="http://test.techkalph.com/wp-content/uploads/2015/10/golf-course-srinagar.jpg" data-title="Image 1"/>

如果没有代码，我不能指出更多。你能将这些代码添加到帖子中吗？

编辑：

你有没有调用createDiagonalSlider（）函数？

jQuery(document).ready(function(){
    jQuery('.gallery_content').createDiagonalSlider();
});

手风琴菜单的Javascript

1 个答案: