原生JS实现图片轮播效果

这篇文章主要为大家详细介绍了原生JS实现图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

之前页面需要图片轮播的时候,都是直接在网上找一个插件,然后自己动手改一下,把图片的路径改成自己图片的路径,然后万事大吉。后来觉得这样并不能提高自己的前端水平,于是乎,自己动手写了一个图片轮播的小demo,用的是jquery,小弟前端小白一个,各位前端大神看了之后,望批评指正。

我的思路是这样的,定义两个变量,一个用来保存当前页码$index,一个用来保存上一页的页码$exdex,首先判断$index和$exdex的大小,如果$index大于$exdex,说明是朝左翻页,反之,就是朝右翻页。如果是朝左翻页,就把当前页朝左偏移100%的宽度,让下一页同样朝左偏移100%宽度。以下是代码部分:

    

以上就是原生JS实现图片轮播效果的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 教程