轻松实现JavaScript图片切换

2024-09-27 20:24:40

本文实例为大家介绍JavaScript图片切换的实现方法，分享给大家供大家参考，具体内容如下

效果图：

网页看到非常常见的一个图片切换效果：在淘宝、JD等购物时，介绍产品的图片会有多张，一般是显示一张，底下有一排小图片，鼠标放到小图片上大图片会切换.参考vivo X5M 移动4G手机 .下面记录一下实现的过程.

1. getElementById()

该方法是操作dom非常常用的一个方法，比如有一p标签，id设为pid，通过getElementById(“pid”)就可以对该元素进行操作.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <script type="text/javascript">
    function changeText(){
      document.getElementById("pid").innerHTML
      ="It works!";
    }
  </script>
</head>
<body>
  <p id="pid" onmouseover="changeText()">Hello word!</p>
</body>
</html>

上面代码中在body中写了一个p标签，id为pid，当鼠标放到p标签上方的时候触发onmouseover事件，执行changeText()方法，将p标签内的文档改变.

2. setAttribute()和getAttribute()

getAttribute()方法用于获取某一属性的值，setAttribute()方法用于给某一属性赋值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <script type="text/javascript">
    function changeUrl(){
      var baiduurl=document.getElementById("aid");
      baiduurl.getAttribute("href");
      baiduurl.setAttribute("href",
      "http://www.taobao.com");
      baiduurl.innerHTML="淘宝";
    }
  </script>
</head>
<body>
  <a href="http://www.baidu.com" id="aid" onmouseover="changeUrl()">百度首页</a>
</body>
</html>

上面代码中，body中有一个a标签，通过getElementById()获取a标签，baiduurl.getAttribute(“href”)的值为默认的href属性,通过baiduurl.setAttribute(“href”, “http://www.taobao.com“)设置以后，该属性值改变.完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>on</title>
  <style type="text/css" media="screen">
  *{
     padding: 0;
  }
  body{
     font-family: 微软雅黑;
  }
  #imgbox{
        width: 320px;
        height: 490px;
        padding: 10px;
        box-shadow: 5px;
        border: 1px solid #ccc;
        border-radius: 10px;
      }
 #phoneimg{
       padding: 10px;
       border-color: 1px solid #cccccc;
    }

  </style>

</head>
<body>
   <div id="imgbox">
    <img src="images/phone1.jpg" height="400" width="320" alt="phone" id="phoneimg">
    <p id="decimg">phone image1</p>
   </div>

   <table>
    <tbody>
      <tr>
        <td width="50px">
          <img src="images/phone2.jpg" height="100" width="80" title="phone image2" alt="" onmouseover="changeImg(this)" ></td>
        <td width="50px">
          <img src="images/phone3.jpg" height="100" width="80" title="phone image3" alt=""onmouseover="changeImg(this)" ></td>
        <td width="50px">
          <img src="images/phone4.jpg" height="100" width="80" title="phone image4" alt=""onmouseover="changeImg(this)" ></td>
        <td width="50px">
          <img src="images/phone5.jpg" height="100" width="80" title="phone image5" alt=""onmouseover="changeImg(this)" ></td>

      </tr>
    </tbody>
   </table>

   <script type="text/javascript">
     function changeImg(whichpic){
         var imgattr=whichpic.getAttribute("src");
         var phoneimg=document.getElementById("phoneimg");
         phoneimg.setAttribute("src",imgattr);
         var dectext=whichpic.getAttribute("title");
         document.getElementById("decimg").innerHTML=dectext;
     }
   </script>
</body>
</html>

下一步学习一下怎么实现局部放大，大家有什么好的方法吗？可以一起探讨。

用html+css+js实现的一个简单的图片切换特效

如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下复制代码代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" a
基于javascript实现图片切换效果

本文实例为大家分享了js实现图片切换效果,供大家参考,具体内容如下用js实现点击按钮,图片切换的效果: <div class="box" id="box"> <div class="img_box" id="img_box"> <img src="../raw/b1.jpg" class="image" > <img src="../
灵活使用数组制作图片切换js实现

js活用数组制作图片切换效果,供大家参考,具体内容如下数组元素位置变换: 将内容分割为数组,将第一个加到最后,删掉第一个 <div id="box">1,2,3,4</div> <input type="button" value='切换' id='input'> <script> window.onload=function(){ var oDiv=document.getElementById('box'); v
js实现索引图片切换效果

本文实例讲述了js实现索引图片切换效果的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下 html代码: <div id="slideshowHolder"> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> </div> css代码: .ft-pre
js鼠标点击图片切换效果代码分享

本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea
js带前后翻页的图片切换效果代码分享

本文实例讲述了javascript带前后翻页的图片切换效果.分享给大家供大家参考.具体如下: 这是一款基于javascript带前后翻页的图片切换效果代码,实现过程很简单. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/css.css" rel="stylesheet" type=&qu
javascript图片切换综合实例（循环切换、顺序切换）

本文实例为大家介绍了javascript图片切换的两种方式,循环切换以及顺序切换的实例代码,分享给大家供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <style> p{margin:0;} input{border:none;outline: none;margin:0;padding:0;} img{width:300px;height:300px;} #loop{margin-le
js组件SlotMachine实现图片切换效果制作抽奖系统

前言:前两天在网上找组件,无意中发现了我们儿时游戏机效果的"SlotMachine组件",浏览一遍下来,勾起了小时候满满的回忆. 下面就带着大家来看看这么一个神奇的组件--SlotMachine吧. 一.组件预览先来一发简单的效果压压惊觉得太简单?别急,好戏在后头,试试手气先. 什么?还没达到想要的效果,好!下面,真实效果来一发. 点击了好长时间,都没有中奖,难怪小时候怎么都赢不了呢.不信邪,继续点击开始,终于有一次中奖的了,真心不容易. 还有我们年终抽奖效果,开始!停止! 二.代
最简单的js图片切换效果实现代码

无意中在网上发现的,代码非常的简单,一看就明白! 复制代码代码如下: <script language =javascript > var curIndex=0; //时间间隔单位毫秒 var timeInterval=5000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]
js鼠标点击图片切换效果实现代码

本文实例讲述了js鼠标点击图片切换效果实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: html代码: <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:

轻松实现JavaScript图片切换

相关推荐

随机推荐