首页 > 代码库 > JQury自动切换图片----带有小图片，代码一共不超过100行
JQury自动切换图片----带有小图片，代码一共不超过100行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
#img1{
width: 500px;
height: 400px;
}
.titldiv img{
width: 50px;
height: 50px;
}
#titlimg1{
width: 60px;
height: 60px;
}
</style>
<script type="text/javascript">
window.onload=init;
var i=0;//小图片
var n=1; //图片标记数
var dingshi; //让图片动的定时器
function init(){
dingshi=window.setInterval("tupian()",1000);
}
//更换图片
function tupian(){
var obj=document.getElementById("img1");
var titlpic=document.querySelectorAll(".titldiv img");
for(var j=0;j<titlpic.length;j++){
titlpic[j].setAttribute("style","width: 50px;height: 50px;");
}
i++;//小图片切换
n++;
if(n>4){
n=1;
}
if(i>=4){
i=0;
}
obj.src="http://www.mamicode.com/img/yaj_"+n+".png";
titlpic[i].setAttribute("style","width: 60px;height: 60px;");
}
//鼠标放上图片停止
function stoptupian(){
window.clearInterval(dingshi);
}
//鼠标离开图片动起来
function dongqilai(){
dingshi=window.setInterval("tupian()",1000);
}
//当鼠标移到小图片时
function stoptimg(a){
n=a;
i=a-1;
var obj=document.getElementById("img1");
obj.src="http://www.mamicode.com/img/yaj_"+n+".png";
var titlpic=document.querySelectorAll(".titldiv img");
for(var j=0;j<titlpic.length;j++){
titlpic[j].setAttribute("style","width: 50px;height: 50px;");
}
titlpic[i].setAttribute("style","width: 60px;height: 60px;");
window.clearInterval(dingshi);
}
</script>
</head>
<body>
<img src="http://www.mamicode.com/img/yaj_1.png" onm ouseover="stoptupian()" onm ouseout="dongqilai()" id="img1">
<div class="titldiv">
<img src="http://www.mamicode.com/img/yaj_1.png" class="titl" id="titlimg1" onm ouseover="stoptimg(1)" onm ouseout="dongqilai()"/>
<img src="http://www.mamicode.com/img/yaj_2.png" onm ouseover="stoptimg(2)" onm ouseout="dongqilai()"/>
<img src="http://www.mamicode.com/img/yaj_3.png" onm ouseover="stoptimg(3)" onm ouseout="dongqilai()""/>
<img src="http://www.mamicode.com/img/yaj_4.png" onm ouseover="stoptimg(4)" onm ouseout="dongqilai()"/>
</div>
</body>
</html>
JQury自动切换图片----带有小图片，代码一共不超过100行