利用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实现点击按钮后图片自动切换的简单方法全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • JS实现三个层重叠点击互相切换的方法

    JS实现三个层重叠点击互相切换的方法

    本文实例讲述了JS实现三个层重叠点击互相切换的方法.分享给大家供大家参考.具体如下: 该效果实现三个或多个重叠层,按一定规则重叠在一起,当你用鼠标点击任意层的时候,该层被显示在最上部,多个层交替切换,代码简单,同时学习CSS也是不错的参考范例,本例的功能需要JavaScript代码配合. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3ccd-tab-click-cha-style-codes/ 具体代码如下: <html> <h

  • JS实现点击颜色块切换指定区域背景颜色的方法

    本文实例讲述了JS实现点击颜色块切换指定区域背景颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS实现点击颜色块切换指定区域的背景颜色</title> </head> <body> <div align="center"> <table bgcolor=#F8F8F8 border="0" width=&q

  • js鼠标点击图片切换效果实现代码

    js鼠标点击图片切换效果实现代码

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

  • JS实现的按钮点击颜色切换功能示例

    JS实现的按钮点击颜色切换功能示例

    本文实例讲述了JS实现的按钮点击颜色切换功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 点击切换按钮颜色</title> </head> <body> <button id=

  • 简单纯js实现点击切换TAB标签实例

    简单纯js实现点击切换TAB标签实例

    一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果 使用方法: 1.将附件中的index.html中的css样式以及代码部分拷贝到你需要的地方即可 相关链接:几行简单的jQuery代码搞定tab标签切换效果 展示效果图: 效果展示  源码下载 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

  • javascript点击按钮实现隐藏显示切换效果

    javascript点击按钮实现隐藏显示切换效果

    本文实例分享了点击按钮实现隐藏和显示的切换代码,供大家参考,具体内容如下 效果图: 在不少应用中,都有这样的功能,点击同一个按钮可以实现一个元素的显示和隐藏的切换,下面就通过代码实例介绍一下如何实现此效果,代码如下: <html> <head> <meta charset="gb2312"> <title>隐藏和显示</title> <style type="text/css"> #thediv

  • JS实现淡蓝色简洁竖向Tab点击切换效果

    JS实现淡蓝色简洁竖向Tab点击切换效果

    本文实例讲述了JS实现淡蓝色简洁竖向Tab点击切换效果.分享给大家供大家参考.具体如下: 这里介绍一款淡蓝色竖向简洁Tab,选项卡,是很多人都喜欢的一种风格. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-blue-v-tab-cha-style-menu-codes/ 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content=&qu

  • JavaScript实现点击按钮切换网页背景色的方法

    JavaScript实现点击按钮切换网页背景色的方法

    本文实例讲述了JavaScript实现点击按钮切换网页背景色的方法.分享给大家供大家参考,具体如下: 这里演示JavaScript用按钮随意变换背景颜色,每点击一下按钮,就可以随机改变一种网页背景颜色.颜色值事先是保存在JS的数组里,你在代码里会发现他们,若不想要某个颜色,就替换掉即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-btn-click-rand-bgcolor-codes/ 具体代码如下: <!DOCTYPE HTML

  • js实现点击切换TAB标签实例

    js实现点击切换TAB标签实例

    本文实例讲述了js实现点击切换TAB标签.分享给大家供大家参考.具体如下: 这里演示的选项卡效果代码,无jq,纯JS来实现,灰色风格,没有怎么美化,或许看上去比较普通,不过兼容性和操作起来挺舒服的,风格适用于大部分的网站,或许你会用得上. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tab-click-cha-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

  • 简单的实现点击箭头图片切换的js代码

    简单的实现点击箭头图片切换的js代码

    步骤如下: (1) 准备图片(左右箭头,以及一些示例图片) (2) JS(jquery)的代码如下: 复制代码 代码如下: <script type="text/javascript" src="JS/jquery-1.4.4.js"></script> <script type="text/javascript"> var picPath = new Array(); picPath.push("I

  • js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

    js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

    今天来分享一下鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码. 最后的效果如下: Html代码部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <met

随机推荐