JS 纯JS幻灯片

最新推荐文章于 2021-08-18 08:55:00 发布

iteye_17658

最新推荐文章于 2021-08-18 08:55:00 发布

阅读量137

点赞数

分类专栏：境-JS 文章标签： js html 特效 ViewUI

境-JS 专栏收录该内容

197 篇文章 1 订阅

订阅专栏

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>

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+")\"  οnmοuseοver=\""+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&&parame.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);
}

效果图：

iteye_17658

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 纯JS幻灯片

html&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;..
复制链接

扫一扫