js入门实例一

最新推荐文章于 2024-09-09 09:35:48 发布

ZzDIY

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量84

点赞数

分类专栏： js训练文章标签： javascript css html 前端

本文链接：https://blog.csdn.net/qq_43526925/article/details/92623983

版权

js训练专栏收录该内容

7 篇文章 0 订阅

订阅专栏

js实现图片库

编译器:visual Studio code
html片段

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>切换图片</title>
        <link href="css/01.css" rel="stylesheet">
    </head>
    <body>
        <h1>修仙步骤</h1>
        <div>
            <div class="pic_select">
                <ul id="galleryimages">
                    <li><a href="images/01.jpg" title="1">第一步</a></li>
                    <li><a href="images/02.jpg" title="2">第二步</a></li>
                    <li><a href="images/03.jpg" title="3">第三步</a></li>
                    <li><a href="images/04.jpg" title="4">第四步</a></li>
                    <li><a href="images/05.jpg" title="5">第五步</a></li>
                    <li><a href="images/06.jpg" title="6">第六步</a></li>
                    <li><a href="images/07.jpg" title="7">第七步</a></li>
                    <li><a href="images/08.jpg" title="8">第八步</a></li>
                    <li><a href="images/09.jpg" title="9">第九步</a></li>
                    <li><a href="images/10.jpg" title="极">第十步</a></li>
                </ul>
            </div>
            <img src="images/00.jpg" id="change" title="0">
            <div class="dump"></div>
        </div>
        <p id="description">修仙之路十为极</p>
        <script type="text/javascript" src="js/01.js"></script>
    </body>
</html>

js位置
1.js代码放在文档中的

2.js代码存在一个扩展名为js的独立文件。在里放置

3.js代码存在一个扩展名为js的独立文件。放在文档最后，之前。(推荐)

css片段

*
{
    padding:0;
    margin:0;
}
h1
{
    text-align:center;
    letter-spacing:1rem;
}
.pic_select
{
    width:10rem;
    margin-top:1rem;
    margin-left:10rem;
    padding-left:2rem;
    float:left;
}
img
{
    width:500px;
    height:500px;
    margin-top:1rem;
    margin-right:5rem;
    float:right;
}
.dump
{
    clear:both;
}
li
{
    margin-top:1.8rem;
}
a
{
    color:#000;
    text-decoration:none;
}
a:hover
{
    color:red;
}
p
{
    color:red;
    font-size:1.5rem;
    text-align:center;
}

目的：利用js实现点击图片链接在当前网页显示。

步骤：

增加一个“占位符”图片在这个网页上为图片预留一个浏览位置。

<img src="images/00.jpg" id="change" title="0">

点击链接时，切换图片，拦截网页的默认行为。
优化

首先js完成1

function showPic(whichpic)
{
    var change = document.getElementById("change");            //获取change对象。
    var source = whichpic.getAttribute("href");                //找出whichpic中的href属性。
    change.setAttribute("src",source);                    //将source变成src的值。          
}

因为a元素较多，我在这就不使用onclick事件。
使用onload事件,并用遍历数组将该图库实现2。

window.onload = appropriate;

function appropriate()
{
    var gallery = document.getElementById("galleryimages");
    var link = gallery.getElementsByTagName("a");
    for(var i=0; i<link.length; i++)
    {
        link[i].onclick = founction ()
        {
            showPic(whichpic);
            return false;                           //拦截网页的默认行为。
        }
    }
}

3省略

ZzDIY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
js入门实例一

js实现图片库编译器:visual Studio codehtml片段<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>切换图片<...
复制链接

扫一扫