实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0px;padding:0px;}
#left{position:fixed;left:60px;top:120px;width:30px;height:30px;}
#right{position:fixed;left:370px;top:120px;width:30px;height:30px;}
.div1{width:30px;height:30px;position:fixed;left:100px;top:250px;background:pink;border-radius:30px;text-align:center;line-height:30px;}
</style>
</head>
<body>
<div id="left" onclick="func('-')">
<img src="./images/left.png" alt="" width="100%">
</div>
<img src="./images/11.jpg" alt="" name="list" style="display:block;">
<img src="./images/22.jpg" alt="" name="list" style="display:none">
<img src="./images/33.jpg" alt="" name="list" style="display:none">
<img src="./images/44.jpg" alt="" name="list" style="display:none">
<img src="./images/55.jpg" alt="" name="list" style="display:none">
<div id="right" onclick="func('+')">
<img src="./images/right.png" alt="" width="100%">
</div>
<div name="list1" onmouseover="demo(0)" onmouseout="demo1(0)" style="background-color:yellow"></div>
<div name="list1" onmouseover="demo(1)" onmouseout="demo1(1)"></div>
<div name="list1" onmouseover="demo(2)" onmouseout="demo1(2)"></div>
<div name="list1" onmouseover="demo(3)" onmouseout="demo1(3)"></div>
<div name="list1" onmouseover="demo(4)" onmouseout="demo1(4)"></div>
</body>
<script>
//通过name属性来获取对象
//lists控制图片
var lists = document.getElementsByName('list');
//console.log(lists);
//list1控制数字
var list1 = document.getElementsByName('list1');
var m = 0;
var timmer;
var x = 100;
//使用循环的方式将数字写出来
for(var i=0;i<list1.length;i++){
list1[i].style.left= x+'px';
list1[i].innerHTML = i+1;
x+=50;
}
//鼠标移入
function demo(a){
//alert(a);
//清除定时器
clearInterval(timmer);
for( var i =0;i<list1.length;i++){
if(a == i){
//把图片a对应的图片显示出来
lists[a].style.display="block";
//让你选中的数字按钮改变一下颜色
list1[i].style.backgroundColor="yellow";
}else{
//让不是a的这个图片隐藏
lists[i].style.display="none";
//将其他的按钮变为原来的颜色
list1[i].style.backgroundColor="pink";
}
}
}
//鼠标移除
function demo1(c){
///alert(c)
// 让移动的图片需要放置在m中
m = --c;
//让你的图片动起来
running();
//恢复定时器
timmer = setInterval(running,2000);
}
//显示某个图片的函数
function show(m){
for(var i =0 ;i<lists.length;i++){
if(m==i){
//这是我们要让显示的图片
lists[i].style.display="block";
//让其对应的图片所对应按钮的颜色改变
list1[i].style.backgroundColor="yellow";
}else{
//这是我们不让显示的内容是隐藏的图片
lists[i].style.display="none";
//让其他不对应的图片的按钮变为原来的颜色
list1[i].style.backgroundColor="pink";
}
}
}
//让图片轮播的左右按钮移动
function func(b){
//alert(b);
//清除定时器
clearInterval(timmer);
switch(b){
case '-':
m = m-2;
if(m <-1){
m = (lists.length-2);
}
// alert('获取前一张图片');
break;
case '+':
// alert('获取后一张图片');
break;
}
//alert(m);
//让图片动起来的方法
running();
//调用定时器
timmer = setInterval(running,3000);
}
//show(4);
//让图片动起来的函数
function running(){
m++;
//console.log(m);
if(m >=lists.length){
m = 0;
}
show(m);
}
//调用定时器让图片动起来
timmer = setInterval(running,1000);
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
