收藏
<!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>
//通過(guò)name屬性來(lái)獲取對(duì)象
//lists控制圖片
var lists = document.getElementsByName('list');
//console.log(lists);
//list1控制數(shù)字
var list1 = document.getElementsByName('list1');
var m = 0;
var timmer;
var x = 100;
//使用循環(huán)的方式將數(shù)字寫(xiě)出來(lái)
for(var i=0;i<list1.length;i++){
list1[i].style.left= x+'px';
list1[i].innerHTML = i+1;
x+=50;
}
//鼠標(biāo)移入
function demo(a){
//alert(a);
//清除定時(shí)器
clearInterval(timmer);
for( var i =0;i<list1.length;i++){
if(a == i){
//把圖片a對(duì)應(yīng)的圖片顯示出來(lái)
lists[a].style.display="block";
//讓你選中的數(shù)字按鈕改變一下顏色
list1[i].style.backgroundColor="yellow";
}else{
//讓不是a的這個(gè)圖片隱藏
lists[i].style.display="none";
//將其他的按鈕變?yōu)樵瓉?lái)的顏色
list1[i].style.backgroundColor="pink";
}
}
}
//鼠標(biāo)移除
function demo1(c){
///alert(c)
// 讓移動(dòng)的圖片需要放置在m中
m = --c;
//讓你的圖片動(dòng)起來(lái)
running();
//恢復(fù)定時(shí)器
timmer = setInterval(running,2000);
}
//顯示某個(gè)圖片的函數(shù)
function show(m){
for(var i =0 ;i<lists.length;i++){
if(m==i){
//這是我們要讓顯示的圖片
lists[i].style.display="block";
//讓其對(duì)應(yīng)的圖片所對(duì)應(yīng)按鈕的顏色改變
list1[i].style.backgroundColor="yellow";
}else{
//這是我們不讓顯示的內(nèi)容是隱藏的圖片
lists[i].style.display="none";
//讓其他不對(duì)應(yīng)的圖片的按鈕變?yōu)樵瓉?lái)的顏色
list1[i].style.backgroundColor="pink";
}
}
}
//讓圖片輪播的左右按鈕移動(dòng)
function func(b){
//alert(b);
//清除定時(shí)器
clearInterval(timmer);
switch(b){
case '-':
m = m-2;
if(m <-1){
m = (lists.length-2);
}
// alert('獲取前一張圖片');
break;
case '+':
// alert('獲取后一張圖片');
break;
}
//alert(m);
//讓圖片動(dòng)起來(lái)的方法
running();
//調(diào)用定時(shí)器
timmer = setInterval(running,3000);
}
//show(4);
//讓圖片動(dòng)起來(lái)的函數(shù)
function running(){
m++;
//console.log(m);
if(m >=lists.length){
m = 0;
}
show(m);
}
//調(diào)用定時(shí)器讓圖片動(dòng)起來(lái)
timmer = setInterval(running,1000);
</script>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)