开心总结：
今天自己动手完成了一个轮播图的编写；
主要功能有：
1.点击页码，图片进行自动切换。
2.点击箭头，图片进行下一张或者上一张的切换；
3.页面加载之后，在规定时间内自动进行下一张的切换；
4.当鼠标滑到图片处后，自动切换图片功能停止；
5.当鼠标滑出图片后，自动切换图片功能打开；
6.添加了一个每次图片进行切换的动画，使得看起来更加的美观一些；
主要用到的技术有：
html,css,dom操作，js操作；
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
#container{
width: 750px;
height: 291px;
margin: 50px auto;
position: relative;
}
#container .tabs {
position: absolute;
right: 30px;
bottom: 30px;
z-index: 999;
}
#container .tabs li{
float: left;
width: 20px;
height: 20px;
margin-right: 4px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
text-align: center;
line-height: 20px;
cursor: pointer;
}
#container .imgs img{
width: 750px;
height: 291px;
opacity: 0;
position: absolute;
top: 0;
left: 0;
transform: scale(0.8);
transition: opacity 1s ease,transform 1.5s ease;
}
#container .imgs img.selected{
opacity: 1;
transform: scale(1);
}
#container .right,
#container .left{
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 32px;
text-align: center;
line-height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
z-index: 999;
}
#container .right{
right: 0;
}
#container .left{
left: 0;
}
#container .tabs .selected{
background: red;
}
</style>
</head>
<body>
<div id="container">
<ul class="tabs">
<li class="tab selected">1</li>
<li class="tab">2</li>
<li class="tab">3</li>
<li class="tab">4</li>
<li class="tab">5</li>
</ul>
<div class="imgs">
/*图片这里可以随意改动，因为我引用的是本地图片，所以加载起来会比较快一些，不会出现什么问题
但是如果引用网络图片，会出现引用不到的情况，我还没将这个因素进行一个考虑，所以这个代码只适用于
图片在本地情况下*/
<img src="imgs/facebook_1.jpg" alt="" class="img selected">
<img src="imgs/facebook_2.jpg" alt="" class="img">
<img src="imgs/3.jpg" alt="" class="img">
<img src="imgs/4.jpg" alt="" class="img">
<img src="imgs/5.jpg" alt="" class="img">
</div>
<div class="arrows">
<span class="left"><</span>
<span class="right">></span>
</div>
</div>
<script>
var oContainer=document.getElementById("container");
var aTab=document.getElementsByClassName("tab");
var aAmg=document.getElementsByClassName("img");
var oRight=document.getElementsByClassName("right")[0];
var oLeft=document.getElementsByClassName("left")[0];
var index=0;
var timer;
for(var i=0;i<aTab.length;i++){
aTab[i].index=i;
aTab[i].onclick=function(){
changeImg(this.index);
}
}
oRight.onclick=function(){
index++;
if(index>(aTab.length-1)){
index=0;
}
changeImg(index);
}
oLeft.onclick=function(){
index--;
if(index<0){
index=aTab.length-1;
}
changeImg(index);
}
function changeImg(idx){
for(var i=0;i<aTab.length;i++){
aTab[i].classList.remove("selected");
aAmg[aTab[i].index].classList.remove("selected");
}
aTab[idx].classList.add("selected");
aAmg[idx].classList.add("selected");
}
var timer;
function go(){
timer=setInterval(function() {
oRight.onclick();
}, 2500);
}
go();
oContainer.onmouseover=function(){
clearInterval(timer);
}
oContainer.onmouseout=function(){
go();
}
</script>
</body>
</html>
|