code人生 · 2014 年 12 月 30 日 0

一个最简单的原生Javascript图片轮播函数

最近在看《Javascript DOM编程艺术》,京东搞活动的时候买的,算是半卖半送了。一直以为这是一本进阶的书,但是略略翻了一遍,发现这本书作为新学者的入门书实在是再好不过了。特别是稍微有点HTML+CSS基础的人,很容易就对DOM上手了。所以我对于Web开发初学者的建议是从W3cschool开始,然后买本《Javascript DOM编程艺术》,再看《JavaScript高级程序设计》。而犀牛书《Jacascript权威指南》更多应该当作手册来查阅,当作入门书是不适当的,其内容虽然不是很深,但是初学者看起来会云里雾里,我就是从这本书看起的,不得不说,虽然有淘宝前端团队翻译,但是中文版读起来还是很晦涩,有相当多的地方是需要自己另外查阅的。

而《JavaScript DOM编程艺术》基本上整本书都在用各种函数来实现对一个案例的功能丰富,十分细致,由于一直都是围绕一个页面来编写代码,所以上下文很容易形成记忆,不会跟看别的书一样跳来跳去,实际完成的作品效果有限,成就感更不足,还容易将一些知识点混淆。

看了一下这本书的第一个函数,是一个图片库的展示的,然后我就联想到了网站当中经常见到的图片轮播,当小编好久了,没写JS也好久了,干脆写个小函数来实现一下幻灯轮播功能,几行代码的事情,就不管排版和布局了,直接上最简单的函数。

HTML文件:

    <!DOCTYPE HTML>
    <html>
    <head>
    <script src="main.js"></script>
    </head>
    <body>
    <ul>
    <li><a href="1.jpg" onMouseOver="showPic(this);return false;">First pic</a></li>
    <li><a href="2.jpg" onMouseOver="showPic(this);return false;">Second pic</a></li>
    <li><a href="3.jpg" onMouseOver="showPic(this);return false;">Third pic</a></li>
    </ul>
    <hr/>
    <img id="selectPic" src="blank.jpg">
    </body>
    </html>

Javascript文件内容,main.js:

    function showPic(listedPic){
        var selectedPic=getElementById("selectPic");
        var imgSource=listedPic.getAttribute("href");
        selectedPic.setAttribute("src",imgSource);
    }

这样,当你将鼠标放置到有序列表当中各个链接的链接文字,即First picSecond picThird pic这些文字上时,下方id为selectPic的图片将会变为每个链接的href属性所指向的图片,这样就实现了图片的轮播就,当然,这只是一个很简陋的函数,命名也不是很好看,不过能用就行了,用JQuery纵然更加简单,但是要引入几十K大小的库文件,对于这样的小功能来说,得不偿失。

说明一下,HTML文件当中的return false是可以去掉的,在这里并没有什么实际意义,但是如果当你想设计一个点击链接下面的图片才会变化的函数时,这里所有的代码只需要改动一处,即将HTML当中的onMouseOver鼠标悬浮事件改为onClick点击事件即可,而return false也不可缺少。一旦去掉了这个,点击链接将直接跳转到图片,而不是在本页面下方显示href属性所指向的图片。

0
希望看到您的想法,请您发表评论x