点击某个按钮切换图片、文字描述（按钮颜色跟着改变）（简化代码）

最新推荐文章于 2023-06-02 14:44:27 发布

原创最新推荐文章于 2023-06-02 14:44:27 发布 · 4.8k 阅读

17 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

98 篇文章

订阅专栏

本文介绍了如何通过HTML定义按钮，CSS美化按钮并实现颜色变化，以及JavaScript实现点击按钮后切换图片和文字描述的功能。通过简洁的代码示例，读者可以轻松理解并应用到自己的项目中。

这里写图片描述

html:

<div id="pic">
    <img src="img/1.jpg" alt="">
    <span>数量正在加载...</span>
    <p>文字正在加载...</p>
    <ul></ul><!-- 动态插入li标签，右边栏小方框-->
</div>

css:

body {background-color: #333;}
ul {padding: 0;margin: 0;}
li {list-style: none}
#pic {
    width: 120px;
    height: 200px;
    position: relative;
    margin: 0 auto;
}
#pic img {
    width: 120px;
    height: 200px;
}
#pic ul {
    position: absolute;
    top: 0;
    right: -50px;
}
#pic ul li {
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
    background-color: #666;
}       
p,span {
    width: 120px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    position: absolute;
    left: 0;
}
p { bottom: 0;margin: 0;}
span { top: 0;}
#pic .active { background-color: #fc3;}

js：

window.onload = function(){         
    // 找各个元素
    var pic = document.getElementById('pic');
    var imgs = pic.getElementsByTagName('img')[0];
    var lis = pic.getElementsByTagName('li')[0];
    var txt = pic.getElementsByTagName('p')[0];
    var spans= pic.getElementsByTagName('span')[0];
    var uls = pic.getElementsByTagName('ul')[0];
    var lis = uls.getElementsByTagName('li');//找到页面中的li元素,li元素是往里面塞进去的

    // 准备载入的数据
    var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
    var arrTxt = ['海上帆船','小台灯','椰子树','照相机'];
    var num = 0;//有数组的地方一般都有数字，因为图片地址配合数字就能找到文字描述

    // 插入li标签，li标签数量是根据数组中数据多少来决定
    for(var i=0;i<arrUrl.length;i++){
        uls.innerHTML += '<li></li>';//往Ul里添加li就要写成+=，如果是改写就直接写成等号 
    }

    // 初始化，要先插入标签再初始化，顺序不要颠倒，否则会出错
    function fnTab(){
        imgs.src = arrUrl[num];//显示第一张图片
        spans.innerHTML = num+1+'/'+arrUrl.length;//显示上面总张数（自动获取总数）
        txt.innerHTML = arrTxt[num];//显示文字描述内容
        for(var i=0;i<lis.length;i++){//循环遍历所有li标签
            lis[i].className = '';//清空所有类名
        }
        lis[num].className = 'active';//给当前的li添加类名  
    }
    fnTab();//调用函数              

    //给li添加点击事件
    for(var i=0;i<lis.length;i++){  
        lis[i].index = i;//自定义属性又叫索引值
        lis[i].onclick = function(){
            num = this.index;                  
            fnTab();//执行上一段函数                   
        };              
    }
}