我正在制作一个应用程序展示网站。我有一个带有全宽垂直幻灯片的页面。我在屏幕上添加了固定电话。我想当用户使用按钮滑动手机时在手机上添加图像。
当他按下按钮时,jquery 从手机中删除当前图像并以滑动方式添加新图像。我在codyhouse上找到了教程https://codyhouse.co/demo/app-introduction-template/index.html#cd-product-tour .
这是一个很好的教程,但无法以垂直方式完成。我的幻灯片代码是这样的
<div id="allslides">
<div id="1" class="slides" phone_image='its the url of the image going to be added on the phone when the slide is active '>
<h1>My Appp</h1>
<p class='content'>Some content</p>
</div>
<div id="2" class="slides" phone_image='its the url of the image going to be added on the phone when the slide is active '>
<h1>My Appp</h1>
<p class='content'>Some content</p>
</div>
<div id="3" class="slides" phone_image='its the url of the image going to be added on the phone when the slide is active '>
<h1>My Appp</h1>
<p class='content'>Some content</p>
</div>
<div id="4" class="slides" phone_image='its the url of the image going to be added on the phone when the slide is active '>
<h1>My Appp</h1>
<p class='content'>Some content</p>
</div>
</div>
我给 .slides 的宽度和高度设置为 100%。 slider 工作得很好,手机完美地固定在屏幕上。但我希望手机图像在每张幻灯片上都发生变化,它的效果应该与链接上的相同,但采用垂直方式。
我的导航按钮代码是这样的
<div id="navigation">
<ul>
<li><a href="#" class="bullets" id="bullet1" onclick="slider(1)"></a></li>
<li><a href="#" class="bullets" id="bullet2" onclick="slider(2)"></a></li>
<li><a href="#" class="bullets" id="bullet3" onclick="slider(3)"></a></li>
<li><a href="#" class="bullets" id="bullet4" onclick="slider(4)"></a></li>
</ul>
</div>
html的电话是这个
<div class="phone">
<div class="cd-image-container">
<div>
<div class="cd-phone-frame"></div>
<div class="cd-image-wrapper">
</div>
</div>
</div>
</div>
我使用的jQuery是这个
$(document).ready(function(){
$(".bullets").first().addClass('activeBullet');
var image = $("#1").attr('phone_image');
$('.cd-image-wrapper').prepend('<img src="'+image+'"data-video="video/video-2" alt="Screen Preview 2">');
setTimeout(function(){
$('.cd-image-wrapper img').slideDown("fast");
},1);
});
The slider function is this
function slider(n){
var ID = $(".activeDiv").attr("id");
var sid= ID.split("slide");
var new_id = sid[1];
if(new_id == n){
}else{
$(".slides").removeClass('activeDiv');
$("#slide"+n).addClass('activeDiv');
var top = $("#slide"+n).position().top;
$("#mainbar").css({'top':-top});
$(".bullets").removeClass('activeBullet');
$("#bullet"+n).addClass('activeBullet'); $('.cd-image-wrapper img').fadeOut("slow", function(){
var images = $("#"+id).attr('phone_image');
var div = $('<img src="'+images+'"data-video="video/video-2" alt="Screen Preview 2">').hide();
$(this).replaceWith(div);
$('.cd-image-wrapper img').fadeIn("slow");
});
}
}
正如你所看到的,我能够以淡出和淡入的方式制作手机图像变化效果。谁能告诉我如何以幻灯片和幻灯片的方式做到这一点?
最佳答案
不太明白你的意思。我无法添加评论,所以就写在这里。
如果您想单击按钮和 DIV 幻灯片。
你可以只使用 css animate 像 animate.css
首先将你想要的div设为slideIn位置:absolute top:100%;
和你想要slideOut的div位置:absolute top:0;
然后,当您单击按钮时,将CSS动画类添加到slideIn Div中,使其顶部:0,slideOut div顶部:-100%;它将起作用,您还可以添加其他动画,例如更改其不透明度。
在这里使用 css animate 会很容易 Using CSS animations
关于javascript - 在jQuery中的replaceWith上添加SlideUp和slidedown动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34829050/