javascript实例：焦点图效果

最新推荐文章于 2023-12-04 16:01:51 发布

小烟

最新推荐文章于 2023-12-04 16:01:51 发布

阅读量941

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/ebw123/article/details/8452207

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!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>

小烟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript实例：焦点图效果

无标题文档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;borde
复制链接

扫一扫

专栏目录