教你用最简洁的js代码写轮播图 学js必会技能 无缝滚动轮播图

今天我们来完成一个类似天猫首页的轮播图 话不多说 先看效果图 ，因为只能上传不能超过5M
,所以动态图掉帧才传上来。

最下面有完整代码

html部分

<div id="container">
        <div id="img-box">
            <a href="#" class="selected">
                <img src="img/1.jpg" alt="">
            </a>
            <a href="#">
                <img src="img/2.jpg" alt="">
            </a>
            <a href="#">
                <img src="img/3.jpg" alt="">
            </a>
            <a href="#">
                <img src="img/4.jpg" alt="">
            </a>
            <a href="#">
                <img src="img/5.jpg" alt="">
            </a>
        </div>
        <ul id="btn-box">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul id="arrow-box">
            <li id="prev">&lt;</li>
            <li id="next">&gt;</li>
        </ul>

    </div>

整体构架就是先创建一个大的div，里面分为三个部分。
我用一个div里面装要轮播的图片，因为图片可点击，所以放在a标签里。用ul列表装数字按钮。
用另一个ul装箭头按钮。

css部分

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 去掉内外边距 */
        ul{
            list-style: none;
        }
        /* 去掉列表的基本样式 */
        #container{
            width: 750px;
            margin:100px auto;
            position: relative;
        }
        /* 箭头按钮和数字按钮通过定位来实现布局 */
        #img-box a{  
            display: none;
        }
        /* 把所有的图片都隐藏掉 */
        #img-box .selected{ 
            display: block;
        }
        /* 只显示名为"selected"的图片 */
        #btn-box{
            position: absolute;
            right:10px;
            bottom: 10px;
        }
         /* 给数字按钮定位 */
        #btn-box li,#arrow-box li{
            float: left;
            width: 20px;
            height: 20px;
            background: rgba(0,0,0,0.5);
            color:#fff;
            margin-right:5px;
            text-align: center;
            line-height: 20px;
            border-radius: 5px;
            font-size: 14px;
            cursor: pointer;
            /* 鼠标滑过小手状 */
        }
        /* 给数字按钮和箭头按钮设置样式 */
        #btn-box .active{
            background: #ff0036;
        }
        /* 给"active"名为数字按钮加背景 */
        #arrow-box{
            position: absolute;
            left:10px;
            bottom: 10px;
        }
       /* 给箭头按钮定位 */
    </style>

布局后的效果如下 是不是很nice!

js部分

 <script>
        var oContainer = document.getElementById('container');
        var oBtnBox = document.getElementById('btn-box');
        var aBtns = oBtnBox.getElementsByTagName('li');
        var oIngBox  = document.getElementById('img-box');
        var aImg = oIngBox.getElementsByTagName('a');
        var oNext = document.getElementById('next');
        var oPrev = document.getElementById('prev');
        // 获取元素
        var iNow = 0;
        // 记录当前显示的索引
        for(var i=0; i<aBtns.length; i++){
            aBtns[i].idx = i;
            // 自己定义一个索引
            aBtns[i].onclick = function(){
                // 清楚所有btns的active
                change(this.idx);
                iNow = this.idx;
            }
        }
        oNext.onclick = function(){
            iNow++;
            if(iNow == aBtns.length){
                iNow = 0;
            }
            change(iNow)
        }
        oPrev.onclick = function(){
            iNow--;
            if(iNow == -1){
                iNow = aBtns.length-1;
            }
            change(iNow);
        }
     function change(index){
            for(var i=0; i<aBtns.length ; i++){
                aBtns[i].className = "";
                aImg[i].className = "";
            }
            aBtns[index].className = "active";
            aImg[index].className = "selected";
        }
        // 定义一个函数，先把数字按钮和图片清空，再给索引是index
        的数字按钮和图片显示样式
        var timer = setInterval(oNext.onclick,1000);
        // 让图片自己动
        oContainer.onmouseout = function(){
            timer = setInterval(oNext.onclick,1000);
        }
        oContainer.onmouseover = function(){
            clearInterval(timer);
        }
         </script> 

写到这里最基本的轮播图已经完成啦，怎么样 是不是很简单，只要把以上三部分代码写在html5里就可以运行啦。
以下是添加了无缝滚动的轮播图，效果更炫哦

    <style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    #container{
        width: 750px;
        margin:100px auto;
        position: relative;
        overflow: hidden;
        height: 291px;
    }
    #img-box{
        width: 4500px;
        overflow: hidden;
        position: absolute;
        left:0px;
        top:0px;
        /* transition: left 1s linear ; */
    }
    #img-box a{
        float: left;
    }
    #img-box a img{
        display: block;
    }
    #btn-box{
        position: absolute;
        right:10px;
        bottom: 10px;
    }
    #btn-box li,#arrow-box li{
        float: left;
        width: 20px;
        height: 20px;
        background: rgba(0,0,0,0.5);
        color:#fff;
        margin-right:5px;
        text-align: center;
        line-height: 20px;
        border-radius: 5px;
        font-size: 14px;
        cursor: pointer;
    }
    #btn-box .active{
        background: #ff0036;

    }
    #arrow-box{
        position: absolute;
        left:10px;
        bottom: 10px;
    }
   
</style>
<body>



<div id="container">
    <div id="img-box">
        <a href="#">
            <img src="img/1.jpg" alt="">
        </a>
        <a href="#">
            <img src="img/2.jpg" alt="">
        </a>
        <a href="#">
            <img src="img/3.jpg" alt="">
        </a>
        <a href="#">
            <img src="img/4.jpg" alt="">
        </a>
        <a href="#">
            <img src="img/5.jpg" alt="">
        </a>
        <a href="#">
            <img src="img/1.jpg" alt="">
        </a>
    </div>
    <ul id="btn-box">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul id="arrow-box">
        <li id="prev">&lt;</li>
        <li id="next">&gt;</li>
    </ul>

</div>
<script src="jslib.js"></script>
<script>
    var oContainer = document.getElementById('container');
    var oBtnBox = document.getElementById('btn-box');
    var aBtns = oBtnBox.getElementsByTagName('li');
    var oImgBox  = document.getElementById('img-box');
    var aImg = oImgBox.getElementsByTagName('a');
    var oNext = document.getElementById('next');
    var oPrev = document.getElementById('prev');
    var iNow = 0;
    var iNow = 0;
    for(var i=0; i<aBtns.length; i++){
        aBtns[i].idx = i;
        aBtns[i].onclick = function(){
            // 清楚所有btns的active
            change(this.idx);
            iNow = this.idx;
        }
    }
    oNext.onclick = function(){
        iNow++;
        if(iNow == aBtns.length){
            iNow = 0;
        }
        change(iNow)
    }
    oPrev.onclick = function(){
        iNow--;
        if(iNow == -1){
            iNow = aBtns.length-1;
        }
        change(iNow);
    }
    oNext.onclick = function(){
        iNow++;
        if(iNow == aImg.length){
            // 迅速切换到第一张图 
            oImgBox.style.left = "0px";
            // 显示索引是1的图片
            iNow = 1;
        }
        change(iNow);
    }
    function change(index){
        for(var i=0; i<aBtns.length; i++){
            aBtns[i].className = "";
        }
       aBtns[index==5?0:index].className = "active";

        //  oImgBox.style.left = - index *750+"px";
        animate(oImgBox,{
            left:- index *750
        });
    }
    var timer = setInterval(oNext.onclick,2000);

    oContainer.onmouseout = function(){
        timer = setInterval(oNext.onclick,3000);
    }
    oContainer.onmouseover = function(){
        clearInterval(timer);
    }

这个是引入的js文件代码 就是在97行引入的jslib.js代码

function animate(elem, attr, callback){
	clearInterval(elem.timer);
	elem.timer = setInterval(function(){
		var bStop = true;//一个标识位，true代表可以停止定时器，false代表不可不停止
		for(var prop in attr){//1:width
			var curr = parseInt(getStyle(elem, prop));
			if(prop == 'opacity'){
				curr = parseInt(getStyle(elem, prop)*100);
			}
			var speed = (attr[prop] -  curr) / 8;
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

			if(curr != attr[prop]){
				bStop = false;
			}
			
			if(prop == 'opacity'){
				elem.style.opacity = (curr + speed) / 100;
				elem.style.filter = 'alpha(opacity='+(curr + speed)+')';
			}else{
				elem.style[prop] = curr + speed + 'px';
			}
		}
		if(bStop){
			clearInterval(elem.timer);
			callback && callback();
		}
	}, 30);
}

function getStyle(elem, attr){
	if(elem.currentStyle){//IE
		return elem.currentStyle[attr];
	}else{
		return getComputedStyle(elem, false)[attr];
	}
}

到这里我们的普通轮播图和滑动轮播图就制作完成啦，欢迎小伙伴们在留言区评论
都看到这了 如果觉得对你有帮助的话 点个关注再走呗 我会继续更新web小例子和最新的知识。感谢你的观看