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 编写vba代码实现数据录入工作
  • ¥15 做过TCL海信电视小米电视相关影视会员软件私我
  • ¥15 Mapreduce是正常的,在运行其他jar包时并没有任何问题,只是在做LogCount.jar 时出的问题。如图所示
  • ¥15 ImportError: DLL load failed while importing _iterative: 找不到指定的模块。
  • ¥15 如何通过交互分析得出某高危患者对放疗获益更多
  • ¥15 相关性分析中,p<0.05, r=0.29,怎么评价相关性呢
  • ¥15 docker部署Mongodb后输入命令报错?
  • ¥15 将下列流程图转变成python程序代码
  • ¥15 我需要全国每个城市的最新小区名字等数据。
  • ¥15 开发一个小区生态的小程序