JS实现FLASH幻灯片图片切换效果的方法
更新时间：2015年03月04日 10:03:50 作者：代码家园
这篇文章主要介绍了JS实现FLASH幻灯片图片切换效果的方法,实例分析了javascript操作图片实现Flash幻灯效果的技巧,需要的朋友可以参考下
本文实例讲述了JS实现FLASH幻灯片图片切换效果的方法。分享给大家供大家参考。具体实现方法如下：
复制代码 代码如下:
<!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" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta name="author" content="RainoXu" />
<title>JS模拟FLASH幻灯片图片切换效果</title>
</head>
<body>
<style type ="text/css">
/* <![CDATA[ */
ul,li{
padding:0;
margin:0;
list-style:none;
}
#flashBox{
width:326px;
height:246px;
border:1px solid #EEE;
position:relative;
}
#flashBox img{
/*初始不要显示*/
display:none;
/*用边框来实现空位，因为margin和paading有时会引起些麻烦*/
border:3px solid #FFF;
}
#flashBox ul{
position:absolute;
right:7px;
bottom:9px;
font:9px tahoma;
}
#flashBox ul li{
display:block;
float:left;
width:12px;
height:12px;
line-height:12px;
margin-right:3px;
border:1px solid #999;
background:#F0F0F0;
text-align:center;
cursor:pointer;
}
#flashBox ul li.hover{
border-color:red;
background:#FFE1E1;
color:red;
}
/* ]]> */
</style>
<script type="text/javascript">
function flashBoxCtrl(o){
this.obj=document.getElementById(o);
//这个私有方法虽然写了，但暂时没用到
function addListener(ele,eventName,functionBody){
if (ele.attachEvent){
ele.attachEvent("on"+eventName, functionBody);
}else if (ele.addEventListener){
ele.addEventListener("on"+eventName,functionBody, false);
}else{
return false;
}
}
//初始化
this.init=function(){
var objImg=this.obj.getElementsByTagName("img");
var tagLength=objImg.length;
if (tagLength>0){
var oUl=document.createElement("ul");
oUl.setAttribute("id",o+"numTag");
for (var i=0;i<tagLength;i++){
var oLi=oUl.appendChild(document.createElement("li"));
if (i==0){
oLi.setAttribute("class","hover"); //初始化时把第一个设置为高亮
oLi.setAttribute("className","hover");
}
//设置标签的数字
oLi.appendChild(document.createTextNode((i+1)));
}
this.obj.appendChild(oUl);
objImg[0].style.display="block";
//设置标签事件
var oTag=this.obj.getElementsByTagName("li");
for (var i=0;i<oTag.length;i++){
oTag[i].onmouseover=function(){
for (j=0;j<oTag.length;j++){
oTag[j].className="";
objImg[j].style.display="none";
}
this.className="hover";
objImg[this.innerHTML-1].style.display="block";
}
}
}
};
//自动滚动的方法还没写
this.imgRoll=function(){};
//生成对象时自动加载init()方法以初始化对象
this.init();
}
</script>
<div id="flashBox">
<img src="/images/m02.jpg" />
<img src="/images/m03.jpg" />
<img src="/images/m04.jpg" />
<img src="/images/m09.jpg" />
</div>
<script type="text/javascript">
//生成一个对象
new flashBoxCtrl("flashBox");
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta name="author" content="RainoXu" />
<title>JS模拟FLASH幻灯片图片切换效果</title>
</head>
<body>
<style type ="text/css">
/* <![CDATA[ */
ul,li{
padding:0;
margin:0;
list-style:none;
}
#flashBox{
width:326px;
height:246px;
border:1px solid #EEE;
position:relative;
}
#flashBox img{
/*初始不要显示*/
display:none;
/*用边框来实现空位，因为margin和paading有时会引起些麻烦*/
border:3px solid #FFF;
}
#flashBox ul{
position:absolute;
right:7px;
bottom:9px;
font:9px tahoma;
}
#flashBox ul li{
display:block;
float:left;
width:12px;
height:12px;
line-height:12px;
margin-right:3px;
border:1px solid #999;
background:#F0F0F0;
text-align:center;
cursor:pointer;
}
#flashBox ul li.hover{
border-color:red;
background:#FFE1E1;
color:red;
}
/* ]]> */
</style>
<script type="text/javascript">
function flashBoxCtrl(o){
this.obj=document.getElementById(o);
//这个私有方法虽然写了，但暂时没用到
function addListener(ele,eventName,functionBody){
if (ele.attachEvent){
ele.attachEvent("on"+eventName, functionBody);
}else if (ele.addEventListener){
ele.addEventListener("on"+eventName,functionBody, false);
}else{
return false;
}
}
//初始化
this.init=function(){
var objImg=this.obj.getElementsByTagName("img");
var tagLength=objImg.length;
if (tagLength>0){
var oUl=document.createElement("ul");
oUl.setAttribute("id",o+"numTag");
for (var i=0;i<tagLength;i++){
var oLi=oUl.appendChild(document.createElement("li"));
if (i==0){
oLi.setAttribute("class","hover"); //初始化时把第一个设置为高亮
oLi.setAttribute("className","hover");
}
//设置标签的数字
oLi.appendChild(document.createTextNode((i+1)));
}
this.obj.appendChild(oUl);
objImg[0].style.display="block";
//设置标签事件
var oTag=this.obj.getElementsByTagName("li");
for (var i=0;i<oTag.length;i++){
oTag[i].onmouseover=function(){
for (j=0;j<oTag.length;j++){
oTag[j].className="";
objImg[j].style.display="none";
}
this.className="hover";
objImg[this.innerHTML-1].style.display="block";
}
}
}
};
//自动滚动的方法还没写
this.imgRoll=function(){};
//生成对象时自动加载init()方法以初始化对象
this.init();
}
</script>
<div id="flashBox">
<img src="/images/m02.jpg" />
<img src="/images/m03.jpg" />
<img src="/images/m04.jpg" />
<img src="/images/m09.jpg" />
</div>
<script type="text/javascript">
//生成一个对象
new flashBoxCtrl("flashBox");
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
tabBar如果应用是一个多tab应用,可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页,下面这篇文章主要给大家介绍了关于uniapp小程序配置tabbar底部导航栏的相关资料,需要的朋友可以参考下2022-09-09
Tab 选项卡切换效果在现如今的网页中，运用的也是比较多的，包括点击切换、滑动切换、延迟切换、自动切换等多种效果，在这篇博文里，我们是通过原生 JavaScript 来实现 Tab 点击切换的效果。2017-03-03
有了泛型之后一个函数或容器类能处理的类型一下子扩到了无限大,似乎有点失控的感觉,所以这里又产生了一个约束的概念,下面这篇文章主要给大家介绍了关于TypeScript泛型约束条件的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了JS回调函数简单用法,结合实例形式分析了js回调函数的定义与简单使用方法,具有一定参考借鉴价值,需要的朋友可以参考下2017-02-02
前端学习笔记style，currentStyle，getComputedStyle的用法与区别
这篇文章主要介绍了前端学习笔记style，currentStyle，getComputedStyle的用法与区别,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了JS求1到任意数之间的所有质数，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
这篇文章主要给大家介绍了关于利用jsonp解决js读取本地json跨域的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
这篇文章主要介绍了封装微信小程序http拦截器过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
很多情况下是用innerHTML或innerText,现在比较流行直接的dom操作，大家可以根据需要选择。2010-05-05
这篇文章主要为大家详细介绍了Bootstrap图片轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
最新评论