使用JS实现点击button按钮切换图片具体代码

3403771864 发布于2022-10-24 22:11 / 862人阅读

　　不废话，直奔主题，使用JS实现点击button按钮切换图片，实现效果如图：

　　很容易实现吧，这个是用Dreamweaver写的，现在我们就用JS的一个入门案列。

　　其实很多时候想法与实际有差距。我们先做了一个简单的图片切换。

　　body部分：

　　<body>
　　<h1>JS实现图片的切换</h1>
　　<div class="container">
　　<div class="one">
　　<div class="one-left">
　　<button id="pre"><b><</b></button>
　　</div>
　　<div class="one-center">
　　<ul>
　　<li style="display:none" id="a"><img src="images/1.jpg" width="600" height="300"></li>
　　<li style="display:none" id="b"><img src="images/2.jpg" width="600" height="300"></li>
　　<li style="display:none" id="c"><img src="images/3.jpg" width="600" height="300"></li>
　　<li style="display:block" id="d"><img src="images/4.jpg" width="600" height="300"></li>
　　</ul>
　　</div>
　　<div class="one-right">
　　<button id="next"><b>></b></button>
　　</div>
　　</div>
　　</div>
　　</body>

　　JS部分：

　　<script language="javascript">
　　var a=document.getElementById("a");
　　var b=document.getElementById("b");
　　var c=document.getElementById("c");
　　var d=document.getElementById("d");
　　var b1=document.getElementById("pre");
　　var b2=document.getElementById("next");
　　var num=4;
　　b1.onclick=function(){
　　num--;
　　if(num<1)
　　num=4;
　　panduan();
　　}
　　b2.onclick=function(){
　　num++;
　　if(num>4)
　　num=1;
　　panduan();
　　}
　　function panduan(){
　　if(num==1){
　　a.style.display="block";
　　b.style.display="none";
　　c.style.display="none";
　　d.style.display="none";
　　}
　　if(num==2){
　　a.style.display="none";
　　b.style.display="block";
　　c.style.display="none";
　　d.style.display="none";
　　}
　　if(num==3){
　　a.style.display="none";
　　b.style.display="none";
　　c.style.display="block";
　　d.style.display="none";
　　}
　　if(num==4){
　　a.style.display="none";
　　b.style.display="none";
　　c.style.display="none";
　　d.style.display="block";
　　}
　　}
　　</script>

　　CSS部分：

　　*{
　　margin:0;
　　padding:0;
　　}
　　h1{
　　text-align:center;
　　}
　　li{
　　list-style:none;
　　float:left;
　　}
　　.container{
　　width:1000px;
　　height:1000px;
　　margin:0 auto;
　　}
　　.one{
　　width:700px;
　　height:400px;
　　margin:100px auto;
　　}
　　.one-center{
　　width:600px;
　　height:300px;
　　float:left;
　　}
　　.one-left{
　　width:50px;
　　height:300px;
　　float:left;
　　}
　　.one-right{
　　width:50px;
　　height:300px;
　　float:right;
　　}
　　button{
　　width:50px;
　　height:300px;
　　background-color:#999;
　　border:none;
　　outline:none;
　　}
　　button:hover{
　　background-color:#666;
　　}

　　总结上面有两个关键词:一是如何隐藏图片，二是button按钮点击和样式。

1.图片的隐藏，说实话，最初想用hidden来实现图片的隐藏，设置hidden属性的真假值来实现，可发现只要给某个标签设置hidden，但这个标签没显示，其实当时也不知道通过JS删除和添加hidden属性，只是稍稍做修改style.display="none"和style.display="inline"来实现隐藏和显示。style.display="none"会隐藏该标签，而且隐藏后该标签不占位。后来我又查找发现可以通过a.style.visibility="hidden";和a.style.visibility="visible";来实现隐藏和显示，a.style.visibility="hidden";方法隐藏了该标签，但是该标签还是会占位。

2.第二个就是button属性，主要的问题时button样式的问题，如何才能做一个好看的button，通过查找找到了设置button相关的值。

border:none; 设置按钮无边框

outline:none;消除按钮点击后出现的表示被点击的边框

background：url(...)按钮背景图片

text-shadow: 0 1px 1px rgba(0,0,0,.3);文字阴影

box-shadow: 0 5px 7px rgba(0,0,0,.2);按钮阴影

border-radius:15px;按钮边框圆角

好吧，都说完了，现在就是看看实际效果。

云服务器 GPU云服务器 js实现按钮点击 js代码图片自动切换点击查看图片js代码 php点击图片切换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128204.html

授人以渔式解析原生JS写轮播图

摘要：鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来，鼠标移开时左右箭头隐藏掉并且自动轮播。核心原理清除定时器，绑定事件，重构下代码封装出往右往左轮播函数和自动轮播函数。需求与分析需求：循环无缝自动轮播五张图，按左右箭头可以手动切换图片，鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来，...

Zack 2019-08-29 16:58 评论0 收藏0
授人以渔式解析原生JS写轮播图

摘要：鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来，鼠标移开时左右箭头隐藏掉并且自动轮播。核心原理清除定时器，绑定事件，重构下代码封装出往右往左轮播函数和自动轮播函数。需求与分析需求：循环无缝自动轮播五张图，按左右箭头可以手动切换图片，鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来，...

SKYZACK 2019-08-02 11:42 评论0 收藏0
授人以渔式解析原生JS写轮播图

摘要：鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来，鼠标移开时左右箭头隐藏掉并且自动轮播。核心原理清除定时器，绑定事件，重构下代码封装出往右往左轮播函数和自动轮播函数。需求与分析需求：循环无缝自动轮播五张图，按左右箭头可以手动切换图片，鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来，...

Pink 2019-08-23 12:22 评论0 收藏0
用 jQuery 做个轮播

摘要：初次体验之后，体验一下强大之处，做一个简单的轮播，实现图片切换。点击按钮切换轮播页面上面有三个标签用两个便签包裹好，是用来布局的，一般不在布局的标签上面做任何操作，是用来做轮播窗口的。是一个整数，指示元素的位置，以为基数。初次体验jQuery 之后，体验一下jQuery强大之处，做一个简单的轮播，实现图片切换。点击按钮切换轮播页面上面有三个img标签用两个div便签包裹好，cla...

cheukyin 2019-08-22 17:22 评论0 收藏0
360前端星学习笔记-如何写‘好’JavaScript

摘要：前言如何写好这门课是由技术专家月影老师讲的。控制流设计原则为什么要用到事件机制呢因为要降低结构之间的耦合度，如果不这样做的话，我们需要做双向的操控的。前言《如何写‘好’javascript》这门课是由360技术专家月影老师讲的。这堂课的ppt 说实话，我一直在纠结要不要写关于js的文章，因为对于js来说，我的实际经验不足，更不要说面向对象编程与函数式编程了，对于过程抽象与行为抽象...

arashicage 2019-08-26 12:01 评论0 收藏0