JS实现的幻灯片切换显示效果


Posted in Javascript onSeptember 07, 2016

本文实例讲述了JS实现的幻灯片切换显示效果。分享给大家供大家参考,具体如下:

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯JS幻灯版</title>
<style type="text/css">
*{ margin:0; padding:0;}
#banner {width:1000px;text-align:left; background:#fff; margin:0 auto;}
#banner img{ display:block; float:left;}
.mainbox{ overflow:hidden; position:relative;}
.flashbox{ overflow:hidden; position:relative;}
.imagebox{ text-align:right;position:relative;z-index:999;}
.bitdiv{display:inline-block;width:18px;height:18px;margin:0 10px 10px 0px;cursor:pointer;float:right;}
.defimg{ background:url(styles/images/ppt_icon2.png);}
.curimg{background:url(styles/images/ppt_icon1.png);}
</style>
<script type="text/javascript" src="styles/js/ppt_ban.js"></script>
</head>
<body>
<div id="banner">
  <script>
   var box =new PPTBox();
   box.width = 1000; //宽度
   box.height = 226;//高度
   box.autoplayer = 3;//自动播放间隔时间
   //box.add({"url":"图片地址","title":"悬浮标题","href":"链接地址"})
   box.add({"url":"styles/images/fck_04.jpg","href":"###","title":"悬浮提示标题1"});
   box.add({"url":"styles/images/fck_04.jpg","href":"###","title":"悬浮提示标题1"});
   box.add({"url":"styles/images/fck_04.jpg","href":"###","title":"悬浮提示标题1"});
   box.add({"url":"styles/images/fck_04.jpg","href":"###","title":"悬浮提示标题1"});
   box.show();
  </script>
</div>
</body>
</html>

js:

function PPTBox()
{
  this.uid = PPTBoxHelper.getId();
  PPTBoxHelper.instance[this.uid] = this;
  this._$ = function(id){return document.getElementById(id);};
  this.width = 400;//宽度
  this.height = 300;//高度
  this.picWidth = 15;//小图宽度
  this.picHeight = 12;//小图高度
  this.autoplayer = 4;//自动播放间隔(秒)
  this.target = "_blank";
  this._box = [];
  this._curIndex = 0;
}
PPTBox.prototype =
{
  _createMainBox : function (){
    var flashBoxWidth = this.width * this._box.length;
    var html="<div id='"+this.uid+"_mainbox' class='mainbox' style='width:"+(this.width)+"px;height:"+(this.height)+"px;'>";
    html += "<div id='"+this.uid+"_flashbox' class='flashbox' style='width:"+flashBoxWidth+"px;height:"+(this.height)+"px;'></div>";
    html += "<div id='"+this.uid+"_imagebox' class='imagebox' style='width:"+this.width+"px;height:"+(this.picHeight)+"px;top:-"+(this.picHeight+20)+"px;'></div>";
    html += "</div>";
    document.write(html);
  },
  _init : function (){
    var picstyle= "";
    var eventstr = "PPTBoxHelper.instance['"+this.uid+"']";
    var imageHTML="";
    var flashbox = "";
    for(var i=0;i<this._box.length;i++){
      var parame = this._box[i];
      flashbox += this.flashHTML(parame.url,this.width,this.height,i);
      imageHTML ="<div class='bitdiv "+((i==0)?"curimg":"defimg")+"' title ="+parame.title+" src='bit01.gif' "+picstyle+" onclick = \""+eventstr+".clickPic("+i+")\" onmouseover=\""+eventstr+".mouseoverPic("+i+")\"></div>" + imageHTML;
    }
    this._$(this.uid+"_flashbox").innerHTML = flashbox;
    this._$(this.uid+"_imagebox").innerHTML = imageHTML;
  },
  _play : function(){
    clearInterval(this._autoplay);
    var idx = this._curIndex+1;
    if(idx>=this._box.length){idx=0;}
    this.changeIndex(idx);
    var eventstr = "PPTBoxHelper.instance['"+this.uid+"']._play()";
    this._autoplay = setInterval(eventstr,this.autoplayer*1000);
  },
  flashHTML : function(url,width,height,idx) {
    var isFlash = url.substring(url.lastIndexOf('.')+1).toLowerCase()=="swf";
    var html = "";
    if(isFlash){
      html = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' "
      + "codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0' width='"+width+"' height='"+height+"'>"
      + "<param name=\"movie\" value=\""+url+"\" />"
      + "<param name='quality' value='high' />"
      + "<param name='wmode' value='transparent'>"
      + "<embed src='"+url+"' quality='high' wmode='opaque' pluginspage='http://www.macromedia.com/go/getflashplayer'"
      +" type='application/x-shockwave-flash' width="+width+" height='"+height+"'></embed>"
      +" </object>";
    } else {
      var eventstr = "PPTBoxHelper.instance['"+this.uid+"']";
      var style = "";
      if(this._box[idx].href){
        style = "cursor:pointer"
      }
      html="<img src='"+url+"' style='width:"+width+"px;height:"+height+"px;"+style+"' onclick = \""+eventstr+".clickPic("+idx+")\"/>";
    }
    return html;
  },
  changeIndex : function(idx){
    var parame = this._box[idx];
    moveElement(this.uid+"_flashbox",-(idx*this.width),1);
    var imgs = this._$(this.uid+"_imagebox").getElementsByTagName("div");
    imgs[this._box.length-1-this._curIndex].className = "bitdiv defimg";
    imgs[this._box.length-1-idx].className = "bitdiv curimg";
    this._curIndex = idx;
  },
  mouseoverPic:function(idx){
    this.changeIndex(idx);
    if(this.autoplayer>0){
      clearInterval(this._autoplay);
      var eventstr = "PPTBoxHelper.instance['"+this.uid+"']._play()";
      this._autoplay = setInterval(eventstr,this.autoplayer*1000);
    }
  },
  clickPic:function(idx){
    var parame = this._box[idx];
    if(parame.href&¶me.href!=""){
      window.open(parame.href,this.target);
    }
  },
  add:function (imgParam){
    this._box[this._box.length] = imgParam;
  },
  show : function () {
    this._createMainBox();
    this._init();
    if(this.autoplayer>0){
      var eventstr = "PPTBoxHelper.instance['"+this.uid+"']._play()";
      this._autoplay = setInterval(eventstr,this.autoplayer*1000);
    }
  }
}
var PPTBoxHelper =
{
  count: 0,
  instance: {},
  getId: function() { return '_ppt_box-' + (this.count++); }
};
function moveElement(elementID,final_x,interval) {
 if (!document.getElementById) return false;
 if (!document.getElementById(elementID)) return false;
 var elem = document.getElementById(elementID);
 if (elem.movement) {
  clearTimeout(elem.movement);
 }
 if (!elem.style.left) {
  elem.style.left = "0px";
 }
 var xpos = parseInt(elem.style.left);
 if (xpos == final_x ) {
    return true;
 }
 if (xpos < final_x) {
  var dist = Math.ceil((final_x - xpos)/5);
  xpos = xpos + dist;
 }
 if (xpos > final_x) {
  var dist = Math.ceil((xpos - final_x)/5);
  xpos = xpos - dist;
 }
 elem.style.left = xpos + "px";
 var repeat = "moveElement('"+elementID+"',"+final_x+","+interval+")";
 elem.movement = setTimeout(repeat,interval);
}

效果图如下:

JS实现的幻灯片切换显示效果

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript instanceof 与typeof使用说明
Jan 11 Javascript
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 Javascript
javascript宿主对象之window.navigator详解
Sep 07 #Javascript
Angular 理解module和injector,即依赖注入
Sep 07 #Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 #Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 #Javascript
jQuery实现底部浮动窗口效果
Sep 07 #Javascript
聊一聊Vue.js过渡效果
Sep 07 #Javascript
BootStrap中的表单大全
Sep 07 #Javascript
You might like
PHP中常用数组处理方法实例分析
2008/08/30 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
php多文件上传下载示例分享
2014/02/20 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
Python输出各行命令详解
2018/02/01 Python
python实现PID算法及测试的例子
2019/08/08 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
keras得到每层的系数方式
2020/06/15 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
前台岗位职责范本
2015/04/16 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
java多态注意项小结
2021/10/16 Java/Android
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫