前端作业3：轮播图和微博发布案例

最新推荐文章于 2024-06-16 13:16:08 发布

Continue_with

最新推荐文章于 2024-06-16 13:16:08 发布

阅读量153

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/Continue_with/article/details/138234223

版权

轮播图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>chyo-d</title>
    <style type="text/css">
        div,ul,li{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 500px;
            height: 300px;
            position: relative;
            top: 100px;
            left: 30%;
        }
        .container img{
            position: absolute;        
            width: 100%;
            transition-duration: 1s;    
            opacity: 0;                
        }
        .container img.on{
            opacity: 1;         
        }
        .left, .right{
            position: absolute;
            top: 30%;
            width: 60px;
            height: 100px;
            line-height: 100px;
            background-color: rgb(138, 135, 135);
            opacity: 0.5;
            text-align: center;
            font-size: 60px;
            color: rgb(194, 191, 191);
            display: none;      
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
        .container:hover .left, .container:hover .right{
            display: block;            
        }
        .left:hover, .right:hover{
            color: white;
        }
        .container ul{
            position: absolute;
            bottom: 0;
            max-width: 500px;
            padding: 5px 200px;
        }
        .container ul li{
            list-style: none;
            float: left;
            background-color: #ccc;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-left: 10px;
        }
        .container ul li.active{
            background-color: black;    
        }
    </style>
</head>
<body>
    <div class="container">
        <img class="on" src="./图片/12-30-45.jpg" />
        <img src="图片/12-31-06.jpg" />
        <img src="./图片/12-31-16.jpg" />
        <img src="./图片/R-C.png" />
        <div class="left"><</div>
        <div class="right">></div>
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script type="text/javascript">
        var aImgs = document.querySelectorAll('.container img');
        var aLis = document.querySelectorAll('.container li');
        var btnLeft = document.querySelector('.container .left');
        var btnRight = document.querySelector('.container .right');
        var index = 0;   
        var lastIndex = 0;
        btnRight.onclick = function(){
            lastIndex = index;
            aImgs[lastIndex].className = '';
            aLis[lastIndex].className = '';
            index++;
            index %= aImgs.length;   
            aImgs[index].className = 'on';
            aLis[index].className = 'active';
        }
        btnLeft.onclick = function(){
            lastIndex = index;
            aImgs[lastIndex].className = '';
            aLis[lastIndex].className = '';
            index--;
            if (index < 0) {
                index = aImgs.length - 1;
            }
            aImgs[index].className = 'on';
            aLis[index].className = 'active';
        }
    </script>
</body>
</html>

微博发布案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="css/weibo.css"> -->
  <link rel="stylesheet" href="./css/weibo.css">
  <script src="../代码/代码/jquery.min.js">

  </script>
</head>

<body>
  <div class="w">
    <div class="controls">
      <img src="images/tip.png" alt=""><br>
      <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
      <div>
        <span class="useCount">0</span>
        <span>/</span>
        <span>200</span>
        <button id="send">发布</button>
      </div>

    </div>
    <div class="contentList">
      <ul>



        

      </ul>
    </div>
  </div>
  <script >
    const txt = document.querySelector("#area")
    const ch_span = document.querySelector(".useCount")
    const btn = document.querySelector("#send")
    const ul = document.querySelector(".contentList ul")
    txt.addEventListener("input", function (){
      ch_span.innerHTML = txt.value.length
    })
    btn.addEventListener("click", function (){
        //trim()去除两边的空格
        if(txt.value.trim().length > 0){
          let newli = document.createElement("li")
          newli.innerHTML = `${txt.value.trim()} <button>删除</button>` 
          ul.insertBefore(newli,ul.children[0])
          ch_span.innerHTML = "0"
          

        }else {
          alert("请输入内容！！！")
        }
    })
    txt.addEventListener("kaydown", function(e){
        if(e.key === "Enter"){
          btn.click()
        }
    })
    ul.addEventListener("click", function(e){
        if(e.target.tagName === "BUTTON"){
          ul.removeChild(e.target.parentNode)
        }
    })
  </script>
</body>

</html>