使用?pageSwitch插件? 多種效果

引入? jquery.js 和 pageSwitch.min.js?? <script src="js/jquery-1.11.0.min.js"></script> <script src="dist/pageSwitch.min.js"></script>

　　

在頁面定義標簽 <div id="container"><div class="sections"><div class="section" id="section0"><h3>this is the page1</h3></div> //h3可以自定義名稱 如果不需要可以刪掉<div class="section" id="section1"><h3>this is the page2</h3></div><div class="section" id="section2"><h3>this is the page3</h3></div><div class="section" id="section3"><h3>this is the page4</h3></div></div> </div>

　　

給div加上圖片? 加上css? 可以自定義修改 *{padding: 0;margin: 0;}html,body{height: 100%;}#container {width: 100%;height: 500px;overflow: hidden;}.sections,.section {height:100%;}#container,.sections {position: relative;}.section {background-color: #000;background-size: cover;background-position: 50% 50%;text-align: center;color: white;}#section0 {background-image: url('images/1.jpg');}#section1 {background-image: url('images/2.jpg');}#section2 {background-image: url('images/3.jpg');}#section3 {background-image: url('images/4.jpg');}

?

最后加上一段 javascript <script>$("#container").PageSwitch({direction:'horizontal', // 頁面切換easing:'ease-in', duration:1000, ?//int 頁面過渡時間autoPlay:true, //bool 是否自動播放幻燈 新增loop:'false' //bool 是否循環切換}); </script>

　　

效果圖

?

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的图片循环播放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。