前端开发 —— 图片轮播

今日一言：
受身无间者永远不死，寿长乃无间地狱中之大劫。
——《涅盘经》

前端开发 —— 图片轮播

---

HTML

<div class="content">
    <div class="img_box">
        <ul>
            <li><img src="./img/1.jpeg" style="width: 640px;height: 480px" /></li>
            <li><img src="./img/2.jpeg" style="width: 640px;height: 480px"/></li>
            <li><img src="./img/3.jpeg" style="width: 640px;height: 480px"/></li>
            <li><img src="./img/4.jpeg" style="width: 640px;height: 480px"/></li>
            <li><img src="./img/5.jpeg" style="width: 640px;height: 480px"/></li>
        </ul>
        <p>
            <span class="leftBtn">&lt;</span>
            <span class="rightBtn">&gt;</span>
        </p>
        <div class="bar" style="width: 640px;height:5px;background-color: #FFFFFF"></div>
    </div>
</div>

---

CSS

body{
    background-color: #212121;
}

li{
    list-style-type: none;
}

ul {
    width: 640px;
    height: 480px;

    padding: 0;
    display: flex;
}

.img_box{
    width: 640px;
    height: 480px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -320px;
    margin-top: -240px;
    overflow: hidden;
}

p{
    position: absolute;
    width: 640px;
    height: 70px;
    top: 50%;
    left: 50%;
    margin-left: -320px;
    margin-top: -35px;
    display: flex;
    justify-content: space-between;
}

.rightBtn{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    font-size: 50px;
    width: 70px;
    height: 70px;
    border-radius: 9px;
    text-align: center;
    margin-right: 5px; 
    color: #fff;
    background-color: rgba(0,0,0,0.5);
    cursor: pointer;
}

.leftBtn{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    user-select：none;
    display: inline-block;
    font-size: 50px;
    width: 70px;
    height: 70px;
    border-radius: 9px;
    text-align: center;
    color: #fff;
    margin-left: 5px;
    background-color: rgba(0,0,0,0.5);
    cursor: pointer;
}

.bar{
    position: absolute;
    bottom: 0;
}

---

JavaScript

var cureent = 0;
var time = $("img").width();
var timer;
var leftBtn = $(".leftBtn");
var rightBtn = $(".rightBtn");

function show(status){
    if( status == 1 ){
        timer = setInterval(function(){
            time--;
            if( time < 0 ){
                Tright();
                time = box.width();
            }
            $(".bar").width($("img").width()-time+"px");
        },10);
    } else {
        clearInterval(timer);
        time = $("img").width();
    }
}

show(1);

$(".img_box").hover(function(){
    leftBtn.fadeIn(30);
    rightBtn.fadeIn(30);
});

$(".img_box").mouseleave(function(){
    leftBtn.fadeOut(30);
    rightBtn.fadeOut(30);
});

function Tleft(){
    show(0);
    cureent--;
    if( cureent < 0 ) cureent = 4;
    $("ul").animate({marginLeft: -640 * cureent + "px"});
    show(1);
}

function Tright(){
    show(0);
    cureent++;
    if( cureent >= 5 ) cureent = 0;
    $("ul").animate({marginLeft: -640 * cureent +"px"});
    show(1);
}

leftBtn.click(function(){
    Tleft();
});

rightBtn.click(function(){
    Tright();
});

---