JS实现简易图片轮播效果的方法
作者:新凉 发布时间:2023-07-21 08:19:16
标签:JS,图片,轮播
本文实例讲述了JS实现简易图片轮播效果的方法。分享给大家供大家参考。具体如下:
这里使用JS制作简易图片轮播效果:
制作比较粗糙,使用的图片是width:660ppx,height:550px;
效果图如下:
代码部分如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS幻灯代码</title>
<script type="text/javascript">
window.onload = function () {
flag = 0;
obj1 = document.getElementById("slider");
obj2 = document.getElementsByTagName("li");
obj2[0].style.backgroundColor = "#666666";
//默认被选中颜色
time = setInterval("turn();", 5000);
obj1.onmouseover = function () {
clearInterval(time);
}
obj1.onmouseout = function () {
time = setInterval("turn();", 6000);
}
for (var num = 0; num < obj2.length; num++) {
obj2[num].onmouseover = function () {
turn(this.innerHTML);
clearInterval(time);
}
obj2[num].onmouseout = function () {
time = setInterval("turn();", 6000);
}
}
//延迟加载图片,演示的时候,使用本地图片
//上线后请改为二级域名提供的图片地址
document.getElementById("second").src = "images/2.png";
//使用图片宽660,高550
document.getElementById("third").src = "images/3.png";
document.getElementById("four").src = "images/4.png";
}
function turn(value) {
if (value != null) {
flag = value - 2;
}
if (flag < obj2.length - 1)
flag++;
else
flag = 0;
obj1.style.top = flag * (-550) + "px";
for (var j = 0; j < obj2.length; j++) {
obj2[j].style.backgroundColor = "#ffffff";
}
obj2[flag].style.backgroundColor = "#666666";
}
</script>
<style type="text/css">
#wrap
{
height: 550px;
width: 660px;
overflow: hidden;
position: relative;
overflow: hidden;
}
#wrap ul
{
list-style: none;
position: absolute;
top: 500px;
left: 450px;
}
#wrap li
{
margin-left:2px;
opacity: .3;
filter: alpha(opacity=30);
text-align: center;
line-height: 30px;
font-size: 20px;
height: 30px;
width: 30px;
background-color: #fff;
float: left;
border-radius:3px;
cursor:pointer;
}
#slider
{
position: absolute;
top: 0px;
left: 0px;
}
#slider img
{
float: left;
border: none;
}
</style>
</head>
<body>
<div id="wrap">
<div id="slider">
<a target="_blank" href="#"><img src="images/1.png" /></a>
<a target="_blank" href="#"><img id="second" /></a>
<a target="_blank" href="#"><img id="third" /></a>
<a target="_blank" href="#"><img id="four" /></a>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
0
投稿
猜你喜欢
- 即使页面上只有一个元素它也是一个矩形的盒模型。其大小、位置、行为都可以通过CSS来控制。这里的行为是指当盒模型内部以及周围的内容发生变化时的
- 我们可用正规表达式来寻找并替换URL和邮件地址为活动的超级链接。用到的主要函数就是InsertHyperlinks(inText),语法为:
- 我们经常使用动态创建 JavaScript 的方式来实现 JavaScript 文件的无阻塞(Non-blocking)、并行下载(Para
- 对url进行编码在服务器端我们可以使用asp中的server.urlencode,很方便实现。如:<% ss="asp之家欢
- 最近论坛里总有人问幻灯片怎么从数据库里取数据,花了几分钟简单的写了下。用到的人可以自己在细化<%dim rs,sqlset&
- 流行的 JavaScript 库有jQuery,MooTools,Prototype,Dojo和YUI等,这些 JavaScript 库功能
- 栅格就是你对页面版式的规划你日常所见的许多页面都有栅格存在。你可能注意不到,但它确实存在,并且支撑着设计内容,建立整体的架构,引导着页面的元
- 前言今天的文章比较基础,但却是必须掌握的,而且本文有些内容,也许你之前没想过。希望这篇文章能够让你理解环境变量并掌握 Go 环境变量相关操作
- 在产品开发中,由UED发起的项目越来越多,但是现在的问题是很难为其设定商业价值的目标。如果没有明确的商业价值目标,很多公司根本没办法花大成本
- match()方法用于从字符串中查找指定的值本方法类似于indexOf()和lastindexOf(),不同的是它返回的是指定的值,而不是指
- 很久没有更新blog了,这段时间实在是发生了很多的事,累身累心。但还是有很多想做的事,比如更新merceCSS、把一直以来所总结的有关模块化
- 解释器模式(Interpreter Pattern)是什么解释器模式是一种行为型模式,它定义了一种语言文法,并且定义了一个解释器,用来解释这
- aspImage是ServerObjects站点上非常好的一个组件,它可以使我们利用Asp实现很多对于图形的处理功能,他的功能强大,如果你需
- 返回页面的类容,weburl为页面urlFunction GetBytes(weburl) '创建
- 最近在工作中涉及到判断服务器所在ip反馈程序使用情况的程序主要要求就是,本机或局域网调试程序时,不反馈其域名(localhost)或ip站长
- 这个仿msn的右下角popup提示窗口效果很久以前收集的,现在整理出来给大家分享,需要的朋友可以拿去用,特点,提示窗口内容和js代码分离容易
- 当你碰到下面的asp错误提示时,说明你asp运行脚本超时了! Active Serv
- 这个程序将记数器的数字放在ACCESS数据库中,当然你也能用你希望其它的ODBC数据源.这个程序从URL中读取记数信息.如下:< IM
- 不论你做什么样的设计,色彩都是一个不容忽视的问题。色彩以一种“隐蔽”的方式传达的各种信息,这些信息会影响观看者的心理和感受,左右他们的判断和
- 题目:一个六位数,分别用2,3,4,5,6乘它,得到的五个新数仍是由原数中的六个数字组成,只是位置不同,则此六位数是多少?function