用jQuery實現一個滑塊

Question

以下是我的代碼

 var current_slide = 1, animation_time = 1000, pause = 3000, slide_container = $('.slide_container'), interval, height = slide_container.height(), slides = slide_container.children(); function autoslide(){ interval = setInterval(function(){ slides.animate({'margin-top':'-='+height}, function(){ current_slide++; if(current_slide===slides.length){ current_slide=1; slides.css('margin-top', 0); } }); },pause); } autoslide();

 .my_slider{ height:100vh; width:100vw; background-color:grey; position:relative; } .left_slider{ width:50%; height:100%; background-color:orange; position:relative; float:left; overflow:hidden; } .slide_1{ height:100%; width:100%; background-color:yellow; } .slide_2{ height:100%; width:100%; background-color:pink; } .slide_3{ height:100%; width:100%; background-color:orange; } .right_slider{ width:50%; height:100%; position:relative; float:left; } .top_slider{ height:50%; background-color:magenta; overflow:hidden; } .bottom_slider{ height:50%; width:100%; overflow:hidden; } h1{ margin:0 auto; text-align:center; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class='my_slider'> <div class ='left_slider slide_container'> <div class = 'slide_1'><h1>SLIDER 1</h1></div> <div class = 'slide_1'><h1>SLIDER 2</h1></div> <div class = 'slide_1'><h1>SLIDER 3</h1></div> </div> <div class = 'right_slider slide_container'> <div class='top_slider'> <div class='slide_2'><h1>SLIDER 4</h1></div> <div class='slide_2'><h1>SLIDER 5</h1></div> </div> <div class='bottom_slider slide_container'> <div class='slide_3'><h1>SLIDER 6</h1></div> <div class='slide_3'><h1>SLIDER 7</h1></div> </div> </div> </section>

我正在嘗試實現一個滑塊，其中每個滑塊（按邊距頂部）向內滑動並在滑塊長度的末尾重新啟動。 但是，但是我陷入了以下困境

幻燈片位於具有不同尺寸的不同DIV中。 我想獲取每個div的高度，以便可以將其用於頁頂。
我想讓每個div彼此獨立滑動。 意思是，每個div中的幻燈片在不同的時間移動。

我完全被困住了，有人可以幫我嗎？

問候

Answer 1

不完全是您嘗試解決此問題的方式，但是您可以通過這種方式創建滑塊。

 // Code goes here $(document).ready(function() { var current_slide = 0, animation_time = 1000, pause = 3000, leftSlider = $('.slide_1'), rightSlider = $('.slide_2'), bottomSlider = $('.slide_3'); function autoslide(elements, interval) { for (var i = 0; i < elements.length; i++) { //adding fade class for effect. $(elements[i]).css('display', 'none').addClass('fade'); } current_slide++; if (current_slide > elements.length) { current_slide = 1; } $(elements[current_slide - 1]).css('display', 'block'); setTimeout(autoslide.bind(null, elements, interval), interval); } autoslide(leftSlider, 2000); autoslide(rightSlider, 3000); autoslide(bottomSlider, 4000); });

 /* Styles go here */ .my_slider{ height:100vh; width:100vw; background-color:grey; position:relative; } .left_slider{ width:50%; height:100%; background-color:orange; position:relative; float:left; overflow:hidden; } .slide_1{ height:100%; width:100%; background-color:yellow; } .slide_2{ height:100%; width:100%; background-color:pink; } .slide_3{ height:100%; width:100%; background-color:orange; } .right_slider{ width:50%; height:100%; position:relative; float:left; } .top_slider{ height:50%; background-color:magenta; overflow:hidden; } .bottom_slider{ height:50%; width:100%; overflow:hidden; } h1{ margin:0 auto; text-align:center; } .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} }

 <!DOCTYPE html> <html> <head> </head> <body> <section class='my_slider'> <div class ='left_slider slide_container'> <div class = 'slide_1'><h1>SLIDER 1</h1></div> <div class = 'slide_1'><h1>SLIDER 2</h1></div> <div class = 'slide_1'><h1>SLIDER 3</h1></div> </div> <div class='right_slider slide_container'> <div class='top_slider'> <div class='slide_2'><h1>SLIDER 4</h1></div> <div class='slide_2'><h1>SLIDER 5</h1></div> </div> <div class='bottom_slider slide_container'> <div class='slide_3'><h1>SLIDER 6</h1></div> <div class='slide_3'><h1>SLIDER 7</h1></div> </div> </div> </section> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </body> </html>

注意，這里我使用display屬性來隱藏和顯示每個div而不是邊距，並使用css來實現淡入淡出效果。

用jQuery實現一個滑塊

問題描述

1 個解決方案

解決方案1
0 2017-05-26 19:32:17

用jQuery實現一個滑塊

問題描述

1 個解決方案

解決方案1 0 2017-05-26 19:32:17

解決方案1
0 2017-05-26 19:32:17