<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/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>
<script type="text/javascript">
window.onload=function () {
var ul=getByClass('buttons')[0];
var btns=ul.getElementsByTagName('li');
var scrollContent=getByClass('scrollContent')[0];
for (var i=0;i<btns.length;i++) {
(function (i) {
btns[i].onmouseover=function () {
//scrollContent.style.top=(-i*150)+"px";
var top=parseInt(scrollContent.style.top) || 0;
for (var j=0;j<btns.length;j++) {
btns[j].className="";
}
this.className="hover";
};
})(i);
}
};
function getByClass(className,context) {
context=context || document;
if (context.getElementsByClassName) {
return context.getElementsByClassName(className);
}
var nodes=context.getElementsByTagName('*'),
ret=[];
for (var i=0;i<nodes.length;i++) {
if (hasClass(nodes[i],className)) ret.push(nodes[i]);
}
return ret;
}
function hasClass(node,className) {
var names=node.className.split(/\s+/);
for (var i=0;i<names.length;i++) {
if (names[i]==className) return true;
}
return false;
}
</script>
<style type="text/css">
.scrollContent {
width:470px;
height:750px;
position:absolute;
top:0;
left:0;
}
.scrollFrame {
width:470px;
height:150px;
overflow:hidden;
position:relative;
}
.scrollFrame .buttons {
height:30px;
position:absolute;
right:10px;
top:100px;
}
.scrollFrame .buttons li {
display:block;
width:20px;
height:20px;
border:1px solid orange;
float:left;
margin-right:4px;
text-align:center;
line-height:20px;
cursor:pointer;
color:orange;
background:white;
font-weight:bold;
}
.scrollFrame .buttons li.hover {
width:24px;
height:24px;
line-height:24px;
background:orange;
color:white;
margin-top:-2px;
}
</style>
</head>
<body>
<h1>图片轮播器</h1>
<div class="scrollFrame">
<div class="scrollContent">
<img src="1.jpg" alt="1" />
<img src="2.gif" alt="1" />
<img src="3.gif" alt="1" />
<img src="4.gif" alt="1" />
<img src="5.jpg" alt="1" />
</div>
<ul class="buttons">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
分享到:
相关推荐
实现在页面里动态显示图片,每隔一秒换一张图片
用HTML+Javascript实现点击图片自动播放背景音乐。精巧实用,值得参考!
利用javascript脚本语言实现图片的幻灯播放
javascript 实现图片轮转效果,效果页面可查看当当品牌店铺
javascript实现图片局部放大效果
这是一个完全用JavaScript实现的图片切割效果实例,可以设置全透明、换图片、设置图片大小等。
本代码有图片定时展示功能和光标划过... 本代码采用javascript实现,用的有JQuery,代码也可以更改为完全由javascript纯代码实现,易理解,易修改。 本功能图片直接使用网络,如果有图片没有显示,修改图片路径即可。
主要为大家详细介绍了JavaScript实现tab栏切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
web前端开发们需要很那些效果打交道,早上事情不多,分享一个javascript实现的绚丽图片展示效果,很适合在产品页面中出现. 这个效果主要和mootools结合一起使用的.
javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询...
通过原生JavaScript+Css实现图片滑块效果,通过拖动按钮实现推拉门效果.
javascript,图片连续播放,javascript,图片自动循环播放
javascript实现开门效果
JS实现图片自动播放效果 本文实例为大家分享了JS实现图片自动播放效果的具体代码,供大家参考,具体内容如下 1、先看效果图 2、完整代码 <!DOCTYPE html> <html> <head> <style> /* 定义样式 */ ...
javascript 实现的进度条效果 javascript 实现的进度条效果
DIV+CSS+JAVASCRIPT实现图片滚动效果
用JavaScript实现图片剪切效果,可以实现图片的在线剪裁、修剪等功能。并且可以实现同屏显示。
Javascript实现图片放大和缩小,方便大家使用
JAVASCRIPT 新闻图片自动播放猿代码
使用JavaScript实现的跑马灯效果。跑马灯图片使用自动添加img标签实现,可以添加10张图片,只需修改图片数组的内容,在数组中添加相应图片名称即可。