javaScript实现图片轮播

最新推荐文章于 2024-06-17 15:29:34 发布

回_憶

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量872

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/angjunqiang/article/details/41489143

版权

JavaScript 专栏收录该内容

18 篇文章 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>JavaScript(幻灯片上下滑动效果)</title>

<script>
window.οnlοad=function ()
{
	var oDiv =document.getElementById('play');
	var aBtn=document.getElementsByTagName('ol')[0].getElementsByTagName('li');
	var oUl=document.getElementsByTagName('ul')[0];
	var now=0;
	for(var i=0;i<aBtn.length;i++){
        aBtn[i].index=i;
        aBtn[i].οnclick=function(){
            now=this.index;
            tab();
        };
	}
	function tab(){
        for(var i=0;i<aBtn.length;i++){
             aBtn[i].className='';
        }     
        aBtn[now].className='active';
        oUl.style.top=-150*now+'px';
	};
	var timerId;
	timerId=setInterval(function(){
			if(now<aBtn.length-1){
				now++;
				oUl.style.top=-150*now+'px';
		 		for(var i=0;i<aBtn.length;i++){
            		 aBtn[i].className='';
        		}     
        		aBtn[now].className='active';
			}else{
                now=-1;
			}
	  },2000);
	oUl.οnmοuseοver=function(){
        clearInterval(timerId);
	}
	oUl.οnmοuseοut=function(){
       timerId=setInterval(function(){
       		if(now<aBtn.length-1){
				now++;
				oUl.style.top=-150*now+'px';
		 		for(var i=0;i<aBtn.length;i++){
            		 aBtn[i].className='';
        		}     
        		aBtn[now].className='active';
			}else{
                now=-1;
			}
       },2000)
	}
};
</script>
</head>
<body>
<div class="play" id="play">
    <ol>
    	<li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
	<ul>
		<li><a href="javascript:;"><img src="./images/tupianrun/1.jpg" alt="广告一" /></a></li>
		<li><a href="javascript:;"><img src="./images/tupianrun/2.jpg" alt="广告二" /></a></li>
		<li><a href="javascript:;"><img src="./images/tupianrun/3.jpg" alt="广告三" /></a></li>
		<li><a href="javascript:;"><img src="./images/tupianrun/4.jpg" alt="广告四" /></a></li>
		<li><a href="javascript:;"><img src="./images/tupianrun/5.jpg" alt="广告五" /></a></li>
	</ul>
</div>
</body>
<style type="text/css">
*{margin: 0;padding: 0}
li{list-style: none;}
img{border: none;}
body{background: #ecfaff;}	

.play{width: 470px;height: 150px;overflow: hidden;position: relative;margin: 150px auto 0;}
.play .text{width: 100%;height: 60px;position: absolute;left: 0px;bottom: 0px;}
.play .text div{position: absolute;left: 0;top: 0px;height: 100%;width: 100%;background: black;filter:alpha(opacity:40);opacity: 0.4;z-index: 99;}
.play .text span {position:absolute; left:0; top:0; width:100%; height:100%; line-height:60px; color:white; z-index:999; text-align:center; font-size:20px;}

ol{position: absolute;right: 5px;bottom: 5px;z-index: 9999;}
ol li{float: left;margin-right: 3px;display: inline;cursor: pointer;background: #fcf2cf;border: 1px solid #f47500;padding: 2px 6px;color:#d94b01; font-family: arial;font-size: 12px;}
.active{padding: 3px 8px;font-weight: bold;color: #ffffff;background:#ffb442 ;position: relative;bottom: 2px;}

ul{position: absolute;top: 0;left: 0; z-index: 1;}
ul li { width: 470px; height: 150px; float: left; }
ul img { float: left; width: 470px; height: 150px;}
</style>
</html>

实现的效果如图：

回_憶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript实现图片轮播

JavaScript(幻灯片上下滑动效果)window.onload=function (){ var oDiv =document.getElementById('play'); var aBtn=document.getElementsByTagName('ol')[0].getElementsByTagName('li'); var oUl=document.getElemen
复制链接

扫一扫

专栏目录