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

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

javaScript实现焦点轮播图界面效果(一)_第1张图片

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

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

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

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

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

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

你可能感兴趣的:(javaScript实现焦点轮播图界面效果(一))