图片循环播放

Posted 2020-10-12 我忘不掉

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