前端常见面试题

javaScript实现焦点轮播图界面效果(一)

2017-01-11  本文已影响56人  博为峰51Code教研组

在本篇文章中我们主要通过html+css+js实现焦点轮播图的效果,那么什么是焦点轮播图呢,这里我们就用图说话,先来看一下我们要实现的焦点轮播图的效果。

这就是我们要实现的焦点轮播图的效果,主要是想一下5个功能

1.当鼠标移入到图片时,左右两侧的按钮就会出现,点击左侧按钮图片会滚动到上一张图片,点击右侧按钮图片会滚动到下一张图片。

2.随着图片的滚动,底部小圆点也会随着滚动。

3.当选中第几张图片,对应的第几个小圆点就会亮起来,而其他小圆点是灰色的

4.点击指定位置的小圆点,会显示对应的位置图片。

5.当鼠标移出图片,图片会无限滚动。

上一篇下一篇

猜你喜欢

热点阅读