您的位置：首页 > Web前端 > JavaScript

Js实现图片轮播，以及鼠标移动选择指定图片

2017-08-17 22:02 861 查看

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
text-align: center;
}

#div1 {
width: 800px;
height: 300px;
background-color: red;
margin: 50px auto;
position: relative;
}

#in1 {
border: 1px black;
position: absolute;
right: 50px;
bottom: 20px;
background-color: pink;
width: 30px;
height: 30px;
line-height: 30px;
overflow: hidden;
}

#in2 {
border: 1px black;
position: absolute;
right: 80px;
bottom: 20px;
background-color: pink;
width: 30px;
height: 30px;
line-height: 30px;
overflow: hidden;
}

#in3 {
border: 1px black;
position: absolute;
right: 110px;
bottom: 20px;
background-color: pink;
width: 30px;
height: 30px;
line-height: 30px;
overflow: hidden;
}

#in4 {
border: 1px black;
position: absolute;
right: 140px;
bottom: 20px;
background-color: pink;
width: 30px;
height: 30px;
line-height: 30px;
overflow: hidden;
}

#img1 {
width: 800px;
height: 300px;
}
</style>
</head>

<body>
<div id="div1">
<img src="" id="img1" />
<div id="in1" onmousemove="changeImg4()">4</div>
<div id="in2" onmousemove="changeImg3()">3</div>
<div id="in3" onmousemove="changeImg2()">2</div>
<div id="in4" onmousemove="changeImg1()">1</div>
</div>
</body>
<script>
window.onload = imgStart()
window.onload = xunhuan()

function changeImg4() {
setColor();
var img = document.getElementById("img1")
img.src = "img/101.jpg";
var div4 = document.getElementById("in1")
div4.style.backgroundColor = "red"
}

function changeImg3() {
setColor();
var img = document.getElementById("img1")
img.src = "img/102.jpg";
var div3 = document.getElementById("in2")
div3.style.backgroundColor = "red"
}

function changeImg2() {
setColor();
var img = document.getElementById("img1")
img.src = "img/103.jpg";
var div2 = document.getElementById("in3")
div2.style.backgroundColor = "red"
}

function changeImg1() {
setColor();
var img = document.getElementById("img1")
img.src = "img/104.jpg";
var div1 = document.getElementById("in4")
div1.style.backgroundColor = "red"
}

function setColor() {
var div1 = document.getElementById("in1")
var div2 = document.getElementById("in2")
var div3 = document.getElementById("in3")
var div4 = document.getElementById("in4")
div1.style.backgroundColor = "pink"
div2.style.backgroundColor = "pink"
div3.style.backgroundColor = "pink"
div4.style.backgroundColor = "pink"
}

function imgStart() {
setTimeout("changeImg1()", 0)
setTimeout("changeImg2()", 2000)
setTimeout("changeImg3()", 4000)
setTimeout("changeImg4()", 6000)
}

function xunhuan() {
setInterval("imgStart()", 8000)
}
</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航