专栏首页ZackSockJavaScript快速实现手动轮播

JavaScript快速实现手动轮播

这个实现起来还是非常简单的,实现方法也多种多样。今天给大家介绍一个非常巧妙的方法,利用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,用其它浏览器可能出不来。

本文分享自微信公众号 - ZackSock(AndrewRubin),作者:ZackSock

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java数据结构告诉你如何选用数据集合(2)顺序表

    今天接着上次的内容详细讲,用Java实现一个顺序表。名字就取MyArrayList,有点随便。上次讲了,顺序表的实现是使用数组实现的,那么在编写顺序表的时候就需...

    ZackSock
  • 结构体与指针(一)

    在学习数据结构的时候,会经常使用到结构体。今天分享的内容是结构体与指针,因为结构体和指针本身的内容并不是太多,所以今天的内容还包括了链表的实现。希望可以通过这篇...

    ZackSock
  • Kotlin极简教程(1)数据类型

    因为种种原因,谷歌把Android的第一开发语言改成了Kotlin。虽然近来用Java编写Android是是非常便利的。但是经过多次更新后,Java在Andr...

    ZackSock
  • 【开源游戏/节日】蛋旦很疯狂(新年/元旦专用)

    用户5997198
  • iOS --- 简单的任务绘制复盘

    iOS图形绘制以及文本绘制一直是lz避免触及的地方,不为别的就是感觉这个东西不够对象化,比较零散。但因这次项目中遇到了这么个表达进度而又不是找不到现实UI库的情...

    大话swift
  • JavaScript 图片的上传前预览(兼容所有浏览器)

    功能描述 通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+、Chrome、Firefox)。 实现要点 ● ...

    joshua317
  • 过渡与变形的综合运用

    王凡汎
  • web页面和小程序页面实现瀑布流效果

      2、小程序实现瀑布流,大致流程差不多。只不过小程序的图片的宽高度的获取没有web页面那么方便。

    tandaxia
  • jquery 选中某一行

    Dream城堡
  • golang goquery selector(选择器) 示例大全

    最近研究Go爬虫相关的知识,使用到goquery这个库比较多,尤其是对爬取到的HTML进行选择和查找匹配的内容时,goquery的选择器使用尤其多,而且还有很多...

    飞雪无情

扫码关注云+社区

领取腾讯云代金券