图片循环播放

以你之姓@ 2023-06-12 08:36 103阅读 0赞

使用 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.  效果图![1109660-20171101175641295-2105882628.png][]

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[1109660-20171101175641295-2105882628.png]: /images/20230531/53cf0741eec042af82b9455d886bd689.png