javascript焦点图（可以自动切换）

最新推荐文章于 2024-06-27 20:30:00 发布

陆康永

最新推荐文章于 2024-06-27 20:30:00 发布

阅读量2.3k

点赞数 2

分类专栏：百度云盘视频教育 javascript基础

本文链接：https://blog.csdn.net/xiaomogg/article/details/25303785

版权

javascript基础同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

百度云盘视频教育

7 篇文章 0 订阅

订阅专栏

思路总结：

1.实现图片滚动的function、鼠标经时候获取当前li的index、设置ndex自动递增的函数、实现淡入淡出效果的函数

2.整个实现效果一传递index为主线

3.我的编写代码过程

---->a.先编写好实现图片切换的函数，这里主要是包含for历遍所以图片并设置display为none和传递index（这里把index赋值给inew）；

---->b.编写鼠标经过时候获取index，这里必须通过历遍和赋值把鼠标经过的index赋值个inew，并传递给可以实现图片切换的函数move（）；

---->c. 编写实现图片淡入淡出的效果函数

---->d.move（）函数的功能实现可以在编写鼠标经过li的事件和编写淡入淡出函数的时候飞开编写进去，这样思路就会顺畅一点

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>

<style>

*{margin:0;padding:0;}

#wrap{
width:500px;height:375px;overflow:hidden;margin:0 auto;
position:relative;;
}
#list{
position:absolute;
bottom:10px;
right:10px;
}
ul{
list-style: none;

}
li{float:left;width:20px;height:20px;margin:1px 1px;
border:1px #333333 dashed;text-align: center;line-height:
20px;background-color:aquamarine;}
.active{background-color:royalblue; }//鼠标经过li的时候，调用的样式
</style>
<script>
window.οnlοad= function ds() {
var im = document.getElementById("box").getElementsByTagName("img");
var list= document.getElementById("list").getElementsByTagName("li");
var timer;
var timers; //这里一共需要两个定时器，一个是针对自动切换图片的，一个是针对实现淡入淡出效果的
var inew=0;
var al=1;
function cgs(){
im[inew].style.filter="alpha(opacity="+al+')';
im[inew].style.opacity=al/100;
if(al<100){
al+=2;
}
}
function move() {
for (var i = 0; i < im.length; i++) {
list[i].className="";/ /这里必须是数组
im[i].style.display = "none";
al=0;
clearInterval(timers);

}
im[inew].style.display = "block";
list[inew].className="active"
timers=setInterval(cgs,10);

}

for (var i = 0; i < list.length; i++) {
list[i].index = i; //这里必须把i赋值给list【i】，以此来获得index；（感觉这样解释不太对，还望给意见）
list[i].onmouseover = function () {
inew = this.index; / /获取鼠标经过时候的index
move();
// this.className = "active"; //也可以在这里调用样式
}

}
timer=setInterval(function(){
inew++;
if(inew>=list.length){
inew=0;
}
move();
}
,2000);

}
</script>
</head>
<body>
<div id="wrap">
<div id="box">
<img src="images/00031.jpg">
<img src="images/00032.jpg">
<img src="images/00033.jpg">
<img src="images/00034.jpg">
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>