html 全屏轮播

html 全屏轮播

<!DOCTYPE html>
<html class="html">
<head>
  <title>lunbo2</title>
  <meta charset="utf-8">
  <style type="text/css">
    .html
{
    width: 100%;
    height: 100%;
}

.body
{
    padding:0px;
    margin:0px;
    width: 100%;
    height: 100%;
}

.lunbo
{
    position: absolute;
    width: 100%;
    height: 100%;
}

.lunbo-images
{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.image_div
{
    position: absolute;
    height: 100%;
    width: 100%;
}

.image
{
    width: 100%;
    height: 100%;
}

.title_h1
{
    position: absolute;
    text-align: center;
    color: #fff;
    opacity: 0.8;
    bottom: 15%;
    width: 100%
}

.title_h2
{
    position: absolute;
    text-align: center;
    color: #fff;
    opacity: 0.8;
    bottom: 10%;
    width: 100%
}

.lunbo-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
}

.lunbo-indicators li {
    display: list-item;
    text-align: -webkit-match-parent;
    box-sizing: content-box;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 30px;
    height: 3px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    transition: opacity .6s ease;
}


.lunbo-indicators .active{
    opacity: 1;
}

.lunbo-control-next, .lunbo-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 15%;
    color: #fff;
    text-align: center;
    opacity: .5;
    transition: opacity .15s ease;
}

.lunbo-control-prev {
    left: 0;
}
.lunbo-control-next {
    right: 0;
}

.lunbo-control-next-icon, .lunbo-control-prev-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: no-repeat 50%/100% 100%;
}
.lunbo-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}

.lunbo-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
}


  </style>

</head>
<body class="body">
    <div class="lunbo">

        <!-- 指示符 -->
        <ul class="lunbo-indicators">
            <li class="lunbo-indicators_item active"></li>
            <li class="lunbo-indicators_item"></li>
            <li class="lunbo-indicators_item"></li>
        </ul>

        <!-- 轮播图片 -->
        <div class="lunbo-images">
            <div class="image_div">
                <h1 class="title_h1">阅读</h1>
                <h2 class="title_h2">Etherwave's Blog</h2>
                <img src="images/1.jpg" class="image">
            </div>
            <div class="image_div">
                <h1 class="title_h1">写作</h1>
                <h2 class="title_h2">Etherwave's Blog</h2>
                <img src="images/2.jpg" class="image">
            </div>
            <div class="image_div">
                <h1 class="title_h1">emmm</h1>
                <h2 class="title_h2">Etherwave's Blog</h2>
                <img src="images/3.jpg" class="image">
            </div>

        </div>

        <!-- 左右切换按钮 -->
        <a class="lunbo-control-prev" onclick="move_left_clock()">
            <span class="lunbo-control-prev-icon"></span>
        </a>
        <a class="lunbo-control-next" onclick="move_right_clock()">
            <span class="lunbo-control-next-icon"></span>
        </a>

    </div>

</body>
<script src="./js/jquery-4.3.1.min.js"></script>
<script type="text/javascript">
    //定义变量初值
var image_div = null;
var lunbo_images = document.getElementsByClassName("lunbo-images");
var timer = null;
var slide_time = 1000;
var slide_interval_time = 2000;
var timer_interval = 5;
var timer_timeout = null;

function control_prev()
{
    var lunbo_indicators = $(".lunbo-indicators_item");
    var cnt=0;
    for(var i=0;i<lunbo_indicators.length;i++)
    {
        if($(lunbo_indicators[i]).hasClass("active"))
        {
            cnt = i;
            break;
        }
    }
    $(lunbo_indicators[cnt]).removeClass("active");
    cnt = cnt-1;
    cnt = cnt+lunbo_indicators.length;
    cnt = cnt%lunbo_indicators.length;
    $(lunbo_indicators[cnt]).addClass("active");
}

function control_next()
{
    var lunbo_indicators = $(".lunbo-indicators_item");
    var cnt=0;
    for(var i=0;i<lunbo_indicators.length;i++)
    {
        if($(lunbo_indicators[i]).hasClass("active"))
        {
            cnt = i;
            break;
        }
    }
    $(lunbo_indicators[cnt]).removeClass("active");
    cnt = cnt+1;
    cnt = cnt%lunbo_indicators.length;
    $(lunbo_indicators[cnt]).addClass("active");
}

//绑定事件
window.onload = function()
{
    image_div = $(".image_div");
    windows_width = window.outerWidth;
    windows_height = window.outerHeight;

    var n = image_div.length;
    for(var i=0;i!=n;i++)
    {
        image_div[i].style.width = String(windows_width)+"px";
        image_div[i].style.height = String(windows_height)+"px";
        image_div[i].style.top = "0px";
        image_div[i].style.left = String(i*windows_width)+"px";
    }

    move_left_clock();
    // move_right_clock();
}

window.onresize = function(){
    image_div = $(".image_div");
    image_div = $(".image_div");
    windows_width = window.outerWidth;
    windows_height = window.outerHeight;

    var n = image_div.length;
    for(var i=0;i!=n;i++)
    {
        image_div[i].style.width = String(windows_width)+"px";
        image_div[i].style.height = String(windows_height)+"px";
        image_div[i].style.top = "0px";
    }

    move_left_clock();
}

//重新定义一个函数
function move_left_clock() {
    clearTimeout(timer_timeout);
    clearInterval(timer);
    timer = setInterval(moveLeft, timer_interval);
}

function move_right_clock() {
    clearTimeout(timer_timeout);
    clearInterval(timer);
    timer = setInterval(moveRight, timer_interval);
}

function wait_and_start_move_left_clock()
{
    clearTimeout(timer_timeout);
    clearInterval(timer);
    timer_timeout = setTimeout(move_left_clock, slide_interval_time);
}

function wait_and_start_move_right_clock()
{
    clearTimeout(timer_timeout);
    clearInterval(timer);
    timer_timeout = setTimeout(move_right_clock, slide_interval_time);
}

function get_image_left(image) {
    return parseFloat(image.style.left.split("p")[0]);
}

function set_image_left(image, px) {
    image.style.left = String(px)+"px";
}

//计时器函数
function moveLeft() {
    image_div = $(".image_div");
    windows_width = window.outerWidth;
    windows_height = window.outerHeight;
    var move_px = windows_width/(slide_time/timer_interval);
    var n = image_div.length;
    var max_left_image_no = 0;
    var left=-1000000;
    //找到left最大的那个image，即在最右边的那个
    for(var i=0;i<n;i++)
    {
        var t_left = get_image_left(image_div[i]);
        if(t_left>left)
        {
            left=t_left;
            max_left_image_no = i;
        }
    }

    //将所有image向左平移move_px,除了最右边的那个，其他的少向左平移一个像素，
    // 保证左边的image覆盖右边的image一个像素，这样平移的时候不会有白边
    left = left-move_px;
    for(var i=0;i<n;i++)
    {
        var no=(max_left_image_no-i+n)%n;
        var t_left = left-i*windows_width;
        if(no!=max_left_image_no)
        {
            t_left+=1;
        }
        set_image_left(image_div[no], t_left);
    }

    //当最左边的那张图片已经完全看不到了，就把他放在最右边
    var min_left_image_no = (max_left_image_no+1)%n;
    var min_left = get_image_left(image_div[min_left_image_no]);

    if(min_left<(-windows_width))
    {
        min_left_image_no=(min_left_image_no+1)%n;
        for(var i=0;i<n;i++)
        {
            set_image_left(image_div[(min_left_image_no+i)%n], i*windows_width);
        }
        control_prev();
        wait_and_start_move_left_clock();
    }
}

function moveRight() {
    image_div = $(".image_div");
    windows_width = window.outerWidth;
    windows_height = window.outerHeight;
    var move_px = windows_width/(slide_time/timer_interval);
    var n = image_div.length;
    var max_left_image_no = 0;
    var min_left_image_no = 0;
    var left=-1000000;
    //找到left最大的那个image，即在最右边的那个
    for(var i=0;i<n;i++)
    {
        var t_left = get_image_left(image_div[i]);
        if(t_left>left)
        {
            left=t_left;
            max_left_image_no = i;
        }
    }
    min_left_image_no = (max_left_image_no+1)%n;

    //先检测左边有没有候补image，即看看最右边的那个left有没有超过(n-1)*windows_width-move_px,如果超过了，那么说明我等一下移动一个move_px,那么左边就会出现白边，
    //为了避免白边，那么当出现这种情况的时候，我们先将最右边的那个image拿到最左边
    if(left>((n-1)*windows_width-move_px))
    {
        set_image_left(image_div[max_left_image_no], left-n*windows_width);
        min_left_image_no = max_left_image_no;
        max_left_image_no = (max_left_image_no-1+n)%n;

    }

    //将所有image向右平移move_px,除了最左边的那个，其他的少向右平移一个像素，
    // 保证左边的image覆盖右边的image一个像素，这样平移的时候不会有白边
    left = get_image_left(image_div[min_left_image_no])+move_px;
    for(var i=0;i<n;i++)
    {
        var no=(min_left_image_no+i)%n;
        var t_left = left+i*windows_width;
        if(no!=min_left_image_no)
        {
            t_left-=i;
        }
        set_image_left(image_div[no], t_left);
    }

    //当最右边的那张图片的left超出了(n-1)*windows_width，就把他放在最左边

    var max_left = get_image_left(image_div[max_left_image_no]);

    if(max_left>((n-1)*windows_width-move_px))
    {
        for(var i=0;i<n;i++)
        {
            set_image_left(image_div[(min_left_image_no+i)%n], i*windows_width);
        }
        control_next();
        wait_and_start_move_right_clock();
    }
}

</script>
</html>

Etherwave's Blog Hi~ o(*￣▽￣*)ブ

文章目录