js写轮播图，效果为每秒图片左移，循环

html写六张图片及序号按钮

<div class='subbanner' id ='subbanner'>
        <div class='sub_banner_box'>
            <ul class='sub_banner_boxItem clearfix'>
                <li>
                    <img src="https://nsrc.haohaozhu.cn/pc_officialWeb/images/img_about_01.jpg" alt="">
                </li>
                <li>
                    <img src="https://nsrc.haohaozhu.cn/pc_officialWeb/images/img_about_02.jpg" alt="">
                </li>
                <li>
                    <img src="https://nsrc.haohaozhu.cn/pc_officialWeb/images/img_about_03.jpg" alt="">
                </li>
                <li>
                    <img src="https://nsrc.haohaozhu.cn/pc_officialWeb/images/img_about_04.jpg" alt="">
                </li>
                <li>
                    <img src="https://nsrc.haohaozhu.cn/pc_officialWeb/images/img_about_05.jpg" alt="">
                </li>
                <li>
                    <img src="https://nsrc.haohaozhu.cn/pc_officialWeb/images/img_about_06.jpg" alt="">
                </li>
                <li>
                    <img src="https://nsrc.haohaozhu.cn/pc_officialWeb/images/img_about_01.jpg" alt="">
                </li>                
            </ul>
        </div>
        <div id='dot'>
                <span style ='background:red;'></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
        </div>
    </div>

css写一些基本样式

*{
            padding:0;
            margin:0;
        }
        ul{
            list-style:none;           
        }
        .subbanner {
            position: relative;
            width: 650px;
            overflow: hidden;
            height: 438px;
        }    
        .subbanner .sub_banner_boxItem {
            position: absolute;
            display: flex;
            left:0;
        }    
        .subbanner .sub_banner_boxItem li {
            margin-right: 20px;
            width: 650px;
            height: 438px;
        }    
        .subbanner #dot {
            position: absolute;
            display: flex;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            transition:all 0.5s linear;
        }    
        .subbanner #dot span {
            width: 10px;
            margin: 0 10px;
            height: 10px;
            border-radius: 50%;
            background: #bbb;
        }

js让图片动起来

var subbanner = document.getElementById('subbanner')
    var ul = subbanner.getElementsByClassName('sub_banner_boxItem')[0]
    var dot = document.getElementById('dot');
    var oSpan = dot.getElementsByTagName('span');
    var count = 0
    var timer =null;
function fun() {
    count ++;
    if(count ==6){
            count = 0
        }
    if(ul.offsetLeft == -4020){
            ul.style.transition='';
            ul.style.left = 0+'px';
        }
        for(var i = 0;i < oSpan.length;i++){
            oSpan[i].style.background = '#bbb'
        }
        oSpan[count].style.background = 'red'
        ul.style.left = ul.offsetLeft - 670 +'px';
        ul.style.transition='all 800ms linear'
}
$("#dot span").mouseover(function () {
    count =$(this).index()
    for(var i = 0;i < oSpan.length;i++){
            oSpan[i].style.background = '#bbb'
        }
    oSpan[count].style.background = 'red'
    clearInterval(timer)
    ul.style.left =- 670*count +'px';
    ul.style.transition='all 800ms linear'
})
$('#dot span').mouseout(function() {
    timer = setInterval(fun,3000)
})
timer = setInterval(fun,3000)

别忘了引用jq，有部分是用jq代劳的