圖片循環播放

使用 pageSwitch插件  多種效果

1. 引入  jquery.js 和 pageSwitch.min.js  

   <script src="js/jquery-1.11.0.min.js"></script>
   <script src="dist/pageSwitch.min.js"></script>
   

   　　

2. 在頁面定義標籤

   <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>
   

   　　

3. 給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');
       }

    

4. 最後加上一段 javascript

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

   　　

5. 效果圖

    

 

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