首页手记如何用原生JS实现图片轮播

如何用原生JS实现图片轮播

标签：

Html/CSS JavaScript

图片轮播大多应用在商品展示中。
实现方法:主要通过原生javascript编写。
实现原理：

上图中看到中间的图片就是要展示的图片，只要将所有图片并排放到一个div中然后再放到展示固定大少的窗口当中，让带所有图片的div左右来回切换达到图片滑动

然后再给展示窗口的div设置overflow:hidden;只显示窗口的一张图片，把左右两边的都隐藏起来。

先设置HTML和CSS样式

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大图滚动</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            border:0;
        }
        .clear{
            *zoom:1;
        }
        .clear:after{
            visibility: none;
            content:"";
            display:block;
            clear:both;
            height:0;
        }
        #wrap{
            width: 510px;
            height:286px;
            margin:0 auto;
            position:relative;
            background: pink;
            overflow: hidden;
        }
        #inner{
            width: 1000%;
            height:100%;
            position:absolute;
            left:0;
            top:0;
        }
        #inner img{
            width:10%;
                        height:100%;
            float: left;
        }
        .paganation{
            width: 100%;
            position: absolute;
            bottom:10px;
            text-align:center;
        }
        .paganation span{
            padding:5px 8px;
            background: #F2F2F2;
            color:red;
            border-radius:50%;
            cursor: pointer
        }
        .paganation .selected{
            background: red;
            color:white;
        }
        .arrow{
            position:absolute;
            top:0;
            width: 30px;
            height: 286px;
            line-height: 286px;
            text-align: center;
            color: red;
            cursor: pointer;
        }
        #right{
            right: 0;
        }
        .arrow:hover{
            background: rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <div id="wrap"><!-- 图片展示区 -->
        <div id="inner" class="clear"><!-- 所有图片并排的块 -->
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/1.jpg" alt="">
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/2.jpg" alt="">
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/3.jpg" alt="">
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/4.jpg" alt="">
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/5.jpg" alt="">
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/6.jpg" alt="">
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/7.jpg" alt="">
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/8.jpg" alt="">
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/1.jpg" alt="">
        </div>
        <div class="paganation" id="paganation"><!-- 页面按钮区域 -->
            <span class ="selected">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
        </div>
        <div id="left" class="arrow"><</div><!-- 向左切换按钮 -->
        <div id="right" class="arrow">></div><!-- 向右切换按钮 -->    
    </div>  
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="tween.js"></script>
    <script type="text/javascript">

    </script>   
</body>
</html>

然后开始写JS代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大图滚动</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            border:0;
        }
        .clear{
            *zoom:1;
        }
        .clear:after{
            visibility: none;
            content:"";
            display:block;
            clear:both;
            height:0;
        }
        #wrap{
            width: 510px;
            height:286px;
            margin:0 auto;
            position:relative;
            background: pink;
            overflow: hidden;
        }
        #inner{
            width: 1000%;
            height:100%;
            position:absolute;
            left:0;
            top:0;
        }
        #inner img{
            width:10%;
                        height:100%;
            float: left;
        }
        .paganation{
            width: 100%;
            position: absolute;
            bottom:10px;
            text-align:center;
        }
        .paganation span{
            padding:5px 8px;
            background: #F2F2F2;
            color:red;
            border-radius:50%;
            cursor: pointer
        }
        .paganation .selected{
            background: red;
            color:white;
        }
        .arrow{
            position:absolute;
            top:0;
            width: 30px;
            height: 286px;
            line-height: 286px;
            text-align: center;
            color: red;
            cursor: pointer;
        }
        #right{
            right: 0;
        }
        .arrow:hover{
            background: rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <div id="wrap"><!-- 图片展示区 -->
        <div id="inner" class="clear"><!-- 所有图片并排的块 -->
            <img style="background:red;" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/1.jpg" alt="">
            <img style="background:orange;" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/2.jpg" alt="">
            <img style="background:green;" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/3.jpg" alt="">
            <img style="background:cyan;" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/4.jpg" alt="">
            <img style="background:yellow;" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/5.jpg" alt="">
            <img style="background:purple;" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/6.jpg" alt="">
            <img style="background:pink;" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/7.jpg" alt="">
            <img style="background:blue;" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/8.jpg" alt="">
            <img style="background:red;" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/1.jpg" alt="">
        </div>
        <div class="paganation" id="paganation"><!-- 页面按钮区域 -->
            <span class ="selected">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
        </div>
        <div id="left" class="arrow"><</div><!-- 向左切换按钮 -->
        <div id="right" class="arrow">></div><!-- 向右切换按钮 -->    
    </div>  
    <script type="text/javascript">
        var wrap=document.getElementById("wrap");
        var inner=document.getElementById("inner");
        var spanList=document.getElementById("paganation").getElementsByTagName("span");
        var left=document.getElementById("left");
        var right=document.getElementById("right");

        var clickFlag=true;//设置左右切换标记位防止连续按
        var time//主要用来设置自动滑动的计时器
        var index=0;//记录每次滑动图片的下标
        var Distance=wrap.offsetWidth;//获取展示区的宽度，即每张图片的宽度
        //定义图片滑动的函数
        function AutoGo(){
            var start=inner.offsetLeft;//获取移动块当前的left的开始坐标
            var end=index*Distance*(-1);//获取移动块移动结束的坐标。
            //计算公式即当移动到第三张图片时，图片下标为2乘以图片的宽度就是块的left值。
            var change=end-start;//偏移量

            var timer;//用计时器为图片添加动画效果
            var t=0;
            var maxT=30;
            clear();//先把按钮状态清除,再让对应按钮改变状态
            if(index==spanList.length){
                spanList[0].className="selected";
            }else{
                spanList[index].className="selected";
            }
            clearInterval(timer);//开启计时器前先把之前的清
            timer=setInterval(function(){
                t++;
                if(t>=maxT){//当图片到达终点停止计时器
                    clearInterval(timer);
                    clickFlag=true;//当图片到达终点才能切换
                }
                inner.style.left=change/maxT*t+start+"px";//每个17毫秒让块移动
                if(index==spanList.length&&t>=maxT){
                    inner.style.left=0;
                    index=0;
                    //当图片到最后一张时把它瞬间切换回第一张，由于都同一张图片不会影响效果
                }
            },17);
        }
        //编写图片向右滑动的函数
        function forward(){
            index++;
            //当图片下标到最后一张把小标换0
            if(index>spanList.length){
                index=0;
            }
            AutoGo();
        }
        //编写图片向左滑动函数
        function backward(){
            index--;
            //当图片下标到第一张让它返回到倒数第二张，
            //left值要变到最后一张才不影响过渡效果
            if(index<0){
                index=spanList.length-1;
                inner.style.left=(index+1)*Distance*(-1)+"px";
            }
            AutoGo();
        }

        //开启图片自动向右滑动的计时器
        time=setInterval(forward,3000);

        //设置鼠标悬停动画停止
        wrap.onmouseover=function(){
            clearInterval(time);
        }
        wrap.onmouseout=function(){
        time=setInterval(forward,3000); 
        }

        //遍历每个按钮让其切换到对应图片
        for(var i=0;i<spanList.length;i++){
            spanList[i].onclick=function(){
                index=this.innerText-1;
                AutoGo();
            }
        }

        //左切换事件
        left.onclick=function(){
            if(clickFlag){
                backward();
            }
            clickFlag=false;
        }
        //右切换事件
        right.onclick=function(){
            if(clickFlag){
                forward();
            }
            clickFlag=false;
        }

        //清除页面所有按钮状态颜色
        function clear(){
            for(var i=0;i<spanList.length;i++){
                spanList[i].className="";
            }
        }

    </script>   
</body>
</html>

点击查看更多内容