带按钮的简易轮播图

2020-06-20

原创字数统计: 706 | 阅读时长: 4分

GIFmm202020620

实现简易的带按钮轮播图。

原理是利用overflow属性和marginTop属性,让图片上下移动，遮盖溢出的部分，达到视觉上的轮播效果。

HTML部分

<!-- 外边框 -->
<article class="carousel-out">
    <!-- 轮播图 -->
    <section id="carousel" onmouseover="show_btn(this)" onmouseout="hidden_btn(this)">
        <ul id="pic">
            <li><img src="https://cdn.jsdelivr.net/gh/Anyway521/blogpic@main/image/image1.jpg" alt=""></li>
            <li><img src="https://cdn.jsdelivr.net/gh/Anyway521/blogpic@main/image/image2.jpg" alt=""></li>
            <li><img src="https://cdn.jsdelivr.net/gh/Anyway521/blogpic@main/image/image3.jpg" alt=""></li>
            <li><img src="https://cdn.jsdelivr.net/gh/Anyway521/blogpic@main/image/image4.jpg" alt=""></li>
            <li><img src="https://cdn.jsdelivr.net/gh/Anyway521/blogpic@main/image/image5.jpg" alt=""></li>
        </ul>
        <!-- 序号 -->
        <ol id="list" type="1"> 
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <!-- 左右按钮 -->
        <div id="btn_left"><i class="fa fa-angle-double-left" aria-hidden="true"></i></div>
        <div id="btn_right"><i class="fa fa-angle-double-right" aria-hidden="true"></i></div>
    </section>
    <!-- 按钮遮罩 -->
    <aside id="carousel-cover">
        <div id="carousel-cover-left"></div>
        <div id="carousel-cover-right"></div>
    </aside>   
</article>

核心JS

var pic = document.getElementById("pic");
var f_list= document.getElementById("list")
var list = document.getElementById("list").getElementsByTagName("li");
var left_b = document.getElementById("btn_left");
var right_b = document.getElementById("btn_right");
var index=0;
var time = null;

function auto() {
    
    time=setInterval(function(){
    index++;
    index = index % list.length;
        img_change(index)
    },2000)
    
}
    auto();

// 选择要显示的序号和图片
function img_change(cur_index){
    pic.style.marginTop=-250*cur_index+"px";
    for(var i=0;i<list.length;i++){
        list[i].className = " ";
    }
    list[cur_index].className="on";
    index=cur_index;
}


function overstop_outchange(obj) {
    // 鼠标悬停，清除计时器，暂停滚动
    obj.onmouseover = function () {
        obj.style.cursor = "pointer";
        clearInterval(time);
    }
    //鼠标离开，继续滚动
    obj.onmouseout = auto;
}
overstop_outchange(f_list);
overstop_outchange(pic);
overstop_outchange(left_b);
overstop_outchange(right_b);


// 鼠标悬停时切换对应的序号
for (var i=0;i<list.length;i++){
    //id等于自身的下标
    list[i].id = i
    list[i].onmouseover=function(){
        img_change(this.id)
    }
}
//按钮点击切换
left_b.onclick = function () {
    index--;
    if (index <= 0) {
        index += list.length - 1;
    }
    img_change(index);
}


right_b.onclick = function () {
    index++;
    index = index % list.length;
    img_change(index);
}

function show_btn(obj) {
    var buttons = obj.getElementsByTagName("div");
    for (var i = 0; i < buttons.length; i++){
        buttons[i].children[0].style.display = "block" 
    }
}

function hidden_btn(obj) {
    var buttons = obj.getElementsByTagName("div");
    for (var i = 0; i < buttons.length; i++){
        buttons[i].children[0].style.display = "none" 
    }
}

具体效果可以点击这里查看。

本文作者： 本该如此
本文链接： https://anyway521.github.io/post/71beb244.html
最后更新： 2021年01月13日 11:11:22
版权声明： 博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议进行许可，转载请注明出处！