图片循环播放

标签：col   his   一段   删掉   switch   duration   使用   效果图   int   

使用 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. 效果图

    

图片循环播放

标签：col   his   一段   删掉   switch   duration   使用   效果图   int   

原文地址：http://www.cnblogs.com/chenlizhi/p/7767716.html