[英]Go back to a next/previous div javascript onclick event
Here's the HTML code for the two buttons 这是两个按钮的HTML代码
<button id="Page-Transition" class="btn" id="prev" onClick="loadPreviousPage()"> <-- </button>
<button id="Page-Transition" class="btn" onClick="loadNextPage()"> --> </button>
and here's the code for the set of divs with their parent div 这是其父div的一组div的代码
<div id="pt-main" class="pt-perspective">
<div class="pt-page pt-page-1" id="page1"><h1><span>A collection of</span><strong>Page</strong> Transitions1</h1></div>
<div class="pt-page pt-page-2" id="page2"><h1><span>A collection of</span><strong>Page</strong> Transitions2</h1></div>
<div class="pt-page pt-page-3" id="page3"><h1><span>A collection of</span><strong>Page</strong> Transitions3</h1></div>
<div class="pt-page pt-page-4" id="page4"><h1><span>A collection of</span><strong>Page</strong> Transitions4</h1></div>
<div class="pt-page pt-page-5" id="page5"><h1><span>A collection of</span><strong>Page</strong> Transitions5</h1></div>
<div class="pt-page pt-page-6" id="page6"><h1><span>A collection of</span><strong>Page</strong> Transitions6</h1></div>
</div>
You can use the same function and choose any transitions and cycle them to get a desired effect. 您可以使用相同的功能并选择任何过渡并对其进行循环以获得所需的效果。
function slideShow(mode){ if(mode){ $('#pt-main .pt-page:visible').eq(0).slideUp(500,function(){ $(this).next('.pt-page').slideDown(200); $(this).appendTo('#pt-main'); }); }else{ $('#pt-main .pt-page:visible').eq(0).slideUp(500,function(){ $('#pt-main .pt-page:last').slideDown(200).prependTo('#pt-main'); }); } } $('#pt-main .pt-page').hide().eq(0).show();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="pt-main" class="pt-perspective"> <div class="pt-page pt-page-1" id="page1"><h1><span>A collection of</span><strong>Page</strong> Transitions1</h1></div> <div class="pt-page pt-page-2" id="page2"><h1><span>A collection of</span><strong>Page</strong> Transitions2</h1></div> <div class="pt-page pt-page-3" id="page3"><h1><span>A collection of</span><strong>Page</strong> Transitions3</h1></div> <div class="pt-page pt-page-4" id="page4"><h1><span>A collection of</span><strong>Page</strong> Transitions4</h1></div> <div class="pt-page pt-page-5" id="page5"><h1><span>A collection of</span><strong>Page</strong> Transitions5</h1></div> <div class="pt-page pt-page-6" id="page6"><h1><span>A collection of</span><strong>Page</strong> Transitions6</h1></div> </div> <button id="Page-Transition" class="btn" id="prev" onClick="slideShow(false)"> <-- </button> <button id="Page-Transition" class="btn" onClick="slideShow(true)"> --> </button>
Here is the a standard next/prev button implementation, 这是标准的下一个/上一个按钮实现,
$(function() {
$("body").on("click", "#prev", function() {
var _prev = $(".pt-page.current").prev();
_prev = _prev.length == 0 ? $(".pt-page:last") : _prev;
$(".pt-page.current").fadeOut(function() {
$(this).removeClass("current");
_prev.fadeIn(function() {
$(this).addClass("current");
});
});
});
$("body").on("click", "#next", function() {
var _next = $(".pt-page.current").next();
_next = _next.length == 0 ? $(".pt-page:first") : _next;
$(".pt-page.current").fadeOut(function() {
$(this).removeClass("current");
_next.fadeIn(function() {
$(this).addClass("current");
});
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.