前端小白4634 2022-01-08 22:10 采纳率: 100%
浏览 116
已结题

轮播图第一张图片切换没有过度效果,第二张开始才有效果,怎么解决求指导

#轮播图第一张图片切换没有过度效果,第二张开始才有效果,怎么解决求大佬指导

img

* {
    padding: 0;
    margin: 0;
}

img {
    width: 540px;
    /* border: #FF0000 1px solid; */
}

#outer {
    width: 540px;
    height: 540px;
    margin: 50px auto;
    background-color: #bfa;

    line-height: 0;
    position: relative;
     overflow: hidden; 
    /* border: #FF0000 1px solid; */

}

#imgList {
    list-style: none;
    position: absolute;
    transition: all 1s ;
    /* border: #FF0000 1px solid; */
}

#imgList li {
    float: left;
    /* margin: 0 10px; */
}
#navDiv{
    position: absolute;
    top: 500px;
    
}
#navDiv a{
    /* display: block; */
    float: left;
    width: 20px;
    height: 20px;
    background-color:red ;
    border-radius: 50%;
    margin: 0 5px;
    opacity: 0.5;

    
}
#navDiv a:hover{
    background-color: black;
    
}


window.onload = function() {
    //设置imgList width;
    var imgList = document.getElementById("imgList");
    var imgArr = document.getElementsByTagName("img");
    imgList.style.width = 540 * imgArr.length + "px";

    // 设置导航按钮居中
    var outer = document.getElementById("outer");
    var navDiv = document.getElementById("navDiv");
    navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";

    // 默认显示图片的索引
    index = 0;
    var allA = document.getElementsByTagName("a");
    allA[index].style.backgroundColor = "black";

    //点击超链接切换到指定的图片;
    for (var i = 0; i < allA.length; i++) {
        allA[i].num = i;
        allA[i].onclick = function() {
            index=this.num;
            imgList.style.left=-540*index+"px";
            setA();
        }
        
    }
    function setA(){
        for (var i = 0; i < allA.length; i++) {
            allA[i].style.backgroundColor="";
        }
        allA[index].style.backgroundColor="black";
    }
}

  • 写回答

3条回答 默认 最新

  • 三千劫 2022-01-09 09:53
    关注

    没有设置初始imgList.style.left,导致第一次点击事件是设置样式而不是修改样式,所以第一次点击没有过度效果

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 1月17日
  • 已采纳回答 1月9日
  • 创建了问题 1月8日

悬赏问题

  • ¥15 在若依框架下实现人脸识别
  • ¥15 网络科学导论,网络控制
  • ¥100 安卓tv程序连接SQLSERVER2008问题
  • ¥15 利用Sentinel-2和Landsat8做一个水库的长时序NDVI的对比,为什么Snetinel-2计算的结果最小值特别小,而Lansat8就很平均
  • ¥15 metadata提取的PDF元数据,如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误,如何解决?
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本,但是每一行里面数据之间空格数量不同