JavaScript浅显易懂(十)——onclick练习

最新推荐文章于 2020-06-17 11:08:08 发布

lvshun_19991027

最新推荐文章于 2020-06-17 11:08:08 发布

阅读量166

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43799743/article/details/106609555

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

不多说先上代码很简单适合新手练习

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Title</title>
    <style>
        *{
            //清除默认样式
            margin: 0;
            padding: 0;
        }
        #outer{
            width: 500px;
            margin: 50px auto;
            padding: 10px;
            background-color: yellowgreen;
            /*设置文本居中*/
            text-align: center;
        }
        #outer1{
            width: 500px;
            margin: 50px auto;
            padding: 100px;
            background-color: yellowgreen;
            /*设置文本居中*/
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="outer">
        <p id="info">一共5张图片,当前第1张</p>
        <img src="img/1.jpg" alt="冰棍">
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
    <div id="outer1">
        <button id="btn">电我</button>
        <ul id="city">
            <li id="li">dd</li>
            <li>ss</li>
            <li>gf</li>
            <li>gg</li>
        </ul>
    </div>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

Javascript

这里用数组存储img的src 通过改变src实现更换图片

/*
 * 切换图片改 src
 *
 */

var prev = document.getElementById("prev");
var next = document.getElementById("next");
var img = document.getElementsByTagName("img")[0];
var info = document.getElementById("info");

//设置提示文字

//计数器
var index = 0;

//创建数组存路径
var imgArray = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];

prev.onclick = function () {
    index--;
    if (index < 0 ) {
        index = imgArray.length - 1;
    }
    img.src = imgArray[index];

    info.innerHTML = "共"+(imgArray.length)+"张图片，当前第"+(index+1)+"张图片";

};

next.onclick = function () {
    // alert("下一张");
    index++;
    if (index > imgArray.length - 1 ) {
        index = 0;
    }
    img.src = imgArray[index];
    info.innerHTML = "共" + (imgArray.length) + "张图片，当前第" + (index+1) + "张图片";
};

/*
* childNodes 属性会获取包括文本节点在内的所有子节点
* 根据DOM标签 标签间的换行空白也会当为文本节点
* 注意  IE8以下不会把空白当成文本节点
* */

var btn = document.getElementById("btn");
var city = document.getElementById("city");

var cns = city.childNodes;
/*
* children属性可以获取所有子节点 不包括空白文本节点
* */
var cns2 = city.children;

alert(cns2.length);

效果图

lvshun_19991027

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript浅显易懂(十)——onclick练习

不多说先上代码很简单适合新手练习HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ //清除默认样式 margin: 0; padding: 0; ..
复制链接

扫一扫