图片循环播放

mac2025-02-10  10

使用 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
最新回复(0)