基本思路

?

?

紅色：為可見區(qū)域

黑色方框：元素，不可見。

通過絕對(duì)定位方式，把黑色方框，移動(dòng)到紅色可見區(qū)別，來實(shí)現(xiàn)圖片切換。

?

?實(shí)例

創(chuàng)建幻燈實(shí)例對(duì)象

<div class="slide"><div class="slide-inner"><div class="item" style="background: #46ca3b">1</div><div class="item" style="background: #2647a0">2</div><div class="item" style="background: lightcoral">3</div><div class="item" style="background: purple">4</div><div class="item" style="background: red">5</div></div><div class="slide-arrows"><div class="next" data-arrows="next"> ></div><div class="prev" data-arrows="prev"> <</div></div><ul class="slide-dot"><li data-dot="0" class="m-active">1</li><li data-dot="1">2</li><li data-dot="2">3</li><li data-dot="3">4</li><li data-dot="4">5</li></ul> </div>

?

<script>'use strict';new Slide({interval: 3000,autoplay: true,outerEle: '.slide',innerEle: '.slide-inner',activeClass: 'm-active',arrowsEle: '.slide-arrows',dotEle: '.slide-dot'}); </script>

源碼：https://pan.baidu.com/s/1-A0GkZ2hOpuVJ5dg1y6mnQ

樣本：http://js.zhuamimi.cn/%E8%BD%AE%E6%92%AD%E5%9B%BE/

轉(zhuǎn)載于:https://www.cnblogs.com/whnba/p/10452487.html

總結(jié)

以上是生活随笔為你收集整理的js 幻灯片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。