启航暑假作业2

最新推荐文章于 2024-10-04 06:11:34 发布

Doer782

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量135

点赞数

分类专栏：笔记文章标签： bootstrap html css

本文链接：https://blog.csdn.net/qq_62725148/article/details/126671229

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这次没有用到bootstrap插件所以有的布局不算特别好看还算凑活吧(* /ω＼*)

html部分：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="base.css">
    <script src="animate.js"></script>
    <script src="base.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="base">
        <ul>
            <li><img src="1.jpg"></li>
            <li><img src="2.jpg"></li>
            <li><img src="3.jpg"></li>
            <li><img src="4.jpg"></li>
            <li><img src="1.jpg"></li>
        </ul>
        <ol class="circle"></ol>
        <button class="btn" id="lbtn"> < </button> 
        <button class="btn" id="rbtn"> > </button>
    </div>

</body>
</html>

css部分：

.base{
    width: 1400px;
    overflow: hidden;  
    position: absolute;
    margin-left: 250px;
}
img{
    width: 1400px;
}
.btn {
    width: 60px;
    height: 100px;
    z-index: 100;
    top: 350px;
    color: #040001;
    opacity:0.5;
    display: none;
}
#lbtn {
    left: 40px;
    position: absolute; 
}
#rbtn {
    right:0px;
    position: absolute; 
}
.base ul li{
    float:left;
}
.base ul{
    width: 600%;
    list-style: none;
    top: 0;
    left: 0;
    position: absolute;
}
.circle{
    list-style: none;
    padding-right: 0px;
    right: -200px;
    bottom: 20px;
    z-index: 100px;
    height: 20px;
    margin-left: 600px;
    margin-top: 850px;
}
ol li{
    list-style: none;
    float: left;
    width: 10px;
    height: 10px;
    background-color: rgb(160, 159, 158);
    border-radius: 100%;
    margin-right: 8px;
    border-style: solid;
    border-width: 2px;
    border-color: slategray;

}
.active{
    background-color: rgb(250, 159, 159);
}

js部分：

window.addEventListener('load',function() {
        var rbtn=document.getElementById('rbtn');
        var lbtn=document.getElementById('lbtn');
        var btn=document.querySelectorAll('.btn');
        var base=document.querySelector('.base');
        var img=document.querySelector('img');
        var ul=base.querySelector('ul');
        var ol=base.querySelector('ol');
        var imgwidth=base.offsetWidth;
        var circle=0;
        base.addEventListener('mouseenter',function(){
            rbtn.style.display='block';
            btn[0].style.display='block';
            clearInterval(timer);
            timer=null;
        })
        base.addEventListener('mouseleave',function(){
            rbtn.style.display='none';
            btn[0].style.display='none';
        })
        for(var i=0;i<ul.children.length-1;i++){
            var li=document.createElement('li');
            li.setAttribute('index',i);
            ol.appendChild(li);
            li.addEventListener('click',function(){
                for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className='';
                }
                this.className='active';
                var index=this.getAttribute('index');
                num=index;circle=index;
                animate(ul,-index*imgwidth-45);
            })
        }
        ol.children[0].className='active';
        var num=0;
        rbtn.addEventListener('click',function(){
            if(num==4){
                ul.style.left=0;
                num=0;
            }
            num++;
            animate(ul,-num*imgwidth-45);
            circle++;
            if(circle==4){
                circle=0;
            }
            for(var i=0;i<ol.children.length;i++)
            {
                ol.children[i].className="";
            }
            ol.children[circle].className='active';
        })
        lbtn.addEventListener('click',function(){
            if(num==0){
                ul.style.left=-4+imgwidth+'px';
                num=4;
            }
            num--;
            animate(ul,-num*imgwidth-36);
            circle--;
            if(circle<0){
                circle=3;
            }
            for(var i=0;i<ol.children.length;i++)
            {
                ol.children[i].className="";
            }
            ol.children[circle].className='active';
        })
        var timer=this.setInterval(function(){
            rbtn.click();
        },5000)
        
})

以及一些效果图：