js求思路

JavaScript037

js求思路,第1张

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<h3>机票价格计算器</h3>

<p>月份:<select id="month"></select>

</p>

<p>座位类型:<select id="type">

           <option value="头等舱">头等舱</option>

           <option value="经济舱">经济舱</option>

             </select>

</p>

<p><button id="sub">计算价格</button></p>

<p id='price'></p>

<script>

//4-10旺季,头等9折,经济8折 平时:7,6折 4000元

var str=""

 for(var i=0i<12i++){

  str+="<option value='"+(parseInt(i)+1)+"'>"+(parseInt(i)+1)+"</option>"

 }

 document.querySelector("#month").innerHTML=str

document.querySelector("#sub").onclick=function(){

var month=document.querySelector("#month").value

var type=document.querySelector("#type").value

var price=0

if(month>3&&month<11){

if(type==="头等舱"){price=4000*0.9}else{price=4000*0.8}

}else{

if(type=="头等舱"){price=4000*0.7}else{price=4000*0.6}

}

var text="您选的是"+month+"月份的"+type+",价格是:"+price

document.querySelector("#price").innerHTML=text

}

</script>

</body>

</html>

我们在 CSS 阶段就已经接触到轮播图。通过轮播图我们可以达到一些好玩的特效,但使用 CSS 做出来的轮播图只有左右切换,渐变切换和简单的点击切换。局限性较大,观看效果也不佳。但当我们接触 js 之后,你就发现使用js来实现轮播图后,在看CSS实现轮播的效果就是...。我想说啥你知道的。废话不多说,咱们一起看看如何使用js来实现轮播效果。

(本文以阴阳师中“平安世界”模块的轮播图为例)

这个轮播图,我们通过两大模块构成;左右点击模块和姓名点击模块。然后在两者相关联来达到最终的效果。

在使用js实现轮播图的效果前,先使用HTML和CSS完善这一模块的布局。

本轮播图使用8张图片。每次出现两张。我们在使用HTML和CSS布局时可以先把第一组的两张图片放好位置。其他的放在两边隐藏起来。需要使用的时候在出现移动到中间。

左右点击切换模块:

我们通过对左右按钮进行点击监听。在点击后做出反应。左右点击的思路一样。我们先说一下右边按钮点击事件。

当我们点击右边按钮后,我们通过对点击次数进行累计。此处我使用初始化常量然后累加最后通过判断来达到循环效果

对每一张图片进行编码,以此来达到循环切换图片的效果。在切换图片时,我们可以使用排他思想。当点击按钮切换下一张图片的时候,我们可以先遍历所有的图片,把所有的图片移动到两边,然后将要移动的图片移动到中央来达到切换效果

在移动的过程中的动画和定时器设置的延迟可以自己添加一下。

左边按钮的原理和右边一样反操作即可。注意常量要使用一个。否则两个按钮都只能单方向运动,可能还会出现其他问题。

本次现讲一下左右切换的思路。