圖片循環播放
阿新 • • 發佈:2017-11-01
eas class ase 引入 false scrip ima body cti
使用 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>
- 效果圖
圖片循環播放