原生js写的一个轮播图

页面布局比较简单，不过功能效果倒是出来了

CSS代码

*{margin:0;padding:0}
        div{
            width:600px;height: 400px;
            margin:0 auto;
        }
        ul li{
            list-style-type: none;float: left;padding:2px 4px;border:1px yellow solid;display: block;
        }
        .style_one{
            background: orangered
        }
        button{
            margin:0 16px;
        }

HTML代码

<div>
        <img id='image' src="lun/photo1.jpg" alt="图片加载失败" width='500' height='300'>
        <ul>
            <li class='style_one'>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <button id="prebtn">上一张</button>
        <button id="nextbtn">下一张</button>
    </div>

JS代码

/*
 这个轮播图的代码在我电脑上  跟一个叫“lun"的文件在同一个文件夹下。所以我把这个文件里的图片名字都写成了  1.jpg或者2.jpg以便我自己操作，如果觉得麻烦可以把这些图片都显示到页面上   然后   获取用TagName获取一个数组，然后遍历这个数组  改变图片
*/
//  	用DOM操作   获取页面中需要操作的元素的节点
        var image=document.getElementById('image')
        var lis=document.getElementsByTagName('li')
        var prebtn=document.getElementById('prebtn')
        var nextbtn=document.getElementById('nextbtn')
//      定义一个下标  图片跟随subscript值得改变而改变
        var subscript=0;
//      定时器   1s换一张图片
        var timer=''

//		鼠标  移入   某个li标签时  切换对应下标的图片
        for( var i=0;i<lis.length;i++){
            lis[i].index=i;
            lis[i].onmouseover=function(){
                clearInterval(timer)
                subscript=this.index;
//              这里的 subscript+1  是因为  下标总是从0开始   而我们li标签里的值是从1开始的
                image.src='lun/photo'+(subscript+1)+'.jpg'
                change();
            }
//          鼠标  移出   某个li标签时  切换对应下标的图片
            lis[i].onmouseout=function(){
            changeNextPhoto()
            }
            
        }

//      自动切换下一张图片
        function changeNextPhoto(){
            timer=setInterval(function(){
            subscript++;
            image.src='lun/photo'+(subscript+1)+'.jpg'
            if(subscript>lis.length-1){
                subscript=0;
                image.src='lun/photo'+(subscript+1)+'.jpg'
            }change();
        },1000)
        }

//		定时器    在浏览器中   每隔1s切换一张图片
        timer=setInterval(function(){
            subscript++;
            image.src='lun/photo'+(subscript+1)+'.jpg'
            if(subscript>lis.length-1){
                subscript=0;
                image.src='lun/photo'+(subscript+1)+'.jpg'
            }change();
        },1000)


//		点击  下一页按钮   切换下一张图片
        nextbtn.onclick=function(){
            subscript++;
            image.src='lun/photo'+(subscript+1)+'.jpg'
            if(subscript>lis.length-1){
                subscript=0;
                image.src='lun/photo'+(subscript+1)+'.jpg'
            }change();
        }
//		点击上一页按钮   切换上一张图片
        prebtn.onclick=function(){
            subscript--;
            image.src='lun/photo'+(subscript+1)+'.jpg'
            if(subscript<0){
                subscript=lis.length-1;
                image.src='lun/photo'+(subscript+1)+'.jpg'
            }change();
        }
//      切换图片时  改变li标签的样式  
        function change(){
            for( var i=0;i<lis.length;i++){
                lis[i].className=''
            }
            lis[subscript].className='style_one'
        }

** 如有不足，还请大家多多指正，互相学习，共同进步，嘻嘻 **