javascript - 如何创建幻灯片计时器并添加功能选项卡

Question

我尝试了各种不同的方法来实现这一点，但似乎没有任何效果对我有用，我正在尝试使当前进度栏具有功能，例如根据每张幻灯片的更改时间进行操作，并且还添加允许用户进行操作的选项卡点击跳转到幻灯片。

<强> Demo Fiddle

HTML

<div class="omega_player">
    <ul class="omega_slides">
        <li>SLIDE 1</li>
        <li style="background: #aaa;">SLIDE 2</li>
        <li>SLIDE 3</li>
        <li style="background: #aaa;">SLIDE 4</li>
    </ul>
    <ul class="omega_controls">
        <div class="omega_timer"><div class="progress"></div></div>
        <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

jQuery(document).ready(function ($) {
    timer = setInterval(function () {
        moveRight();
    }, 8000);

    var slideCount = $('.omega_player>.omega_slides>li').length;
    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');

    function moveLeft() {
        $('.omega_player>.omega_slides').animate({
            left: + slideWidth
        }, 200, function () {
            $('.omega_player>.omega_slides>li:last-child').prependTo('.omega_player>.omega_slides');
            $('.omega_player>.omega_slides').css('left', '');
        });
    };

    function moveRight() {
        $('.omega_player>.omega_slides').animate({
            left: - slideWidth
        }, 200, function () {
            $('.omega_player>.omega_slides>li:first-child').appendTo('.omega_player>.omega_slides');
            $('.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;

});    

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: 20px;
}
.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: 4px;
top: -4px;
position: absolute;
left: 0;
right: 0;
width: 100%;
}
.omega_player>.omega_controls>.omega_timer>.progress {
height: 4px;
display: inline-block;
background-color: #EB0000;
background: rgba(235, 0, 0, 0.86);
position: absolute;
width: 60%;
z-index: 999;
}

html,
body {margin:0;padding:0;font-family: sans-serif;font-size: 14px;}

希望您能帮忙提前致谢!

Answer 1

Code with 4 Slides and Full Screen DEMO

Code with 8 Slides and Full Screen DEMO

给你。我刚刚编写了一个函数，它将根据存在的元素数量和事件幻灯片计算进度条的宽度。下面是函数的样子:

function progress(){
    var activeElement=$('li:nth-child(2)').attr('data-slide');
    //get the activeElement which will be always as 2nd child as per your code
    var width=(increment*activeElement)+'%';
    //increment variable will be based on `100/numberofslidespresent`
    //each li should have a data-* property, say data-slide here, which will actually
    //contain number in incremental order. Now multiply increment and activeElement
    //and add % so that it will become something like 25%, 50% everytime.
    $('.progress').animate({
         'width':width //animate width of progressbar
    },300);
}

完整代码如下:

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>
        <!--extra property added to each li which data-slide with incremental number-->
    </ul>
    <ul class="omega_controls">
        <div class="omega_timer"><div class="progress"></div></div>
        <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; // a global variable
jQuery(document).ready(function ($) {
    timer = setInterval(function () {
        moveRight();
    }, 8000);
    var slideCount = $('.omega_player>.omega_slides>li').length;
    increment=100/slideCount; //get how much to increment parts should be
    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();//call this function once prepended on page load

    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(); //after prepending call it once again
            $('.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(); //after appending call it once again
            $('.omega_player>.omega_slides').css('left', '');
        });

    };

   //Your other functions here remains as it is so I haven't attached them   
});  

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

CSS

On CSS part I just changed width mentioned for progressbar from 60% to 0%