用js做一个简单的图片轮播效果。
思路如下:用JavaScript来控制轮播的图片的样式(margin-left)。用计时器来控制图片的自动播放。鼠标点击控制图片的翻页。
效果图如下。具有以下功能:1.自动图片轮播 2.左右切换图片 3.底下小按钮切换图片。
话不多说,代码如下。
首先肯定是HTML代码`这个没什么说的,先插入需要轮播的图片。底下切换图片的按钮,还有左右按键。
<div class="block"><div class="box_big "><div class="box"><img src="img/7.jpg" alt=""/></div><div class="box"><img src="img/5.jpg" alt=""/></div><div class="box"><img src="img/6.jpg" alt=""/></div><div class="box"><img src="img/8.jpg" alt=""/></div><div class="box"><img src="img/9.jpg" alt=""/></div><div class="box"><img src="img/7.jpg" alt=""/></div></div><div class="spot"><div class="spot_list">1</div><div class="spot_list">2</div><div class="spot_list">3</div><div class="spot_list">4</div><div class="spot_list">5</div></div><div class="btn"><div class="left_btn"><span> < </span></div><div class="right_btn"><span> > </span></div></div>
</div>
然后是给代码添加样式。添加好后基本样式就已经完成了。让图片横















