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 相关文章推荐
jQuery AJAX回调函数this指向问题
Feb 08 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
分页栏的web标准实现
Nov 01 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
原生js开发的日历插件
Feb 04 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 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
preg_match_all使用心得分享
2014/01/31 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
PHP中文编码小技巧
2014/12/25 PHP
PHP生成树的方法
2015/07/28 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
Python多线程编程(五):死锁的形成
2015/04/05 Python
python中sys.argv参数用法实例分析
2015/05/20 Python
Python 详解基本语法_函数_返回值
2017/01/22 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
详解python中sort排序使用
2019/03/23 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
python爬虫用mongodb的理由
2020/07/28 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
演讲稿开场白
2014/01/13 职场文书
人事助理自荐信
2014/02/02 职场文书
质量管理标语
2014/06/12 职场文书
运动会广播稿100字
2014/09/14 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python