脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js点击按钮切换图片

利用JS实现点击按钮后图片自动切换的简单方法

 更新时间：2016年10月24日 09:08:49   投稿：jingxian  
下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

我么常常看到一个网站的主界面的图片可以切换自如，那么又是如何实现的呢？

1.HTML页面布局如图所示：

Main（div）

top(div)（显示需要显示的图片）

bottom
UL （li）<选择>left center right

2.实现上述布局

swap.html

<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>在此插入标题</title>
<link rel="stylesheet" type="text/css" href="swap.css"/>
<script type="text/javascript">
<!--
function swap(val){
　　if(val=="left"){
　　　　left.style.display='block';//设置为显示
　　　　center.style.display='none';//设置为隐藏
　　　　right.style.display='none';
　　}else if(val=="center"){
　　　　left.style.display='none';
　　　　center.style.display='block';
　　　　right.style.display='none';
　　}else if(val=="right"){
　　　　left.style.display='none';
　　　　center.style.display='none';
　　　　right.style.display='block';
　　}
　　}
-->
</script>
</head>
<body>
　　<div class="main">
　　<div class="top">
　　<div class="left" id="left"><img src="images/left.jpg"/></div>
　　<div class="center" id="center"><img src="images/center.jpg"/></div>
　　<div class="right" id="right"><img src="images/right.jpg"/></div>
　　</div>
　　<div class="bottom">
　　<ul>
　　<li onmouseover="swap('left')"></li>
　　<li onmouseover="swap('center')"></li>
　　<li onmouseover="swap('right')"></li>
　　</ul>　　
　　</div>
　　</div>
　　</body>
　　</html>

3.css的实现

swap.css

@CHARSET "UTF-8";
.main{
　　width:1320px;
　　height:334px;
　　border:1px solid red;
　　background-color:silver;
}

.top{
　　width:1300px;
　　height:304px;
　　margin-top: 5px;
　　margin-left: 10px;
　　background-color: green;
}

.top .left{
　　display: block;//让left.jpg作为第一张图片显示
}
.top .center{
　　display: none;//初始状态不显示
}
.top .right{
　　display: none;//不显示
}

.bottom{
　　width:1300px;
　　height:15px;
　　margin-top: 5px;
　　margin-left: 10px;
　　background-color: gray;
}
.bottom ul{
　　margin: 0px;
　　margin-left:500px;
　　padding: 0px;
　　width:260px;
　　height:50px; 
}
.bottom ul li{
　　width:80px;
　　height:10px;
　　margin-top:3px;
　　margin-right:3px;
　　background-color:yellow;
　　list-style-type: none;
　　float:left;
}

4.注意的地方

（1）关于display和visibility的区别要清楚。

display:在设置none的时候不仅内容会隐藏，而且元素不会在页面占据位置，隐藏相当于此元素暂时从页面删除了，不对现在页面起任何作用。

visibility：在设置hidden的时候，虽然内容不会显示但是，其元素任然会起作用，相当于只是把要显示的内容用隐藏了，然而东西依然存在。用俗话就是“站着茅坑不xx”;

(2)你是想要点击还是鼠标移动到指定位置图片就会变换？所使用的函数当然不一样，此处是如表移动到指定区域就会实现图片切换，所以使用的是onmouseover()。

以上就是小编为大家带来的利用JS实现点击按钮后图片自动切换的简单方法全部内容了，希望大家多多支持脚本之家~

您可能感兴趣的文章:

相关文章

  • 用方法封装javascript的new操作符(一)

    用方法封装javascript的new操作符(一)

    虽然js是基于对象的，但在很多时候会使用到new这个操作符。
    2010-12-12
  • js H5 canvas投篮小游戏

    js H5 canvas投篮小游戏

    这篇文章主要为大家详细介绍了JavaScript结合H5 canvas实现投篮小游戏的具体代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • js中数组Array的一些常用方法总结

    js中数组Array的一些常用方法总结

    Array()是我们在js中常常写到的代码，今天就总结哈Array的对象具有哪些方法，感兴趣的朋友可以了解下
    2013-08-08
  • Alova.js现代化请求库使用指南

    Alova.js现代化请求库使用指南

    alova.js 是一个基于 Promise 的轻量级 HTTP 请求库,它提供了简单而强大的 API 来处理前端的 HTTP 请求,它的设计目标是简化开发者在前端进行 HTTP 请求的过程,提供更好的开发体验和更高的效率,本文给大家详细介绍了Alova.js现代化请求库的使用,需要的朋友可以参考下
    2025-03-03
  • JavaScript ECMA-262-3 深入解析.第三章.this

    JavaScript ECMA-262-3 深入解析.第三章.this

    在这篇文章里，我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字
    2011-09-09
  • 用js生成a标签下载文件并携带请求头的两种方法

    用js生成a标签下载文件并携带请求头的两种方法

    这篇文章主要给大家介绍了关于用js生成a标签下载文件并携带请求头的两种方法, 这种下载文件方式在前端项目中非常常见,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • 纯JS实现的读取excel文件内容功能示例【支持所有浏览器】

    纯JS实现的读取excel文件内容功能示例【支持所有浏览器】

    这篇文章主要介绍了纯JS实现的读取excel文件内容功能,结合实例形式分析了基于js相关插件进行Excel文件读取的相关操作技巧,需要的朋友可以参考下
    2018-06-06
  • 数组Array的排序sort方法

    数组Array的排序sort方法

    下面小编就为大家带来一篇数组Array的排序sort方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • require导入module.exports 或 exports导出的使用方法

    require导入module.exports 或 exports导出的使用方法

    module.exports用于导出整个模块的内容,可以通过赋值给 module.exports 导出一个对象、函数或值,导出的内容可以被其他模块通过require 导入,本文给大家介绍require导入module.exports 或 exports导出的使用,感兴趣的朋友一起看看吧
    2023-11-11
  • JS 9个Promise面试题

    JS 9个Promise面试题

    这篇文章主要介绍了JS 9个Promise面试题，对异步Promise感兴趣的同学，可以参考下
    2021-05-05

最新评论