带有多个图像的滑块前后 [英] Before and After Slider with Multiple Images

问题描述

我正在尝试创建一个页面，该页面的前后图像都使用基于鼠标移动的滑块显示两个图像.我需要页面上有多个滑块，但似乎无法使它们正常工作.以下是我发现的几个不同的例子以及我所面临的挑战.

http://codepen.io/dudleystorey/pen/JDphy -与移动版，但我似乎无法在不为每个图像添加CSS的情况下添加第二个版本，因为背景图像已嵌入到CSS中.

div#inked-painted { 
  position: relative; font-size: 0; 
  -ms-touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
div#inked-painted img { 
  width: 100%; height: auto; 
}
div#colored { 
  background-image: url(https://s3-us-west2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg);
  position: absolute;
  top: 0; left: 0; height: 100%;
  width: 50%;
  background-size: cover; 
}

http://codepen.io/ace/pen/BqEer -这是另一个该示例不适用于移动设备.我可以添加第二个图像，但是添加第二个图像时，滑块会同时处理所有图像，而不是单独处理.

任何人都可以帮助添加第二张图像.我确信这两种方法都非常可行，但是我在css/javascript知识中遗漏了不允许多张图片的内容.

解决方案

您需要循环所有类，以便能够分别设置事件处理程序.您的codepen示例可以更改为立即处理单个图像:

var blackWhiteElements= document.getElementsByClassName("black_white");

for (i = 0; i < blackWhiteElements.length; i++) {   
  initCode($(blackWhiteElements[i]));
}


function initCode($black_white) {
var img_width = $black_white.find('img').width();

var init_split = Math.round(img_width/2);

$black_white.width(init_split);  

        $black_white.parent('.before_after_slider').mousemove(function(e){
        var offX  = (e.offsetX || e.clientX - $black_white.offset().left);
            $black_white.width(offX);
        });
        $black_white.parent('.before_after_slider').mouseleave(function(e){
        $black_white.stop().animate({
        width: init_split
        },1000)
        });
}

在此处

codepen: http://codepen.io/anon/pen/mJPmKV

I am trying to create a page that has before and after images that use a slider based on mouse movement to show both images. I need to have multiple sliders on the page and can not seem to get them to work. Below are a couple of different examples I have found and the challenges I am having.

http://codepen.io/dudleystorey/pen/JDphy - This works well with mobile but I can not seem to add a second version without adding css for every image since the background image is embedded in the css.

div#inked-painted { 
  position: relative; font-size: 0; 
  -ms-touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
div#inked-painted img { 
  width: 100%; height: auto; 
}
div#colored { 
  background-image: url(https://s3-us-west2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg);
  position: absolute;
  top: 0; left: 0; height: 100%;
  width: 50%;
  background-size: cover; 
}

http://codepen.io/ace/pen/BqEer - Here is the other example that does not work as well with mobile. I can add the second image but the slider works all the images simultaneously and not individually when a second image is added.

Can anyone help with adding the second image. I am sure both of these are very workable but I am missing something in my css/javascript knowledge that is not allowing multiple images.

解决方案

You need to loop though all classes to be able set the eventhandlers individual. Your codepen example could be change to this to work with individual images at once:

var blackWhiteElements= document.getElementsByClassName("black_white");

for (i = 0; i < blackWhiteElements.length; i++) {   
  initCode($(blackWhiteElements[i]));
}


function initCode($black_white) {
var img_width = $black_white.find('img').width();

var init_split = Math.round(img_width/2);

$black_white.width(init_split);  

        $black_white.parent('.before_after_slider').mousemove(function(e){
        var offX  = (e.offsetX || e.clientX - $black_white.offset().left);
            $black_white.width(offX);
        });
        $black_white.parent('.before_after_slider').mouseleave(function(e){
        $black_white.stop().animate({
        width: init_split
        },1000)
        });
}

codepen here: http://codepen.io/anon/pen/mJPmKV

这篇关于带有多个图像的滑块前后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！