由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换。

思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很好,弄了一个简单的例子!

首先一般图片上会有两个图片按钮,一个左切换的按钮一个右切换的按钮,当我们单击左切换按钮时,原来的图片就会向右移动XX像素,然后它左边的图片就会显示到框里,而原来的图片被隐藏了,单击右切换按钮的原理跟左按钮相似。但如果一直点同一个按钮的话,本来这个图片切换框只有3张图片的话,到最后一张的时候我们要做一个判断,让它移动回第一张或者最后一张。思路分析完了,下面看下我们的代码:

1、html代码

Android培训,安卓培训,手机开发培训,移动开发培训,云培训培训

<div id="divBox">
    <div id="imgBox">
        <div class="img"><img src="0.jpg"/></div>
        <div class="img"><img src="1.jpg"/></div>
        <div class="img"><img src="3.jpg"/></div>
    </div></div><div id="bth">
    <button id="zou">左</button>
    &
        
		

网友评论