美文网首页前端常见面试题
javaScript实现焦点轮播图界面效果(一)

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

作者: 博为峰51Code教研组 | 来源:发表于2017-01-11 19:27 被阅读56次

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

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

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

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

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

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

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

    相关文章

      网友评论

        本文标题:javaScript实现焦点轮播图界面效果(一)

        本文链接:https://www.haomeiwen.com/subject/mgvrbttx.html