(本文以阴阳师中“平安世界”模块的轮播图为例)
这个轮播图,我们通过两大模块构成;左右点击模块和姓名点击模块。然后在两者相关联来达到最终的效果。
在使用js实现轮播图的效果前,先使用HTML和CSS完善这一模块的布局。
本轮播图使用8张图片。每次出现两张。我们在使用HTML和CSS布局时可以先把第一组的两张图片放好位置。其他的放在两边隐藏起来。需要使用的时候在出现移动到中间。
左右点击切换模块:
我们通过对左右按钮进行点击监听。在点击后做出反应。左右点击的思路一样。我们先说一下右边按钮点击事件。
当我们点击右边按钮后,我们通过对点击次数进行累计。此处我使用初始化常量然后累加最后通过判断来达到循环效果
对每一张图片进行编码,以此来达到循环切换图片的效果。在切换图片时,我们可以使用排他思想。当点击按钮切换下一张图片的时候,我们可以先遍历所有的图片,把所有的图片移动到两边,然后将要移动的图片移动到中央来达到切换效果
在移动的过程中的动画和定时器设置的延迟可以自己添加一下。
左边按钮的原理和右边一样反操作即可。注意常量要使用一个。否则两个按钮都只能单方向运动,可能还会出现其他问题。
本次现讲一下左右切换的思路。
<script>var show = 0
function leftRun(){
show-=100
document.getElementById("b").style.marginLeft = show+"px"
}
function leftRun(){
show+=100
document.getElementById("b").style.marginRight= show+"px"
}
</script>
<div id="a" width="500">
<div id="b" width="1000">
正文内容
</div>
</div>
<input type="button" id="leftRun" onclick="leftRun()" />
<input type="button" id="rightRun" onclick="rightRun()" />