輪播圖1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="img1">
<img src="img/picture-1.jpg"/>
</div>
<div id="img2">
<img src="img/thumb-1.jpg"/>
<img src="img/thumb-2.jpg"/>
<img src="img/thumb-3.jpg"/>
</div>
<script type="text/javascript">
var img1 = document.querySelector("#img1>img");
var imgs = ["img/picture-1.jpg","img/picture-2.jpg","img/picture-3.jpg"]
var img2 = document.querySelectorAll("#img2>img")
var index = 0;
var timerId;
function startIt(){
timerId = window.setInterval(function(){
index %=3;
img1.src = imgs[index]
index+=1;
},2000)
}
startIt();
for(var i=0;i<3;i++){
img2[i].addEventListener("mouseover",function(evt){
window.clearInterval(timerId);
var nowImg = evt.target||evt.srcElement
var num = nowImg.src
var a ="img/picture-"+ num.charAt(num.length-5)+".jpg"
img1.src = imgs[imgs.indexOf(a)]
})
img2[i].addEventListener("mouseout",function(evt){
startIt();
})
}
</script>
</body>
</html>
輪播圖2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#picture{
width:940px;
height: 430px;
margin: 50px auto;
box-sizing: border-box;
background: url(img/slide-1.jpg)<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#picture{
width:940px;
height: 430px;
margin: 50px auto;
box-sizing: border-box;
background: url(img/slide-1.jpg) no-repeat;
position: relative;
}
#picture>ul{
position: absolute;
height: 100px;
width: 100px;
left: 420px;
bottom: 0px;
}
#picture li{
font-size: 100px;
line-height: 100px;
color: rgba(100,100,100,0.5);
float: left;
list-style: none;
}
#picture li:first-child{
color: blue;
}
</style>
</head>
<body>
<div id="picture">
<ul>
<li class="li">.</li>
<li>.</li>
<li>.</li>
<li>.</li>
</ul>
</div>
<script type="text/javascript">
var lis = document.querySelectorAll("#picture>ul>li");
var imgs = ["img/slide-1.jpg","img/slide-2.jpg","img/slide-3.jpg","img/slide-4.jpg"]
var pic = document.querySelector("#picture");
var index = 1;
var timerId;
function update(){
for(var i=0;i<lis.length;i++){
lis[i].style.color = "rgba(100,100,100,0.5)";
}
}
function startIt(){
timerId = window.setInterval(function(){
update();
index %=4;
index+=1;
pic.style.backgroundImage ="url(img/slide-"+index+".jpg)";
lis[index-1].style.color = "blue";
},2000)
}
startIt();
for(var i=0;i<lis.length;i++){
lis[i].index = i+1
lis[i].addEventListener("click",changIt);
lis[i].addEventListener("mouseover",changIt);
lis[i].addEventListener("mouseout",startIt);
function changIt(evt){
window.clearInterval(timerId)
update()
var li = evt.target;
index = li.index;
li.style.color = "blue";
pic.style.backgroundImage ="url(img/slide-"+li.index+".jpg)";
}
}
</script>
</body>
</html>
