zoukankan      html  css  js  c++  java
  • 图片循环播放

    使用 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 {
                   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. 效果图
  • 相关阅读:
    用Struts2框架报错:The Struts dispatcher cannot be found
    Struts2.0笔记二
    [转]使用Struts 2防止表单重复提交
    Struts配置文件报错"元素类型为 "package" 的内容必须匹配"
    Java基础知识
    Struts笔记二:栈值的内存区域及标签和拦截器
    [转]迭代器
    Struts笔记一
    账户注册激活邮件及登入和注销
    EL表达式获取对象属性的原理
  • 原文地址:https://www.cnblogs.com/chenlizhi/p/7767716.html
Copyright © 2011-2022 走看看