當我單擊下一步按鈕時如何更改活動階段

Question

我正在嘗試使用step創建滑塊，但無法為此找到良好的解決方案，並且嘗試修改許多滑塊（例如owl carousel和swipe Slider），但這沒有用。

 jQuery(".step1").click(function() { jQuery('.steps .stp .active').removeClass('active'); jQuery('.hot-section-right .active').removeClass('active'); jQuery('.step1 .stepp').addClass('active'); jQuery('.step-one').addClass('active'); }); jQuery(".step2").click(function() { jQuery('.steps .stp .active').removeClass('active'); jQuery('.hot-section-right .active').removeClass('active'); jQuery('.step2 .stepp').addClass('active'); jQuery('.step-two').addClass('active'); }); jQuery(".step3").click(function() { jQuery('.steps .stp .active').removeClass('active'); jQuery('.hot-section-right .active').removeClass('active'); jQuery('.step3 .stepp').addClass('active'); jQuery('.step-three').addClass('active'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="steps"> <div class="step1 stp"> <span class="stepp active">STEP 1</span></div> <div class="step2 stp"> <span class="stepp">STEP 2</span></div> <div class="step3 stp"> <span class="stepp">STEP 3</span></div> </div> <div class="hot-section-right"> <div class="step-one active"><img src="img/xstep-1.png"></div> <div class="step-two"><img src="img/xstep-2.png"></div> <div class="step-three"><img src="img/xstep-2.png"></div> </div> 

Answer 1

我為您制作了入門代碼。 我認為您可以從中進行樣式設置並使它看起來更好。 我還使用了一些代碼並創建了自動播放功能，希望對您有所幫助：

 $(document).on('click', '.stepp', function() { $('.active_btn').removeClass('active_btn'); $(this).addClass('active_btn'); var id = $(this).attr('id'); id = id.replace('step', ''); $('.active_img').removeClass('active_img'); $('#img' + id).addClass('active_img'); currentSlide = id - 1; }); $(document).on('click', '.img', function() { $('.active_img').removeClass('active_img'); $(this).addClass('active_img'); var id = $(this).attr('id'); id = id.replace('img', ''); $('.active_btn').removeClass('active_btn'); $('#step' + id).addClass('active_btn'); currentSlide = id - 1; }); var currentSlide = 0; //start index var totalElements = $(".img").length; //total number of slides function autoplay() { $(".img").eq(currentSlide).click(); currentSlide++; if (currentSlide == totalElements) { currentSlide = 0; //resetting the index when the end is reached } } //call autoplay using setInterval every 1s setInterval(autoplay, 1000); 

 body{ background: #F4F4F5; } .steps{ margin-bottom: 10px; border: 1px solid #adadad; border-radius: 20px; max-width: 300px; width: 100%; text-align: center; padding: 5px 5px; box-sizing: border-box; } .img{ opacity: 0.6; -webkit-transition: all 350ms; -moz-transition: all 350ms; -o-transition: all 350ms; transition: all 350ms; max-width: 100px; display: table-cell; vertical-align: middle; } .img img{ cursor: pointer; max-width: 100%; width: 100%; height: auto; } .stp{ display: inline-block; cursor: pointer; } .stepp{ -webkit-transition: all 350ms; -moz-transition: all 350ms; -o-transition: all 350ms; transition: all 350ms; padding: 5px 10px; border-radius: 20px; display: block; } .active_btn{ background: #fff; box-shadow: 2px 2px 10px #000; } .active_img{ opacity: 1; max-width: 140px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="steps"> <div class="stp"> <span id='step1' class="stepp active_btn">STEP 1</span></div> <div class="stp"> <span id='step2' class="stepp">STEP 2</span></div> <div class="stp"> <span id='step3' class="stepp">STEP 3</span></div> </div> <div class="hot-section-right"> <div id='img1' class="img active_img"><img src="http://cdn.craftsy.com/upload/1816128/project/119986/list_1891_119986_PaulsLandscapes_6.jpg"></div> <div id='img2' class="img"><img src="http://cdn.craftsy.com/upload/1816128/project/119986/list_1891_119986_PaulsLandscapes_6.jpg"></div> <div id='img3' class="img"><img src="http://cdn.craftsy.com/upload/1816128/project/119986/list_1891_119986_PaulsLandscapes_6.jpg"></div> </div>