原生js实现图片轮播

原生js实现图片轮播

一、原理

1、先对图片进行平铺操作

2、再对图片进行偏移量处理

3、利用定时器让图片定时轮播

二、步骤操作

1、html布局

<!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样式布局

重置样式表 reset.css

/* CSS Document */

@charset "UTF-8";
/*设置字符集*/
/*css 初始化 */
html,body,img{
    margin: 0;
    padding: 0;
}
/*清除默认padding和margin*/

img{
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
}
/*清除图片的默认样式*/
a {
    text-decoration: none;
    color: rgb(131,131,131);
}
/*设置标题元素的文本修饰和字号*/

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1; /*IE/7/6兼容*/
}
/*清除浮动的方式，双伪元素清除浮动*/

添加样式main.css

.slider_box{
    width: 1140px;
    margin:0 auto;
}
/*设置版心*/

.slider_top{
    width: 1140px;
    height: 500px;
    overflow: hidden;
    position: relative;
    border:1px solid red;
    /*将超出的盒子的图片隐藏*/
}
.slider_main_box{
    width: 5700px;
    height: 500px;
    position: absolute;
    border:1px solid green;
    z-index: 1;
}

.slider_img{

    float: left;
    z-index: 1;
    /*让图片平铺*/
}

.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、添加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");

   // 实现无限循环
   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;
            // 注意这边的slider.style.left获取的值为字符所以要让它转为为数值
        }
        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();
    }

// 实现自动播放

var timer=null;//设置一个计时器

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

autoplay();

slider_box.onmouseenter=function(){
    clearInterval(timer);
    //当鼠标移入自动播放的盒子中，清除计时器
}

slider_box.onmouseleave=function(){
    autoplay();
    // 移开，继续自动播放
}

//按钮移动图片

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;
             // 判断往前减，还是往前加
             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);
 }

}

原生js实现图片轮播

猜你喜欢