Question

我正在尝试用步骤创建滑块，我无法找到这个好的解决方案，我试图修改许多滑块，如猫头鹰旋转木马和滑动滑块，但这不起作用。

https://drive.google.com/file/d/videoid/view?t=2h10m51s

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>

单击下一步按钮时如何更改活动阶段

1 个答案: