qq_54549353 2022-02-14 21:46 采纳率: 50%
浏览 75
已结题

我想设置轮播图的宽度占据页面的两边,为什么只有第一张图片能沾满页面的两边,其他图片就不能,设置了width:100%

问题遇到的现象和发生背景

img

img


我想像第一张图片一样图片占据整个页面,但是设置了width:100% 只有第一张图片实现了下过,下面的几张图片就没有占据页面两边

这是我源码

img

img

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>峨眉山旅游网</title>
        <style type="text/css">
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        .tupian .imgs img{
            width: 100%;
        }
        .tupian .imgs li:nth-child(2),.tupian .imgs li:nth-child(3),.tupian .imgs li:nth-child(4),.tupian .imgs li:nth-child(5){
            position: absolute;
            top: 0;
            left: 0;
        }
        .tupian{
            position: relative;
        }
        .tupian .focus{
            position: absolute;
            display: flex;
            /* 焦点平移到右下角 */
            bottom: 6px;
            left: 50%;
            margin-left: -36px;
        }
        .tupian .focus li{
            width: 20px;
            height: 20px;
            background: deeppink;
            border-radius: 50%;
            margin: 3px;
        }
        .imgs li{
            transition: all 500ms;
        }
        </style>
    </head>
    <body>
        <div class="big">
            <div class="tupian">
                <ul class="imgs">
                    <li><img src="轮播图图片/2.jpg" ></li>
                    <li><img src="轮播图图片/1.jpg" ></li>
                    <li><img src="轮播图图片/3.jpg" ></li>
                    <li><img src="轮播图图片/4.jpg" ></li>
                    <li><img src="轮播图图片/5.jpg" ></li>
                </ul>
                <ul class="focus">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        let imgs=document.querySelectorAll('.tupian .imgs li');
        let focus=document.querySelectorAll('.tupian .focus li');
        function show(i){
                   imgs.forEach(function(xue,index){
                       xue.style.opacity=0;
                       // 点点还原
                       focus[index].style.background='#fff'
                   })
                   imgs[i].style.opacity=1;
                   focus[i].style.background='#f40'
        }
        show(0)
        // 加定时轮播
        let k=0;
        let set=setInterval(every,3000);
        function every(){
                   k++;
                   if(k>4){k=0;}
                   show(k);
        }
        // 鼠标事件 经过 暂停,鼠标离开 继续轮播
        focus.forEach(function(dian,index){
                   dian.onmouseenter=function(){
                       clearInterval(set); // 清除定时器,不再播放
                       k=index;
                       show(k);
                   }
                   dian.onmouseleave=function(){
                       set=setInterval(every,3000)
                   }
        })
    </script>
</html>


  • 写回答

6条回答 默认 最新

  • 在下月亮有何贵干 前端领域优质创作者 2022-02-15 09:10
    关注

    试过了,可以,有用希望采纳一下

          .tupian .imgs img,
          .tupian .imgs li {
            width: 100%;
          }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(5条)

报告相同问题?

问题事件

  • 系统已结题 2月23日
  • 已采纳回答 2月15日
  • 修改了问题 2月14日
  • 创建了问题 2月14日

悬赏问题

  • ¥15 python动态规划:N根火柴摆出的最大数字
  • ¥20 (标签-excel)
  • ¥200 求idea10和MyEclipse7.1
  • ¥20 vb6.0截取当前窗体保存为jpg文件
  • ¥20 苹果手机不使用大疆sdk怎么获取遥控器控制信息或如何接入大疆sdk并且成功上架sdk
  • ¥20 woocommerce 注册按键重定向
  • ¥100 求书法图像文字切割代码
  • ¥15 同一个波形探测距离不同的目标,为什么fft之后得到的频谱图会发生移动,不应该时移不改变幅度谱吗(标签-matlab)(相关搜索:matlab仿真)
  • ¥15 Proteus仿真程序只能执行一次
  • ¥15 语音识别websocket报错