当前位置: 首页 > 文档资料 > iSlider 中文文档 >

Demo 代码

优质
小牛编辑
136浏览
2023-12-01
var list = [
  // picture
  {
    content: './imgs/pic.jpg'
  },
  // HTML String
  {
    content: '<div style="font-size:4em;color:white;text-align: center">HTML String</div>'
  },
  // element
  {
    content: (function () {
      var dom = document.createElement('div');
      dom.innerHTML = 'Element';
      dom.style.cssText = 'font-size:3em;color:rgb(230, 230, 63);';
      return dom;
    })()
  },
  // fragment
  {
    content: (function () {
      var frag = document.createDocumentFragment();
      var img = new Image()
      var dom = document.createElement('div');
      dom.innerHTML = 'Fragment';
      dom.style.cssText = 'font-size:3em;color:rgb(230, 63, 230);';
      frag.appendChild(dom);
      return frag;
    })()
  },
  // dom
  {
    content: document.querySelector('#hidden-space > p')
  },
  // iframe
  {
    content: '' +
    '<div style="padding-top:.2em;font-size:3em;color:rgb(230, 63, 230);position:absolute;top:0;left:0;height:100%;width:100%;z-index:1">' +
    '<span style="padding:.2em;background-color:black;">Iframe</span>' +
    '</div>' +
    '<iframe style="position:relative;z-index:0;height:100%;" src="http://mobile.baidu.com"></iframe>'
  }
];

var S = new iSlider(document.getElementById('iSlider-wrapper'), list, {
  isAutoplay: 1,
  isLooping: 1,
  isOverspread: 1,
  animateTime: 800
});