这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 实现的幻灯片切换显示效果, 涉及 javascript 通过扩展实现针对页面元素的动态切换操作相关技巧, 需要的朋友可以参考下
本文实例讲述了 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);
- }
效果图如下:
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0712/332033.html