Know almost original my blog micro-channel public number
these days when visiting the site found that many sites have Carousel Figure this effect, so I modeled millet official website to write a carousel view of the effect of virgin js, hope you like .
This is the effect I posted on github last achieved: HTTPS: //heternally.github.io / ...
Now I simply tell you is that what I achieve the effect of the process, if there is something wrong place, welcome to say it, in order to facilitate them to learn from each other.
I believe that a simple html + css front of everyone should be able, I can not say here, simply to show you what the code:
HTML part
<div id="wrap">
<div class="banner">
<div class="banner-img">
<img src="images/1.jpg" width="1226" height="460" alt="轮播图1">
</div>
</div>
<div class="banner">
<div class="banner-img">
<img src="images/2.jpg" width="1226" height="460" alt="轮播图2">
</div>
</div>
<div class="banner">
<div class="banner-img">
<img src="images/3.jpg" width="1226" height="460" alt="轮播图3">
</div>
</div>
<div class="banner">
<div class="banner-img">
<img src="images/4.jpg" width="1226" height="460" alt="轮播图4">
</div>
</div>
<div class="banner">
<div class="banner-img">
<img src="images/5.jpg" width="1226" height="460" alt="轮播图5">
</div>
</div>
<div class="tab">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="prev">
</div>
<div class="next"></div>
</div>css section
* {
margin:0;
padding:0;
}
#wrap {
position:relative;
margin:20px auto;
width:1226px;
height:460px;
}
#wrap .banner {
position:absolute;
top:0;
width:100%;
height:100%;
opacity:0;
transition: opacity 2s;
}
#wrap .tab{
position:absolute;
bottom:10px;
right:10px;
}
#wrap .tab span{
display: inline-block;
width:6px;
height:6px;
margin:3px;
background:rgba(105,105,105,0.5);
border-radius:50%;
cursor: pointer;
border:2px solid #887B6E;
}
#wrap .tab span.on{
background:#E2CEB7;
}
#wrap .tab span:hover{
background:#E2CEB7;
}
#wrap .prev {
position:absolute;
left:20px;
top:210px;
width:41px;
height:69px;
background: url("images/icon-slides.png") 82px;
cursor:pointer;
}
#wrap .prev:hover{
background: url("images/icon-slides.png");
}
#wrap .next {
position:absolute;
right:20px;
top:210px;
width:41px;
height:69px;
background: url("images/icon-slides.png") 41px;
cursor:pointer;
}
#wrap .next:hover{
background: url("images/icon-slides.png") 123px;
}The above code is very simple, a little look at it, let's start focus on that part js
First of all I would like to get the various nodes, by class name, ID and other methods:
var oBody = document.getElementsByTagName("body")[0];
var aBanner = document.getElementsByClassName("banner");
var aSpan = document.getElementsByClassName("tab") [0].getElementsByTagName("span");
var oNext = document.getElementsByClassName("next")[0];
var Oprev = document.getElementsByClassName("prev")[0];
var Oon = document.getElementsByClassName("on")[0];Next is the initialization interface, because I set the picture inside css opacity opacity: 0; so I'll make the first picture display and the first small white dot color is achieved before the carousel figure:
aBanner[0].style.opacity = "1";
aSpan[0].className = "on";
var num = 0;Then that is a pre-set, after a small dot button effects, and achieve click on the small dot, will make a corresponding picture display, a front will display a picture before clicking; effect after a same:
for(var i = 0;i < aSpan.length;i++){
aSpan[i].index = i;
aSpan[i].onclick = function(){ //点击小圆点图片相对应的进行切换
for(var j = 0 ;j < aSpan.length; j++){
num = this.index;
aSpan[j].className = "";
aBanner[j].style.opacity = "0";
}
aSpan[num].className = "on";
aBanner[num].style.opacity = "1";
}
oNext.onclick = function(){//按下图片切换到后一张
for(var j = 0 ;j < aSpan.length; j++){
if(aSpan[j].className == "on"){
aSpan[j].className = "";
aBanner[j].style.opacity = "0";
j++;
num++;
if(j > 4){
j = 0;
}
aSpan[j].className = "on";
aBanner[j].style.opacity = "1";
}
}
}
Oprev.onclick = function(){ //按下图片切换到前一张
for(var j = 0 ;j < aSpan.length; j++){
if(aSpan[j].className == "on"){
aSpan[j].className = "";
aBanner[j].style.opacity = "0";
j--;
num--;
if(j < 0){
j = 4;
}
aSpan[j].className = "on";
aBanner[j].style.opacity = "1";
}
}
}
}In this part to a for loop, length is the number of small dots, in this cycle, give the value of each dot index assignment such that each corresponds to a dot image;
Then write a function click on the dot, dot achieve the current time in a function to get the current standard value, say the value is assigned to a global variable num, so the picture of the opacity set to o, remove all the dots "on "style, and then the first num pictures of opacity is set to 1, add" on "style, thus achieving a dot click to jump to the corresponding picture.
The same effect can be achieved back button forward.
Finally, set a timer function to achieve image carousel:
function Time(){/*设置定时器运行的函数*/
num++;
if(num < 5){
for(var j = 0 ;j < aSpan.length; j++){
aSpan[j].className = "";
aBanner[j].style.opacity = "0";
}
aSpan[num].className = "on";
aBanner[num].style.opacity = "1";
}else {
num = -1;
}
}
clearInterval(timer);
var timer = setInterval("Time()",2000);/*调用定时器*/
oBody.onmouseover = function(){/*鼠标引入，清除定时器，轮播图停止*/
clearInterval(timer);
};
oBody.onmouseout = function(){/*鼠标移出，重新调用定时器，轮播图开始*/
clearInterval(timer);
timer = setInterval("Time()",2000);
};When you call timer, I use the setInterval, or if you want to use setTimerout also possible;
In the first call timer to clear the timer, or let the timer has been superimposed, making the carousel faster and faster; I also added when the mouse is moved when the carousel stops drawing that the timer is cleared, when mouse out, a timer is invoked again.