[CSS]Jquery + CSS 翻頁特效 / 換頁特效
Jquery + CSS 翻頁特效 / 換頁特效
以下效果圖︰
Page 1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Midland Realty</title>
<style type="text/css">
body {
margin: 0px;
box-sizing: border-box;
background-color: #FFFFFF;
}
#slideshow {
width: 300px;
height: 250px;
background-color: sandybrown;
position: relative;
}
.pageWrapper{
width: 100%;
height: 100%;
position: absolute;
border: 2px solid red;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<div id="slideshow">
<div class="pageWrapper" style="">
Page 1
</div>
<div class="pageWrapper" style="display:none;">
Page 2
</div>
<div class="pageWrapper" style="display:none;">
Page 3
</div>
</div>
<script>
$(document).ready(function () {
sliderStart();
});
function sliderStart() {
setInterval(function () {
$('#slideshow > div.pageWrapper').first()
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
}
</script>
</body>
</html>
留言
張貼留言