主要思想为：

一：布局HTML部分主要是img图片和两个按钮（next和prev）,

二：js部分主要是利用变量nowIndex来控制src的来源图片是哪一个

先定义各个变量：

var image=document.getElementById("image");
var next=document.getElementById("next");
var prev=document.getElementById("prev");
var nowIndex=1;
var count=5;

然后主要功能实现：

function nn(){
   nowIndex=nowIndex+1>count?1:nowIndex+1;
   image.src="data:image/"+nowIndex+".jpg";
   }
function pp(){
   nowIndex=nowIndex<2?count:nowIndex-1;
   image.src="data:image/"+nowIndex+".jpg";
   }

也可以直接用对象和方法来进行

next.οnclick=function() {
   nowIndex=nowIndex+1>count?1:nowIndex+1;
   image.src="data:image/"+nowIndex+".jpg";
   }

prev.οnclick=function (){
nowIndex=nowIndex<2?count:nowIndex-1;
image.src="data:image/"+nowIndex+".jpg";
}

以下是完整代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手动图片切换</title>
<style type="text/css">
#image{ display:block;
width:500px;
height:180px;
margin:10px auto;

   }
#next{ margin-left:800px;
   }
</style>

</head>

<body>

<img id="image" src="data:image/1.jpg" />
<button id="next" style="size:12px" onClick="nn()">next</button>
<button id="prev" style="size:12px" onClick="pp()">prev</button>
<script language="javascript">
var image=document.getElementById("image");
var next=document.getElementById("next");
var prev=document.getElementById("prev");
var nowIndex=1;
var count=5;
function nn(){

   nowIndex=nowIndex+1>count?1:nowIndex+1;
   image.src="data:image/"+nowIndex+".jpg";
   }
function pp(){

   nowIndex=nowIndex<2?count:nowIndex-1;
   image.src="data:image/"+nowIndex+".jpg";
   }
</script>
</body>
</html>

具体效果如下：

javascript中用三元运算符实现手动图片转换相关推荐

javascript之三元运算符
三元运算符: ?: - 语法:条件表达式?语句1:语句2; - 执行流程: 先对条件表达式求值判断, 如果判断结果为true,则执行语句1,并返回执行结果如果判断结果为false,则执行语句2,并返 ...
html三元运算符模板,JavaScript ——条件 (三元) 运算符介绍
运用条件运算符将你的 if 语句缩短为一行代码由基础开始--if 语句运用条件语句,比如 if,当 if 语句满足的情况下,允许我们执行指定一些代码块比如下面的例子 person 对象包含 na ...
JavaScript: 三目运算符 / 三元运算符的其他使用途径/方法
首先简单介绍一下三目运算符:条件 ? 结果1 : 结果2 当条件结果为true,则输出结果1,反之输出结果2 在我之前的认知及使用经历里,三目运算符基本上都是在方法中用来做判断的,在一些比较简单的场 ...
详解JavaScript三元运算符的使用方法
JavaScript之三元运算符三元条件运算符例子三元条件运算符格式: 表达式1?表达式2:表达式3 说明:如果表达式1为true ,则整个表达式的结果就是表达式2的值,如果表达式false, ...
java三元表达式嵌套_三元运算符的嵌套详解：分别在JSTL、JavaScript和Java中
用来完成简单的选择逻辑,即根据条件判断,从两个选择中选择一种执行. 使用格式: (条件表达式)?表达式1:表达式2: 运算规则:条件表达式值为一个布尔值,当值为true的时候执行表达式1 否 ...
前端研习录（20）——JavaScript三元运算符
前端研习录(20)--JavaScript三元运算符版权声明三元运算符版权声明本文原创作者:清风不渡博客地址:https://blog.csdn.net/WXKKang 重拾前端记忆,记 ...
JavaScript三元运算符
The ternary operator is the only operator in JavaScript that works with 3 operands, and it's a short ...
【学习笔记10】JavaScript三元运算符和比较运算符
一.三元运算符 (一)语法一:直接执行程序 // 通过输入框输入数据var num = Number( window.prompt('请您输入数据') );// if语句if( num % 2 === ...
JavaScript的条件判断语句以及三元运算符
1.简单的if语句 if语句是最简单的常用判断语句 if("条件表达式"){语句块1 }语句快2 2.if-else语句 if-else语句是条件分支语句,如果条件表达式的值为tr ...

javascript中用三元运算符实现手动图片转换

主要思想为：

一：布局HTML部分主要是img图片和两个按钮（next和prev）,

javascript中用三元运算符实现手动图片转换相关推荐

最新文章

热门文章