다음 / 이전 버튼으로 슬라이드를 전환 할 때 상태 라디오 버튼을 변경하는 방법은 무엇입니까?

debugcn 에 게시 Dev

IamOlivia

간단한 슬라이더를 만들었지 만 제대로 작동하지 않습니다 : https://jsfiddle.net/iamolivia/r1d96eyx/1/

"다음 / 이전"버튼을 클릭해도 라디오 상태가 변경되지 않습니다. 이 코드를 어떻게 보완 할 수 있습니까?

 $('.controls').click(function(){
    $( ".slide" ).animate({opacity: .4});
    id = $(this).data('b');
    $('.slide').removeClass('active');
    $('#'+id).addClass('active');
    $( ".slide" ).animate({opacity: .9});
});

var i=1;
var cur = 0; 
$('.next').click(function(){
    $( ".slide" ).animate({opacity: .4});
    cur = i+1;

    if(i<3)
    {
        $('.slide').removeClass('active');
        $('#b' + cur).addClass('active');
        i++;
        $( ".slide" ).animate({opacity: .9});
    }
   else if(i==3)
    {
        i=1; cur=1;
        $('.slide').removeClass('active');
        $('#b' + cur).addClass('active');
        $( ".slide" ).animate({opacity: .9});
    }
});

$('.prev').click(function(){
    $( ".slide" ).animate({opacity: .4});
    cur = i-1;
    i--;

    $('.slide').removeClass('active');
    $('#b' + cur).addClass('active');
    $( ".slide" ).animate({opacity: .9});

    if(i<1)
    {
        i=3; cur=3;
        $('.slide').removeClass('active');
        $('#b' + cur).addClass('active');
        $( ".slide" ).animate({opacity: .9});
    } 
});

로리 맥 크로 산

이렇게하려면 활성 슬라이드의 인덱스와 일치하는 라디오 checked속성 을 설정해야합니다 .control. 이를 위해 eq(), index()및 prop().

그러나 논리가 필요한 것보다 훨씬 더 복잡하다는 점은 주목할 가치가 있습니다. 당신은 현재 슬라이드의 인덱스를 계산하고 간단하게 작업 증분 변수를 제거하여 단순화 할 수 있습니다 .active다음 표시된 슬라이드가 사용되어야 하는지를 결정하기 위해 DOM의 클래스 prev()와 next(). 또한 data-dir속성을 사용 하여 단추 처리기 간의 논리를 건조하게합니다.

var $controls = $('.controls').on('change', function() {
  var $slides = $(".slide").stop().animate({ opacity: .4 });
  $slides.removeClass('active');
  id = $(this).data('b');
  $('#' + id).addClass('active');
  $slides.animate({ opacity: .9 });
});

$('.next, .prev').click(function() {
  var direction = $(this).data('dir');
  var $slides = $(".slide").stop().animate({ opacity: .4 });
  var $activeSlide = $slides.filter('.active').removeClass('active');
  var $targetSlide = $activeSlide[direction]();
  if ($targetSlide.length === 0)
    $targetSlide = $slides[direction == 'next' ? 'first' : 'last']()
  $targetSlide.addClass('active');
  $controls.eq($targetSlide.index()).prop('checked', true);
  $slides.animate({ opacity: .9 });
});

.wrapper {
  height: 250px;
  overflow: hidden;
}

.slider {
  height: 250px;
}

.slide {
  height: 100%;
  width: 100%;
  display: none;
  padding: 20px;
  color: #fff;
  font-weight: 900;
  opacity: 1;
}

.control {
  transform: translateY(-50px);
}

.slide:nth-of-type(1) {
  background: #dd2525;
}

.slide:nth-of-type(2) {
  background: #3791ee;
}

.slide:nth-of-type(3) {
  background: #df6af0;
}

.active {
  display: block;
}

.prev,
.next {
  background: white;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  opacity: 0.4;
}

.prev:hover {
  opacity: 0.6;
  transform: scale(1.1);
  transition: .5s;
}

.next:hover {
  opacity: 0.6;
  transform: scale(1.1);
  transition: .5s;
}

.control input {
  margin-left: 5px !important;
  margin-right: 5px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="wrapper">
  <div class="slider">
    <div class="slide active" id="b1">Slide 1</div>
    <div class="slide" id="b2">Slide 2</div>
    <div class="slide" id="b3">Slide 3</div>
  </div>
  <div class="control" style="text-align:center;">
    <button id="c4" class="prev" data-dir="prev" value=""><span class="glyphicon glyphicon-chevron-left"></span></button>
    <input id="c1" class="controls" name="radio" type="radio" checked="checked" data-b="b1" />
    <input id="c2" class="controls" name="radio" type="radio" data-b="b2" />
    <input id="c3" class="controls" name="radio" type="radio" data-b="b3" />
    <button id="c5" class="next" data-dir="next" value=""><span class="glyphicon glyphicon-chevron-right"></span></button>
  </div>
</div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사