Javascript实现单张图片浏览

更新时间：2014年12月18日 10:50:23 投稿：hebedich

这篇文章主要介绍了Javascript实现单张图片浏览，非常的简单，是学习javascript时练手用的，跟我一样的菜鸟看看吧，大神请略过

利用空闲时间，学习JavaScript语言时写了一个链接浏览单张图片的例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> Image Gallery </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

 </HEAD>

<script language="javascript">

function showPic(whichpic){

    var source=whichpic.getAttribute("href");//获取当前点击的元素的属性href的值

    var placeholder=document.getElementById("placeholder");//获取目标

    placeholder.setAttribute("src",source);//设置目标的属性src,从而达到改变图片

    var text=whichpic.getAttribute("title");//获取当前点击的元素的属性title的值

    var description=document.getElementById("description");

    description.firstChild.nodeValue=text;//把点击元素的标题赋给<p>

    //或者 description.childNodes[0].nodeValue=text;

}

</script>

 <BODY>

  <h1>Javascript 图片馆</h1>

  <ul>

    <li>

        <a href="images/fireworks.jpg" title="Image1" onclick="showPic(this); return false;">图片一</a>

    </li>

    <li>

      <a href="images/coffee.jpg" title="Image2" onclick="showPic(this); return false;">图片二</a>

    </li>

    <li>

      <a href="images/rose.jpg" title="Image3" onclick="showPic(this); return false;">图片三</a>

    </li>

    <li>

      <a href="images/bigben.jpg" title="Image3" onclick="showPic(this); return false;">图片四</a>

    </li>

  </ul>

  <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />

  <p id="description">选择图片.</p>

 </BODY>

</HTML>

注意：

在标签 <a></a> 上加事件我们要注意，避免使它执行跳转。
解决方法：函数返回false；事件认为链接没有被点击。

如果href的值是javascript:void(0);也可以不跳转。

您可能感兴趣的文章:

GoJs图形绘图模板Shape示例详解
这篇文章主要为大家介绍了GoJs图形绘图模板Shape示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
修复ie8&chrome下window的resize事件多次执行
window.onresize 事件专用事件绑定器 v0.1,用于解决 lte ie8 & chrome 及其他可能会出现的原生 window.resize 事件多次执行的 BUG.
2011-10-10
javascript模拟C#格式化字符串
学习C#的朋友都知道format()这个方法，本文给大家介绍在javascript中如何实现此操作，js模拟C#字符串格式化操作，需要的盆友一起学习吧
2015-08-08
JS刷新当前页面的几种方法总结
本篇文章主要是对JS刷新当前页面的几种方法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
一文带你玩转JavaScript的箭头函数
在ES6中新增了函数的简写方式----箭头函数，箭头函数的出现不仅简化了大量代码，也让代码看起来更加优雅，同时也解决了this指向问题，下面我们就来详细讲解如何玩转箭头函数
2022-09-09
javascript九宫格图片随机打乱位置的实现方法
这篇文章主要为大家详细介绍了javascript九宫格图片随机打乱位置的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
js面试题之异步问题的深入理解
这篇文章主要给大家介绍了关于js面试题之异步问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
JavaScript计时器示例分析
这篇文章主要介绍了JavaScript计时器示例分析,需要的朋友可以参考下
2015-02-02
详解webpack异步加载业务模块
本篇文章主要介绍了webpack异步加载业务模块，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
javascript五图轮播切换实用版
今天发表一个自己刚学js的练习，javascript五图轮播切换---实用版，这个实力有个缺陷就是没有过渡效果，这个本人也还在研究中，也希望高手可以指点一下
2012-08-08