HTML+CSS+JS做出图片自动切换效果

HTML+CSS+JS，图片自动切换、鼠标移动触发切换效果（onmouseover获得当前元素id方法）

大学新手一枚，乱七八糟学了好多又忘了好多，以后要慢慢一点点记下来。

================================================================

效果图

文件结构：

素材文件夹里面都是所需的图片
鼠标触碰切换按钮图片，长宽都P成20px（我知道很丑，是随便找的图啦。。）：

切换的图片我是设置了五张，长宽都一样，不放上来了。

index.html:

<div class="center_photo">
	<!-- 要切换的图片 -->
	<img alt="tupian" src="../素材/photo01.jpg" style="height:100%; width:100%" id="img"/>
    <div class="point" style="display:block;">
        <ul>
        <!-- ul、li实现“小圆点” -->
            <li id="p1" onmouseover="point(this)" onmouseout="leave()" >
                <img src="../素材/ok01.png" alt="" id="i1" />
            </li>
            <li id="p2" onmouseover="point(this)" onmouseout="leave()" >
                <img src="../素材/ok02.png" alt="" id="i2" />
            </li>
            <li id="p3" onmouseover="point(this)" onmouseout="leave()" >
                <img src="../素材/ok02.png" alt="" id="i3" />
            </li>
            <li id="p4" onmouseover="point(this)" onmouseout="leave()" >
                <img src="../素材/ok02.png" alt="" id="i4" />
            </li>
            <li id="p5" onmouseover="point(this)" onmouseout="leave()" >
                <img src="../素材/ok02.png" alt="" id="i5" />
            </li>
        </ul>
    </div>
</div>

css.css：

<!-- 可以根据自己需要改变样式，我是全横屏的 -->
.center_photo{
	width:100%;
	margin:0;
	padding:0;
	height::1600px;
	background:#c8d5b9;
	}
.center_photo img{width:100%;height:100%;}
.point{
	height:50px;
	position:relative;
	top:-60px;
	width:240px;
	margin:0 auto;
	left:0px;
	z-index:999;
	text-align:center;
	}
.point ul li{
	width:20px;
	height:20px;
	margin:0 5px;
	float:left;
	list-style:none;
	}
.point ul li img{width:20px;height:20px;}
.point ul li img:hover{cursor:pointer;}

js.js:

var min=1, max=5;
//设置切换的图片
var imgList = new Array();
imgList[0]="../素材/photo01.jpg";
imgList[1]="../素材/photo02.jpg";
imgList[2]="../素材/photo03.jpg";
imgList[3]="../素材/photo04.jpg";
imgList[4]="../素材/photo05.jpg";
//自动变化“小圆点”
var li_imgList = new Array();
li_imgList[0]="i1";
li_imgList[1]="i2";
li_imgList[2]="i3";
li_imgList[3]="i4";
li_imgList[4]="i5";
//鼠标触碰修改（这里感觉重复了，懒得改了。。）
var liList = new Array();
liList[0]="p1";
liList[1]="p2";
liList[2]="p3";
liList[3]="p4";
liList[4]="p5";

//自动循环
var int=self.setInterval("loop()",2000);
function loop(){
	var str=document.getElementById("img").src;
	for(var i=0; i<5; i++){
		if(min==5){
			min=0;
		}
		if(i==min){
			document.getElementById("img").src=imgList[i];
			min++;
			if(i==0){
				document.getElementById(li_imgList[i]).src="../素材/ok01.png";
				document.getElementById(li_imgList[4]).src="../素材/ok02.png";
			}else{
				document.getElementById(li_imgList[i]).src="../素材/ok01.png";
				document.getElementById(li_imgList[i-1]).src="../素材/ok02.png";
			}
			break;
		}
	}
}
//鼠标触碰显示图片+暂停循环显示
var a=3;
function point(obj){
	clearInterval(int);
	//alert(obj.id);
	for(var i=0;i<5;i++){
		if(obj.id==liList[i]){
			document.getElementById("img").src=imgList[i];
			min=i+1;
			document.getElementById(li_imgList[i]).src="../素材/ok01.png";
			for(var a=0;a<5;a++){
				if(a!=i){
					document.getElementById(li_imgList[a]).src="../素材/ok02.png";
				}
			}
		}
	}
}
//鼠标离开继续循环
function leave(){
	int = setInterval("loop()",2000);
}

这里记一下onmouseover情况下获得当前元素id的技巧。

一般我们在元素中这样使用onmouseover
= =》 οnmοuseοver=“function()”
如果要获得当前元素的id，则改为
= =》 οnmοuseοver=“function(this)”
然后在js文件中，比如这样的

function functionTest(obj){
	obj.id;    //这个就是当前元素的id啦
}

综上三个文件结合起来，就搞定啦~

撒花✿✿ヽ(°▽°)ノ✿