这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript 实现淘宝幻灯片广告展示效果的方法, 以实例形式完整讲述了 javascript 实现幻灯效果的 javascript、CSS 及 html 实现技巧, 需要的朋友可以参考下
本文实例讲述了 javascript 实现淘宝幻灯片广告展示效果的方法。分享给大家供大家参考。具体如下:
一、效果图如下:
二、代码部分:
JS 代码部分:
- function getClass(oParent, name) {
- var arr = [];
- var oBj = oParent.getElementsByTagName("*");
- for (var i = 0; i < oBj.length; i++) {
- if (oBj[i].className == name) {
- arr.push(oBj[i]);
- }
- }
- return arr;
- }
- function startmove(obj, json, fnEnd) {
- var cur = 0;
- clearInterval(obj.timer);
- obj.timer = setInterval(function() {
- var oStop = true;
- for (var attr in json) {
- if (attr == 'opacity') {
- cur = Math.round(parseFloat(getStyle(obj, attr) * 100));
- } else {
- cur = parseInt(getStyle(obj, attr));
- }
- var speed = (json[attr] - cur) / 10;
- speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
- if (cur != json[attr]) {
- oStop = false;
- }
- if (attr == 'opacity') {
- obj.style[attr] = (cur + speed) / 100;
- obj.style.filter = "alpha(opacity:" + cur + speed + ")";
- } else {
- obj.style[attr] = cur + speed + "px";
- }
- }
- if (oStop) {
- clearInterval(obj.timer);
- if (fnEnd) fnEnd();
- }
- },
- 30);
- };
- function getStyle(obj, name) {
- if (obj.currentStyle) {
- return obj.currentStyle[name];
- } else {
- return getComputedStyle(obj, false)[name];
- }
- };
CSS 部分:
- * {
- margin: 0px;
- padding: 0px;
- }
- img {
- border: none;
- width: 470px;
- height: 150px;
- float: left;
- }.pic_body li {
- width: 470px;
- height: 150px;
- float: left;
- z - index: 3001;
- }
- ul {
- list - style: none;
- position: absolute;
- top: 0px;
- left: 0px;
- width: 470px;
- height: 150px;
- background: yellow;
- z - index: 3000;
- }#div1 {
- border: 1px solid black;
- width: 470px;
- height: 150px;
- position: relative;
- margin: 100px auto;
- padding: 0px;
- overflow: hidden;
- }#div1 ol {
- bottom: 10px;
- right: 10px;
- position: absolute;
- z - index: 9999;
- }
- ol li {
- background: yellow;
- float: left;
- display: inline;
- margin - right: 3px;
- padding: 3px 4px;
- position: relative;
- top: 0px;
- left: 0px;
- font - family: arial;
- font - size: 12px;
- cursor: pointer;
- filter: alpha(opacity: 60);
- opacity: 0.6;
- border: 1px solid black;
- }.active {
- background: yellow;
- font - weight: bolder;
- padding: 4px 6px;
- filter: alpha(opacity: 100);
- opacity: 1;
- }
HTML 部分:
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title>
- </title>
- <link href="css.css" rel="stylesheet" type="text/css">
- <script src="myscript.js">
- </script>
- <script>
- window.onload = function() {
- var now = 0;
- var oDiv = document.getElementById('div1');
- var oOl = oDiv.getElementsByTagName('ol')[0];
- var oLi = oOl.getElementsByTagName('li');
- var oUl = getClass(oDiv, 'pic_body')[0];
- for (var i = 0; i < oLi.length; i++) {
- oLi[i].index = i;
- oLi[i].onclick = function() {
- now = this.index;
- tab();
- };
- }
- function tab() {
- for (var i = 0; i < oLi.length; i++) {
- oLi[i].className = '';
- }
- oLi[now].className = 'active';
- startmove(oUl, {
- top: -150 * now
- });
- };
- function next() {
- now++;
- if (now == oLi.length) {
- now = 0;
- }
- tab();
- };
- var timer = setInterval(next, 3000);
- oUl.onmouseover = function() {
- clearInterval(timer);
- };
- oUl.onmouseout = function() {
- timer = setInterval(next, 3000);
- };
- }
- </script>
- </head>
- <body>
- <div id="div1">
- <ol>
- <li class="active">
- 1
- </li>
- <li>
- 2
- </li>
- <li>
- 3
- </li>
- <li>
- 4
- </li>
- <li>
- 5
- </li>
- </ol>
- <ul class="pic_body">
- <li>
- <img src="image/1.jpg">
- </li>
- <li>
- <img src="image/2.jpg">
- </li>
- <li>
- <img src="image/3.jpg">
- </li>
- <li>
- <img src="image/4.jpg">
- </li>
- <li>
- <img src="image/5.jpg">
- </li>
- </ul>
- </div>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0424/271617.html