js 自动播放——幻灯片效果(移动端) 淡入淡出效果


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0039)http://www.fgm.cc/learn/lesson4/02.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>	
<title>自动播放——幻灯片效果</title>
<style>
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 img{width: 100%;height: 100%;}
#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;}
/*所有width改为100%可兼容移动端*/
</style>
<script type="text/javascript">
	window.onload = function (){
		var oBox = document.getElementById('box');
		var aUl = oBox.getElementsByTagName('ul');
		var aImg = aUl[0].getElementsByTagName("li");
		var aNum = aUl[1].getElementsByTagName("li");
		var timer = play = null;
		var i = index = 0;
	//切换按钮
	for (i = 0; i < aNum.length; i++){
		aNum[i].index = i;
		aNum[i].onmouseover = function(){
			show(this.index)
		}
	}
	//鼠标划过关闭定时器
	oBox.onmouseover = function (){
		clearInterval(play)	
	};	
	//鼠标离开启动自动播放
	oBox.onmouseout = function ()
	{
		autoPlay()
	};		
	//自动播放函数
	function autoPlay (){
	play = setInterval(function (){
			index++;
			index >= aImg.length && (index = 0);
			show(index);		
		},2000);	
	}
	autoPlay();//应用	
	//图片切换, 淡入淡出效果
	function show (a){
		index = a;
		var alpha = 0;
		for (i = 0; i < aNum.length; i++){
			aNum[i].className = "";
			aNum[index].className = "current";
			clearInterval(timer);			
		}
		
		for (i = 0; i < aImg.length; i++){
			aImg[i].style.opacity = 0;
			aImg[i].style.filter = "alpha(opacity=0)";	
		}
		
		timer = setInterval(function(){
			alpha += 2;
			alpha > 100 && (alpha =100);
			aImg[index].style.opacity = alpha / 100;
			aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
			alpha == 100 && clearInterval(timer)
		},20);
	}
};
</script>
</head>
<body>
<div id="box">
    <ul class="list">
        <li class="current" style="opacity: 1;"><img src="./img/01.jpg"></li>
        <li><img src="./img/02.jpg"></li>
        <li><img src="./img/03.jpg"></li>
        <li><img src="./img/04.jpg"></li>
        <li><img src="./img/05.jpg"></li>
    </ul>
    <ul class="count">
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
</body>
</html>



阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a772116804/article/details/80350047
上一篇复选框(checkbox)全选/全不选/返选
下一篇当input type=password 会有小键盘提示
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭