1
我正在製作應用展示網站。我有一個全寬垂直幻燈片的頁面。我在屏幕上添加了一個固定電話。我想在用戶使用按鈕滑動手機時在手機上添加圖像。在jQuery中的replaceWith上添加SlideUp和滑動動畫
當他按下按鈕的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％。滑塊工作良好，手機完美地固定在屏幕上。但我希望手機圖像在每張幻燈片上更改，並且效果應該與鏈接上的效果相同，但應與垂直方式相同。
我的導航按鈕的代碼是這樣
<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");
});
}
}
正如你所看到的我可以通過淡入淡出的方式改變手機圖片的變化效果。任何人都可以告訴我如何以滑動和滑動的方式來做到這一點？