使用JS+CSS的网易云轮播图的实现（完整代码）

最新推荐文章于 2023-05-07 01:24:12 发布
willwe
最新推荐文章于 2023-05-07 01:24:12 发布
阅读量1.6k
点赞数 6
一个网易云轮播图的实现

<!DOCTYPE html>
<html lang="chn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
  /* 一些简单的初始化文件 */
* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
li {
    list-style-type: none;
}
/* 更改图片的大小 */
img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
}
/* 确定盒子的大小 */
.box {
    position: relative;
    width: 920px;
    height: 200px;
    /* 居中 */
    top: 0;
    left: 50%;
    transform: translate(-50%,50%);
} 
.imgs {
    position: absolute;
    width: 680px;
    height: 284px;
    top: 0;
    left: 50%;
    transform: translate(-50%,0%);
}
/* 让图片都叠在一起 */
.imgs li {
    position: absolute;
    width: 680px;
    height: 360;
    transition: 0.5s;
}
.imgs img{
  position: absolute;
  width: 100%;
  height: 200px;
}
.imgs .innerImg{
  width: 200px;
  height: 100px;
  margin-left: 250px;
  margin-top: 50px;
  box-shadow: 2px 2px 5px rgb(204, 223, 31);
}
/* 给左右按钮设计样式，和定位 */
.box .left {
    position: absolute;
    font-size: 24px;
    color: white;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background-color: black;
    border-radius: 18px;
    /* 添加半透明 */
    opacity: .3;
    top: 50%;
    left: 10px;
    z-index: 999;
}
.box .right {
    position: absolute;
    font-size: 24px;
    color: white;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background-color: black;
    border-radius: 18px;
    /* 添加半透明 */
    opacity: .3;
    top: 50%;
    right: 10px;
    z-index: 999;
}
/* 给左右按钮添加鼠标移入样式 */
.left:hover {
    /* 把透明度挑高一点，让按钮看起来更亮一些 */
    opacity: .7;
}
.right:hover {
    opacity: .7;
}
/* 把图片错开 */
.imgs .one {
    transform: translateX(-150px) scale(0.9);
    z-index: 1;
}
/* 第二张图片在中间，层级最高 */
.imgs .two {
    z-index: 2;
}
.imgs .three {
    transform: translateX(150px) scale(0.9);
    z-index: 1;
}
/* 刚开始不显示的图片就放在中间图片的下面 */
.imgs .four {
    transform: scale(0.9);
}
.imgs .five {
    transform: scale(0.9);
}
.imgs .six {
    transform: scale(0.9);
}
.twoInnerWords{
  position: absolute;
  top: 130px;
  left: 50%;
  margin-left: -60px;
  font-size: 20px;
  color: black;
}
.imgInnerWords{
  position: absolute;
  width: 500px;
  height: 80px;
  margin-left: 90px;
  margin-top: 60px;
  padding-top: 10px;
  border: 2px solid #888;
  background-color: rgba(241, 218, 148, 0.315);
  color: black;
}
.topWords{
  line-height: 30px;
  width: 90px;
  margin-left: 200px;
  background-color: rgba(233, 226, 127, 0.575);
  text-align: center;
}
.bottomWords{
  line-height: 30px;
  margin: 5px 0 0 130px;
}
/* 设计小圆圈 */
/* 定位 */
.list {
    position: absolute;
    bottom: -25px;
    left: 50%;
    margin-left: -81px ;
    z-index: 777;
}
/* 设计样式 */
.list li {
    float: left;
    width: 15px;
    height: 15px;
    background-color: rgb(230, 230, 230);
    border-radius: 50%;
    margin: 0 6px;
    cursor: pointer; 
}
/* 小圆圈改变后的样式 */
.list .change {
    background-color: rgb(236, 65, 65);
}
/* 左右两边各一个盒子 */
.rights{
    position: absolute;
    right: 0;
    bottom: 30px;
    height: 255.5px;
    width: 100px;
}
.lefts{
    position: absolute;
    left: 0;
    bottom: 14px;
    height: 255.5px;
    width: 100px;
}

</style>
</head>
<body>
    <!-- 大盒子 -->
    <div class="box">
        <!-- 左侧按钮 -->
        <a href="javascript:;" class="left">&lt</a>
        <!-- 右侧按钮 -->
        <a href="javascript:;" class="right">&gt</a>
        <!-- 轮播图片 -->
        <ul class="imgs" > 
            <li class="one">
                <a href="#">
                  <img src="../img/101.png">
                </a>
            </li>
            <li class="two">
                <a href="#" >
                  <img src="../img/102.png">
                </a>
            </li>
            <li class="three">
                <a href="#"><img src="../img/104.png" alt=""></a>
            </li>
            <li class="four">
                <a href="#"><img src="../img/105.png">
                <div class="imgInnerWords">
                </a>
            </li>
            <li class="five">
                <a href="#"><img src="../img/103.png" alt=""></a>
            </li>
            <li class="six">
                <a href="#"><img src="../img/101.png" >
                  <img src="./img/104.png" class="innerImg">
                </a>
            </li>
        </ul>
        <ul class="list">
        </ul>
        <div class="rights"></div>
        <div class="lefts"></div>
    </div>
    <script>
      window.addEventListener('load',function(){
    //获取元素
    var leftb = document.querySelector('.left');
    var rightb = document.querySelector('.right');
    var box = document.querySelector('.box');
    var imgs = box.querySelector('.imgs');   
    var imgt = imgs.querySelectorAll('li');
    //自动翻页函数
    var timeone = setInterval(function(){
        rightf();
    },1000);
    //左右按钮的出现
    box.addEventListener('mouseover',function(){
        leftb.style.display = 'block';
        rightb.style.display = 'block';
        //移入时清除定时器
        clearInterval(timeone);
        timeone = null;       
    })
    
    //左右按钮的消失
    box.addEventListener('mouseout',function(){
            leftb.style.display = 'none';
            rightb.style.display = 'none';
            //恢复定时器
            clearInterval(timeone);
            timeone = setInterval(function(){
            rightf();
        },1000)
        })
    //动态生成小圆圈，小圈圈模块
    var list = box.querySelector('.list');
    for(var i = 0;i < imgs.children.length;i++){
        //创建li，加入ul中
        var li =document.createElement('li');
        list.appendChild(li);
        //给小圈圈添加类名
        li.setAttribute('index',i);
        //排他思想，实现点击小圆圈，变色
        li.addEventListener('click',colors);
        //经过小圆圈，切换图片
        li.addEventListener('mouseenter',jump);
    }
    //一开始第二个亮
    list.children[1].className = 'change';
    //变色函数 
    function colors(){
        //把所有的小圆圈变白
        for(var i = 0 ; i < list.children.length ; i++){
            list.children[i].className = '';
        }
        //给图片对应的小圆圈上色
        var index = this.getAttribute('index');
        list.children[index].className = 'change';
    } 
    //跳转函数
    function jump(){
        var index = this.getAttribute('index');
        var now = num.indexOf('two');
        //计算经过点与当前点的距离
        var dif = Math.max(index,now) - Math.min(index,now);
        // console.log(dis);
        if(index > now){
            while(dif--){
                rightf();
            }
        }else {
            while(dif--){
                leftf();
            }
        }
    }
     //小圆圈跟随着图片移动
    var j = 1;
    function colort (){
        for(var i = 0 ; i < list.children.length ; i++){
            list.children[i].className = '';
        }
        if(j >= 6){
            j = 0;
        }else if (j < 0 ){
            j = 5;
        }
        list.children[j].className = 'change';
    }
     //翻页模块
     var num = ['one','two','three','four','five','six'];
     //右翻页
        rightb.addEventListener('click',rightf);
        function rightf(){
            //把数组的最后一个添加到第一个
            num.unshift(num[5]);
            //删除最后一个
            num.pop();
            //重新给li添加类名
            for(var i = 0;i < num.length;i++){
                imgt[i].setAttribute('class',num[i]);
            }
            //通过这个全局变量来让小圆圈的颜色一起变化
            j++;
            colort();
        }
    //左翻页
        leftb.addEventListener('click',leftf)
        function leftf(){
            num.push(num[0]);
            num.shift();
            for(var i = 0;i < num.length;i++){
                imgt[i].setAttribute('class',num[i]);
            }
            j--;
            colort();
        }
    //点击图片实现翻页,这里我是通过在左右两边添加一个盒子来实现的
        var rights = document.querySelector('.rights');
        rights.addEventListener('click',function(){
            rightf();
        })
        var lefts = document.querySelector('.lefts');
        lefts.addEventListener('click',function(){
            leftf();
        })
})

    </script>
</body>
</html>