单击选项卡不会推进计时器，也不会附加 class 活动

Question

You can view the JSFiddle with code here

You can view the Fullscreen JSFiddle here

大家好，

基本上我的问题是，我正在尝试让用户单击选项卡并且进度条将减少或增加到适当的大小以及 class active 将被添加到活动幻灯片选项卡中，并从之前的任何选项卡中删除。我会将 link 留给 JSFiddle，这样您就可以实际了解我在说什么，并将我的代码留在下面。

HTML:

<div class="omega_player">
    <ul class="omega_slides">
        <li data-slide="1">SLIDE 1</li>
        <li data-slide="2" style="background: #aaa;">SLIDE 2</li>
        <li data-slide="3">SLIDE 3</li>
        <li data-slide="4" style="background: #aaa;">SLIDE 4</li>
    </ul>
    <ul class="omega_controls">
        <div class="omega_timer"><div class="progress"></div></div>
        <ul class="omega_tabs">
            <li><a href="#" onclick="return false">Slide 1</a></li>
            <li><a href="#" onclick="return false">Slide 2</a></li>
            <li><a href="#" onclick="return false">Slide 3</a></li>
            <li><a href="#" onclick="return false">Slide 4</a></li>
        </ul>
        <div class="omega_set">
            <a onclick="return false" class="control_prev"><i class="fa fa-angle-left"></i></a>
            <a onclick="return false" class="control_play"><i class="fa fa-play"></i></a>
            <a onclick="return false" class="control_pause"><i class="fa fa-pause"></i></a>
            <a onclick="return false" class="control_next"><i class="fa fa-angle-right"></i></a>
        </div>
    </ul>
</div>

JS:

var increment;
jQuery(document).ready(function ($) {
    timer = setInterval(function () {
        moveRight();
    }, 8000);
    var slideCount = $('.omega_player>.omega_slides>li').length;
    increment=100/slideCount;
    var slideWidth = $('.omega_player>.omega_slides>li').width();
    var slideHeight = $('.omega_player>.omega_slides>li').height();
    var sliderUlWidth = slideCount * slideWidth;
    $('.omega_player').css({ width: slideWidth, height: slideHeight });
    
    $('.omega_player>.omega_slides').css({ width: sliderUlWidth, marginLeft: - slideWidth });
    
    $('.omega_player>.omega_slides>li:last-child').prependTo('.omega_player>.omega_slides');
    progress();
    function moveLeft() {
        $('.omega_player>.omega_slides').animate({
            left: + slideWidth
        }, 200, function () {
            $('.omega_player>.omega_slides>li:last-child').prependTo('.omega_player>.omega_slides').addClass('active');
            progress();
            $('.omega_player>.omega_slides').css('left', '');
        });
    };

    function moveRight() {
        
        $('.omega_player>.omega_slides>li').removeClass('active')
        $('.omega_player>.omega_slides').animate({
            left: - slideWidth
        }, 200, function () {
            $('.omega_player>.omega_slides>li:first-child').appendTo('.omega_player>.omega_slides');
            progress();
            $('.omega_player>.omega_slides').css('left', '');
        });
        
    };

    $('.omega_player>.omega_controls>.omega_set>.control_prev').click(function () {
        clearInterval(timer);
        $('.omega_player>.omega_controls>.omega_set>.control_play').show();
        $('.omega_player>.omega_controls>.omega_set>.control_pause').hide();
        moveLeft();
    });

    $('.omega_player>.omega_controls>.omega_set>.control_next').click(function () {
        clearInterval(timer);
        $('.omega_player>.omega_controls>.omega_set>.control_play').show();
        $('.omega_player>.omega_controls>.omega_set>.control_pause').hide();
        moveRight();
    });
    
    $('.omega_player>.omega_controls>.omega_set>.control_play').click(function () {
        $('.omega_player>.omega_controls>.omega_set>.control_play').hide();
        $('.omega_player>.omega_controls>.omega_set>.control_pause').show();
        moveRight();
        timer = setInterval(function () {
            moveRight();
        }, 8000);
    });
    
    $('.omega_player>.omega_controls>.omega_set>.control_pause').click(function () {
        clearInterval(timer);
        $('.omega_player>.omega_controls>.omega_set>.control_play').show();
        $('.omega_player>.omega_controls>.omega_set>.control_pause').hide()
    });

    return timer;

});  

function progress(){
    var activeElement=$('.omega_player>.omega_slides>li:nth-child(2)').attr('data-slide');
    console.log(increment);
    console.log(activeElement);
    var width=(increment*activeElement)+'%';
    console.log(width);
    $('.omega_player>.omega_controls>.omega_timer>.progress').animate({
         'width':width
    },300);
}

CSS:

.omega_player {
position: relative;
overflow: hidden;
margin: 0 auto;
width: 950px;
border-radius: 4px;
}
.omega_player>.omega_slides {
position: relative;
margin: 0;
padding: 0;
height: 450px;
list-style: none;
}
.omega_player>.omega_slides>li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 950px;
height: 450px;
background: #ccc;
text-align: center;
line-height: 300px;
}

.omega_player>.omega_controls {
bottom: 0;
left: 0;
right: 0;
height: 50px;
margin: 0;
padding: 0;
background: #333;
background: rgba(51,51,51,.8);
position: absolute;
z-index: 2;
width: 100%;
}
.omega_player>.omega_controls>.omega_set {
position: absolute;
right: -1px;
}
.omega_player>.omega_controls>li>.control_prev,
.omega_player>.omega_controls>li>.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}
.omega_player>.omega_controls>li>.control_prev:hover,
.omega_player>.omega_controls>li>.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
.omega_player>.omega_controls>li>.control_prev {
border-radius: 0 2px 2px 0;
}
.omega_player>.omega_controls>li>.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
.omega_player>.omega_controls>li>.control_play,
.omega_player>.omega_controls>li>.control_pause {
background-color: green;
color: #fff;
padding: 10px;
}
.omega_player>.omega_controls>li>.control_play {
display: none!important;
}
.omega_player>.omega_controls>.omega_set>a {
color: #FFF;
color: rgba(250,250,250,.95);
font-size: 20px;
vertical-align: middle;
padding: 10px;
display: inline-block;
cursor: pointer;
}
.omega_player>.omega_controls>.omega_set>:hover {
background: rgba(0,0,0,0.2);
color: #FFF;
}
.omega_player>.omega_controls>.omega_set>.control_prev,
.omega_player>.omega_controls>.omega_set>.control_next,
.omega_player>.omega_controls>.omega_set>.control_play,
.omega_player>.omega_controls>.omega_set>.control_pause {
font-size: 45px;
line-height: 0;
margin: 0;
height: 50px;
width: 50px;
padding: 0;
text-align: center;
transition: .1s ease-in-out;
border: 1px solid #FFF;
border-color: rgba(250,250,250,0.65);
border-top: 0;
border-bottom: 0;
float: left;
}
.omega_player>.omega_controls>.omega_set>.control_play,
.omega_player>.omega_controls>.omega_set>.control_pause {
border:0;
font-size: 25px;
line-height: 48px;
}
.omega_player>.omega_controls>.omega_set>.control_play {
display:none;
}

.omega_player>.omega_controls>.omega_timer {
background: #333;
background: rgba(51,51,51,.9);
height: 3px;
position: absolute;
left: 0;
right: 0;
min-width: 797px;
width: 797px;
max-width: 797px;
}
.omega_player>.omega_controls>.omega_timer>.progress {
height: 3px;
background-color: #EB0000;
background: rgba(235,0,0,0.86);
max-width: 797px;
z-index: 999;
width: 0%;
transition: .3s ease-in-out;
}
.omega_player>.omega_controls>.omega_tabs {
float: left;
width: 797px;
margin: 0;
padding: 0;
display: table;
z-index: 9999;
position: relative;
}
.omega_player>.omega_controls>.omega_tabs>li {
display: table-cell;
text-align: center;
}
.omega_player>.omega_controls>.omega_tabs>li>a {
color: #FFF;
text-decoration: none;
font-size: 15px;
font-family: "PT Sans", sans-serif;
display: block;
padding: 14.5px;
border-left: 1px solid rgba(250,250,250,.75);
}
.omega_player>.omega_controls>.omega_tabs>li>a:hover {
text-decoration: underline;
}
.omega_player>.omega_controls>.omega_tabs>li>a.active {
font-weight: bold;
}
.omega_player>.omega_controls>.omega_tabs>li>a:active,
.omega_player>.omega_controls>.omega_tabs>li>a:focus {
background: none;
}
.omega_player>.omega_controls>.omega_tabs>li:first-child>a {
border: 0;
}

我想对任何先进的人表示感谢。

In short when a user clicks a tab they will be taken to the slide corresponding to the tab and also the timer will size appropriately

Answer 1

要移动到某个幻灯片，最简单的方法可能是更改当前幻灯片以设置该幻灯片，而不是 incrementing/decrementing 位置。 moveLeft 和 moveRight 可以使用 moveTo:

var curpos;
function moveTo(pos){
    curpos = Math.abs(pos % slideCount);
    slideholder.animate({
        left: -(curpos-1) * slideWidth
    }, 200, function () {
        slides.removeClass('active').eq(curpos).addClass('active');
        var width=((curpos+1)*increment)+'%';
        progressbar.animate({'width':width},300);
    });
}

function moveLeft() {
    moveTo(curpos + slideCount -1);
};

function moveRight() {        
    moveTo(curpos+1);
};

创建 moveTo 后，选项卡可以简单地使用其内部索引 select 适当的幻灯片

var tabs = $('.omega_tabs > li > a');
tabs.click(function(){
    pause(); //stop timer
    moveTo(tabs.index(this));
});

Fiddle

(PS如果幻灯片数量变得更加动态，您还可以选择在运行时生成选项卡并在创建时分配幻灯片)

单击选项卡不会推进计时器，也不会附加 class 活动

Clicking on tab isn't advancing timer and isn't appending class of active

html

javascript

css

jquery

slideshow