[英]Implement plain javascript carousel.(Without Plugin)
我正在通過普通的 javascript 實現輪播(不使用插件)。 我想設置上一個和下一個按鈕來控制幻燈片圖像。
var firstval = 0; function Carousel() { firstval += 2; parent = document.getElementById('container-carousel'); parent.style.left = "-" + firstval + "px"; if (!(firstval % 150)) { setTimeout(Carousel, 3000); firstval = 0; var firstChild = parent.firstElementChild; parent.appendChild(firstChild); parent.style.left= 0; return; } runCarousel = setTimeout(Carousel, 10); } Carousel();
#wrapper-carousel { position: relative; width: 450px; height: 150px; margin: 0 auto; overflow: hidden; } #container-carousel { position: absolute; width: 450px; height: 150px; } .child { width: 150px; height: 150px; padding-top: 35px; float: left; text-align: center; font-size: 60px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <div id="wrapper-carousel"> <div id="container-carousel"> <div class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0020232_chocolate_cream_gateaux_cake_320.jpeg"> </div> <div class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0018904_50_red_roses_in_vase_320.jpeg"> </div> <div class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0020232_chocolate_cream_gateaux_cake_320.jpeg"> </div> </div> <a class="left" href="#wrapper-carousel" style="font-size:100px;z-index:3000;">‹</a> <a class="right" href="#wrapper-carousel" style="font-size:100px;z-index:3000">›</a> </div>
我想添加簡單的按鈕來控制這個輪播。 我沒有使用任何插件和任何框架輪播。
JsFiddle: https ://jsfiddle.net/varunPes/wzkLjh8s/21/
沒有插件的輪播。
var firstval = 0; var runSlider; function Carousel() { clearTimeout(runSlider); firstval += 2; parent = document.getElementById('container-carousel'); parent.style.left = "-" + firstval + "px"; if (!(firstval % 130)) { setTimeout(Carousel, 3000); firstval = 0; var firstChild = parent.firstElementChild; parent.appendChild(firstChild); parent.style.left= 0; return; } runCarousel = setTimeout(Carousel, 10); } Carousel(); function leftClick(){ firstval += 2; parent = document.getElementById('container-carousel'); parent.style.left = "-" + firstval + "px"; if (!(firstval % 130)) { firstval = 0; var firstChild = parent.firstElementChild; parent.appendChild(firstChild); parent.style.left= 0; return; } runSlider = setTimeout(leftClick, 10); } function rightClick(){ firstval += 2; parent = document.getElementById('container-carousel'); parent.style.left = firstval + "px"; if (!(firstval % 130)) { firstval = 0; var firstChild = parent.firstElementChild; parent.appendChild(firstChild); parent.style.left= 0; return; } runSlider = setTimeout(rightClick, 10); }
#wrapper-carousel { position: relative; width: 450px; height: 150px; margin: 0 auto; overflow: hidden; display:flex; } #main-carousel { position: relative; width: 450px; height: 150px; overflow:hidden; } #container-carousel { position: absolute; width: 450px; height: 150px; } .child { width: 130px; height: 150px; padding-top: 35px; float: left; text-align: center; font-size: 60px; }
<div id="wrapper-carousel"> <a class="left" href="#wrapper-carousel" style="font-size:100px;z-index:3000;" onclick="leftClick()">‹</a> <div id="main-carousel"> <div id="container-carousel"> <div class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0020232_chocolate_cream_gateaux_cake_320.jpeg"> </div> <div class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0018904_50_red_roses_in_vase_320.jpeg"> </div> <div class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0020232_chocolate_cream_gateaux_cake_320.jpeg"> </div> </div></div> <a class="right" href="#wrapper-carousel" style="font-size:100px;z-index:3000" onclick="rightClick()">›</a> </div>
帶有普通 javascript 的輪播。
了解您希望完成 css 修復
<div id="wrapper-carousel">
<div id="container-carousel">
<div class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0020232_chocolate_cream_gateaux_cake_320.jpeg"> </div>
<div class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0018904_50_red_roses_in_vase_320.jpeg"> </div>
<div class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0020232_chocolate_cream_gateaux_cake_320.jpeg"> </div>
</div>
<a class="left" href="#wrapper-carousel" style="font-size: 100px;z-index: 3050;float: left;position: relative;background: #F3F5F6;top:15px">‹</a>
<a class="right" href="#wrapper-carousel" style="font-size: 100px;z-index: 3050;float: right;position: relative;background: #F3F5F6;top:15px">›</a>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.