Native js implements image rotation

Native js implements image rotation

1. Principle

1. Tiling the image first

2. Offset the image again

3. Use the timer to make the picture rotate regularly

2. Step operation

1. html layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <div class="slider_box" id="slider_box">
        <div class="slider_top">
        <div class="slider_main_box clearfix" style="left: -1140px;">
            <div class="slider_img"><img src="image/ban2.jpg"></div>
            <div class="slider_img"><img src="image/ban.jpg"></div>
            <div class="slider_img"><img src="image/ban1.jpg"></div>
            <div class="slider_img"><img src="image/ban2.jpg"></div>
            <div class="slider_img"><img src="image/ban.jpg"></div>
            <!-- 图片列表 -->
        </div>
        <div class="slider_ctrl_arrow">
            <span class="previous"></span>
            <span class="next"></span>
            <!-- 控制图片的两个箭头 -->
        </div>
    </div>
    <div class="slider_button">
        <span class="on"></span>
        <span></span>
        <span></span>
        <!-- 控制图片的按钮 -->
    </div>
    </div>
</body>
</html>

2, css style layout

reset stylesheet reset.css

/* CSS Document */ 

@charset "UTF-8"; 
/*Set charset*/ 
/*css initialization*/ 
html,body,img{ 
    margin: 0; 
    padding: 0; 
} 
/*Clear default padding and margin* / 

img{ 
    border: none; 
    outline: none; 
    padding: 0; 
    margin: 0; 
} 
/*Clear the default style of the image*/ 
a { 
    text-decoration: none; 
    color: rgb(131,131,131); 
} 
/*Set the title element Text decoration and font size */ 

.clearfix:before, .clearfix:after { 
    content: ""; 
    display: table; 
} 
.clearfix:after { 
    clear: both; 
} 
.clearfix { 
    *zoom: 1; /*IE/7 /6 Compatible */ 
} 
/* The way to clear the float, double pseudo elements clear the float */

Add styles to main.css

.slider_box{
    width: 1140px;
    margin:0 auto;
}
/* set the version heart */

.slider_top { 
    width : 1140px ; 
    height : 500px ; 
    overflow : hidden ; 
    position : relative ; 
    border : 1px solid red ;
     /* Hide the picture beyond the box */ 
} 
.slider_main_box { 
    width : 5700px ; 
    height : 500px ; 
    position : absolute ; 
    border : 1px solid green ; 
    z-index: 1;
}

.slider_img{

    float : left ; 
    z-index : 1 ;
     /* make the image tiled */ 
}

.previous,.next{
    position: absolute;
    display: inline-block;
    width: 40px;
    height: 104px;
    top: 50%;
    margin-bottom: 52px;
    z-index: 2;
}

.previous{

    background: url(../image/img-sprite.png) -360px 0;
    left: 20px;
}

.next{
    background: url(../image/img-sprite.png) -405px 0;
    right: 20px;
}

.slider_button{
    margin-top: 30px;
   text-align: center;
}

.slider_button span{
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 50%;
    border: 3px solid #ccc;
    margin-right: 10px;
}

.slider_button .on{
    background: green;
}

3. Add js

window.onload=function(){
    var slider_box=document.getElementById("slider_box");
    var slider=document.getElementById("slider");
    var previous=document.getElementById("previous");
    var next=document.getElementById("next");

   // implement infinite loop 
   previous.onclick= function (){
       pre_pic();

   }
   next.onclick=function(){
       next_pic();
   }

   pre_pic=function(){
       var newLeft;
       if (slider.style.left==="0px") {
           newLeft=-2280;
       }
       else{
           newLeft =parseInt(slider.style.left)+1140 ;
             // Note that the value obtained by slider.style.left here is a character, so it needs to be converted to a value 
        }
        slider.style.left=newLeft+"px";
        index--;
        if(index<0){
           index=2;
        }
        showCurrentDots();
    }

    next_pic=function(){
        var newLeft;
        if (slider.style.left==="-4560px") {
            newLeft=-2280;
        }
        else{
            newLeft=parseInt(slider.style.left)-1140;
        }
        slider.style.left=newLeft+"px";
        index++;
        if(index>2){
            index=0;
        }
        showCurrentDots();
    }

// implement autoplay

var timer= null ; // set a timer

function autoplay(){
    timer=setInterval(function()
        {next_pic();
        },1000);
}

autoplay();

slider_box.onmouseenter=function(){
    clearInterval(timer);
    // Clear the timer when the mouse moves into the autoplay box 
}

slider_box.onmouseleave=function(){
    autoplay();
    // move away, continue autoplay 
}

// button to move the image

var index=0;
var slider_btn=document.querySelector(".slider_button");
var dots=slider_btn.getElementsByTagName("span");

showCurrentDots=function(){
for(var i=0,len=dots.length;i<len;i++){
    dots[i].className="";
}
 dots[index].className="on";
}

 for (var i = 0, len = dots.length; i < len; i++){
     (function(i){
         dots[i].onclick = function (){
              var dis=index- i;
              // Determine whether to subtract forward or add forward 
             if (index==2&&parseInt(slider.style.left)!==-3420 ){
                 dis = dis-3 ;
             }
             if(index==0&&parseInt(slider.left)!==-1140){
                 dis = 3+ dis;
             }
             slider.style.left=(parseInt(slider.style.left)+dis*1140)+"px";
             index=i;
             showCurrentDots();
         }
     })(i);
 }

}

Native js implements image rotation

Guess you like