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

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

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

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 如何删除这个虚拟音频
  • ¥50 hyper默认的default switch
  • ¥15 网站打不开,提示502 Bad Gateway
  • ¥20 基于MATLAB的绝热压缩空气储能系统代码咨询
  • ¥15 R语言建立随机森林模型出现的问题
  • ¥15 中级微观经济学,生产可能性边界问题
  • ¥15 TCP传输时不同网卡传输用时差异过大
  • ¥15 请各位看看我写的属于什么算法,或者有更正确的写法?
  • ¥15 html5 qrcode 扫描器
  • ¥15 爬取网页信息并保存需要完整代码