使用 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>
效果图
更多专业前端知识，请上 【猿2048】www.mk2048.com
