面向对象实现轮播图

最新推荐文章于 2022-06-05 18:04:56 发布

HAI6545

最新推荐文章于 2022-06-05 18:04:56 发布

阅读量483

点赞数 1

分类专栏： JavaScript案例文章标签： css html css3

本文链接：https://blog.csdn.net/HAI6545/article/details/122308373

版权

JavaScript案例专栏收录该内容

105 篇文章 3 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style> 
.carousel{
    width: 600px;
    height: 300px;
    border:1px solid #000;
    margin:50px auto;
    position: relative;
}
.carousel ul, .carousel ol{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.carousel ul li{
    display:none;
}
.carousel ul li.active{
    display: block;
}
.carousel ul li a img{
    width: 600px;
    height: 300px;
}
.carousel ol{
    height: 20px;
    background-color: rgba(255,255,255,.7);
    border-radius:10px;
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
}
.carousel ol li{
    width: 10px;
    height: 10px;
    background-color: #000;
    float:left;
    border-radius:50%;
    margin:5px;
}
.carousel ol li.active{
    background-color: #f00;
}
.carousel span{
    width: 20px;
    height: 40px;
    background-color: rgba(0,0,0,.7);
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    text-align: center;
    line-height: 40px;
    color:#fff;
}
.carousel span.leftBtn{
    left: 0;
}
.carousel span.rightBtn{
    right: 0;
}
.carousel:hover{
    cursor: pointer;
}
</style>
<body>
<div class="carousel">
    <ul>
        <li class="active">
            <a href="">
                <img src="./images/1.jfif" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="./images/2.webp" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="./images/3.jfif" alt="">
            </a>
        </li>
    </ul>
    <ol>
        <li class="active"></li>
        <li></li>
        <li></li>
    </ol>
    <span class="leftBtn">&lt;</span>
    <span class="rightBtn">&gt;</span>
</div>
</body>
<script>
// 步骤：
/*
1.定义空的构造函数
2.new他
3.在构造函数中给对象添加属性 - 只要属性
4.添加事件 - 将所有的事件写在一个方法中
5.用new出来的对象调用这个方法
*/

function Carousel(){
    // 效果中 - 对象的属性其实就是要操作的标签/下标index/定时器变量
    this.carousel = document.querySelector('.carousel');
    this.ulis = this.carousel.querySelectorAll('ul li')
    this.olis = this.carousel.querySelectorAll('ol li')
    this.leftBtn = this.carousel.querySelector('span.leftBtn')
    this.rightBtn = this.carousel.querySelector('span.rightBtn')
    this.index = 0
    this.timerId = null
}
// 事件 - 方法
Carousel.prototype.move = function(){
    // 给元素添加事件
    // console.log(this);
    this.rightBtn.onclick = () => {
        // 操作下标自增
        // console.log(this); // 这是事件源 - 不能操作.index - 需要换成剪头函数
        this.index++
        // 限制下标
        if(this.index === this.ulis.length){
            this.index = 0
        }
        // 根据下标变化
        for(var i=0;i<this.ulis.length;i++){
            this.ulis[i].className = this.olis[i].className = ''
        }
        this.ulis[this.index].className = this.olis[this.index].className = 'active'
    }

    this.leftBtn.onclick = () => {
        // 操作下标自增
        // console.log(this); // 这是事件源 - 不能操作.index - 需要换成剪头函数
        this.index--
        // 限制下标
        if(this.index < 0){
            this.index = this.ulis.length-1
        }
        // 根据下标变化
        for(var i=0;i<this.ulis.length;i++){
            this.ulis[i].className = this.olis[i].className = ''
        }
        this.ulis[this.index].className = this.olis[this.index].className = 'active'
    }

    for(let j=0;j<this.olis.length;j++){
        this.olis[j].onclick = () => {
            // console.log(this);
            this.index = j
            for(var i=0;i<this.ulis.length;i++){
                this.ulis[i].className = this.olis[i].className = ''
            }
            this.ulis[this.index].className = this.olis[this.index].className = 'active'
        }
    }

    // 自动轮播
    this.timerId = setInterval(() => {
        this.rightBtn.onclick()
    }, 1000)

    // 鼠标移入
    this.carousel.onmouseover = () => {
        clearInterval(this.timerId)
    }
    // 鼠标移出
    this.carousel.onmouseout = () => {
        this.timerId = setInterval(() => {
            this.rightBtn.onclick()
        }, 1000)
    }
}

var c = new Carousel()
console.log(c);
c.move()
</script>
</html>

HAI6545

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
面向对象实现轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> .carousel{ width: 600px; height: 300px; border:1px solid #000; margin:50px aut..
复制链接

扫一扫