JavaScript快速实现手动轮播
JavaScript快速实现手动轮播
ZackSock
发布于 2020-01-22 13:21:10
发布于 2020-01-22 13:21:10
这个实现起来还是非常简单的，实现方法也多种多样。今天给大家介绍一个非常巧妙的方法，利用JS中的this。
先是HTML代码
<html> <head> <title>JS实现轮播图</title> </head> <style> .item{ float:left; width:100px; }</style> <body> <img id="display" src="img1.jpg" width="1080px"> <div> <div><img class="item" src="img1.jpg" onmouseover="rudy(this)"></div> <div><img class="item" src="img2.jpg" onmouseover="rudy(this)"></div> <div><img class="item" src="img3.jpg" onmouseover="rudy(this)"></div> <div><img class="item" src="img4.jpg" onmouseover="rudy(this)"></div> </div> </body></html>这里就不用解释太多了，提一点。在img中，onmouseover属性中rudy()方法传入了this。在这里this
显示效果如下：
然后是JavaScript部分了，就两句。
function rudy(img){ var display = document.getElementById("display"); display.src = img.src}先找到用来显示图片的元素，然后把显示图片的元素src改成你选择的图片。就有下面的效果了：
哈哈，是不是还可以。如果没学过网页的话也简单。把下面这段文字复制到txt文本中，把txt改成html：
<html> <head> <title>JS实现轮播图</title> </head> <script type="text/javascript"> function rudy(img){ var display = document.getElementById("display"); display.src = img.src }</script> <style> .item{ float:left; width:100px; }</style> <body> <img id="display" src="img2.jpg" width="1080px"> <div> <div><img class="item" src="img1.jpg" onmouseover="rudy(this)"></div> <div><img class="item" src="img2.jpg" onmouseover="rudy(this)"></div> <div><img class="item" src="img3.jpg" onmouseover="rudy(this)"></div> <div><img class="item" src="img4.jpg" onmouseover="rudy(this)"></div> </div> </body></html>然后选择四张你喜欢的图片（为了方便使用jpg的图片）,把名字分别改成img1.jpg、img2.jpg、img3.jpg、img4.jpg。然后图片和html文件都放在桌面就好了。不过我用的是Chrome，用其它浏览器可能出不来。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-09-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读