javascript实例：焦点图效果
来源：互联网 发布：影视片头特效制作软件 编辑：程序博客网 时间：2024/05/16 17:38
<!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>无标题文档</title><style type="text/css">body,div,ul,li{margin:0;padding:0;}ul{list-style-type:none;}body{background:#000;text-align:center;font:12px/20px Arial;}#box{position:relative;width:492px;height:172px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;}#box .list{position:relative;width:490px;height:170px;overflow:hidden;border:1px solid #ccc;}#box .list li{position:absolute;top:0;left:0;width:490px;height:170px;opacity:0;filter:alpha(opacity=0);}#box .list li.current{opacity:1;filter:alpha(opacity=100);}#box .count{position:absolute;right:0;bottom:5px;}#box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}#box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}#tmp{width:100px;height:100px;background:red;position:absolute;}</style></head><body><div id="box"> <ul class="list"> <li class="current"><img width="490" height="170" src="01.jpg"></li> <li ><img width="490" height="170" src="02.jpg"></li> <li ><img width="490" height="170" src="03.jpg"></li> <li ><img width="490" height="170" src="04.jpg"></li> <li ><img width="490" height="170" src="05.jpg"></li> </ul> <ul class="count"> <li >1</li> <li >2</li> <li>3</li> <li >4</li> <li >5</li> </ul></div><script type="text/javascript" src="functions.js" ></script><script type="text/javascript">function S() {this.oBox = document.getElementById("box");this.aUl = document.getElementsByTagName("ul");this.aImg = this.aUl[0].getElementsByTagName("li");this.aNum = this.aUl[1].getElementsByTagName("li");this.aNum[0].className = "current";this.timer = this.play = null;this.index = 0;this.init();var _this = this;this.oBox.onmousemove = function() {clearInterval(this.play);}this.oBox.onmouseout = function() {_this.autoPlay();} this.autoPlay();}S.prototype = {init:function() {var _this = this; for(var i = 0;i<this.aNum.length;i++) { this.aNum[i].index = i; this.aNum[i].onclick = function(){_this.show(this.index); _this.index = this.index;}}},autoPlay:function(){var _this = this;clearInterval(this.play); this.play = setInterval(function(){ _this.index++; _this.index >=_this.aImg.length && (_this.index =0); _this.show(_this.index);},2000);},show:function(index) {var __alpha = 0;var _this = this;for(var i=0;i<this.aNum.length;i++){ this.aNum[i].className = ""; this. aImg[i].style.opacity = 0; this.aImg[i].style.filter = "alpha(opacity=0)";}this.aNum[index].className = "current";clearInterval(this.timer); this.timer = setInterval(function () {__alpha += 2;__alpha > 100 && (__alpha =100);_this.aImg[index].style.opacity = __alpha / 100;_this.aImg[index].style.filter = "alpha(opacity = " + __alpha + ")";__alpha == 100 && clearInterval(_this.timer)},20);} };new S();</script></body></html>
