点击选项卡是't前进计时器，并且不是't附加活动的类

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

本文关键字：活动 选项 计时器      更新时间：2023-09-26

你可以在这里查看带有代码的JSFiddle

你可以在这里查看全屏JSFiddle

大家好，

基本上，我的问题是，我试图让用户点击选项卡，进度条将缩小或增加到适当的大小，活动类别将添加到活动幻灯片选项卡中，并从以前的任何选项卡中删除。我会留下一个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;
}

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

简而言之，当用户点击一个选项卡时，他们将被带到与该选项卡相对应的幻灯片上，并且计时器将适当调整的大小

要移动到某个幻灯片，最简单的方法可能是更改当前幻灯片以设置该幻灯片，而不是递增/递减位置。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后，选项卡可以简单地使用其内部索引来选择适当的幻灯片

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

Fiddle

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

相关文章：