jquery - 使用 jquery 创建一张幻灯片显示另一张幻灯片的效果

我想创建一个具有以下效果的滑块，当单击按钮时，https://codyhouse.co/demo/image-comparison-slider/index.html 显示了彼此之间的效果。我为每张幻灯片创建了 2 个按钮，并尝试做这样的事情

jQuery('#movetohappyscene').click(function(){
            jQuery('.badscene').animate({ marginLeft: '-1024px','z-index':'1'}, 2000);
            jQuery('.happyscene').animate({
                marginLeft: '0px',
                'z-index' : '2'
            }, 2000);
        });
        jQuery('#movetobadscene').click(function(){
            jQuery('.happyscene').animate({ 'z-index':'1'}, 2000);
            jQuery('.badscene').animate({'z-index':'2', marginLeft: '0px'},    2000);
        });


 <div class="slidecontainer">
    <div class="badscene">
        <a id="movetohappyscene">Click to show happy scene</a>
        <img src="img/badsceneempty.png">
    </div>
    <div class="happyscene">
        <a id="movetobadscene">Click to show sad scene</a>
         <img src="img/goodscene.png">
    </div>
 </div>

这是更新的 fiddle

但是效果和那个滑块不一样。如何自定义我的 js 使它们相似？

最佳答案

我有一个与你的问题类似的例子，但我是用纯 css 做的。

/**
 * Image slider with pure CSS
 */

.image-slider {
	position:relative;
	display: inline-block;
	line-height: 0;
}


.image-slider > div {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 25px;
	max-width: 100%;
	overflow: hidden;
	resize: horizontal;
}

/* Cross-browser resizer styling */
.image-slider > div:before {
	content: '';
	position: absolute;
	right: 0; bottom: 0;
	width: 13px; height: 13px;
	padding: 5px;
	background: linear-gradient(-45deg, black 50%, transparent 0);
	background-clip: content-box;
	cursor: ew-resize;
	-webkit-filter: drop-shadow(0 0 2px black);
	filter: drop-shadow(0 0 2px red);
}

.image-slider img {
	user-select: none;
	max-width: 400px;
}

<div class="image-slider">
  <div>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-before.jpg" />
  </div>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg" />
</div>

关于jquery - 使用 jquery 创建一张幻灯片显示另一张幻灯片的效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32962862/