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