用JS写的简单轮播特效

效果如下

功能分析

1.每隔1秒换一张图片

2.鼠标移入停止切换、鼠标离开继续切换

3.鼠标移入到数字上面的时候,显示和数字对应的图片,并且停止切换,被选中的数字,背景显示橙色

4.鼠标离开数字,从该数字后面继续显示

代码如下

<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        div,img,ul,li{margin:0;padding:0;}
        #pic{width:480px;height:300px;margin: 100px auto}
        #pic img{width: 100%;height: 300px;border: 1px solid #ccc}
        #pic li{list-style: none;float: left;border:1px solid orange;width:58px;height:30px;text-align: center;line-height: 30px}
    </style>
</head>
<body>
    <div id="pic">
        <img src="img/1.jpg">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
    <script type="text/javascript">
        //1. 设置定时器，每隔1000毫秒执行changePic函数
        var interID = setInterval(changePic, 1000);
        var oImg = document.getElementsByTagName('img')[0];
        //3. 鼠标移入到数字上的时候，显示对应的图片
        var oLis = document.getElementsByTagName('li');

        var count = 1;
        function changePic(){
            oImg.src = 'img/'+count+'.jpg';
            //先让所有的li标签背景都为空
            for(var i=0;i<oLis.length;i++){
                oLis[i].style.background = '';
            }
            //让和图片序号对应的li标签背景显示橙色  count-1
            oLis[count-1].style.background = 'orange';
            count ++;
            if(count>8){
                count = 1;
            }
            
        }
        //鼠标移入停止播放
        oImg.onmouseover = function(){
            clearInterval(interID);
        }
        //鼠标离开继续播放
        oImg.onmouseout = function(){
            clearInterval(interID);
            interID = setInterval(changePic, 1000);
        }
        
        console.log(oLis.length);
        for(var i=0;i<oLis.length;i++){
            //给每个li标签增加属性oindex保存当前的索引
            oLis[i].oindex = i;
            oLis[i].onmouseover = function(){
                //console.log(i);    //
                //停止播放
                clearInterval(interID);
                //设置li标签的背景颜色
                this.style.background = 'orange';
                count = this.oindex+1;
                changePic();
            }
            oLis[i].onmouseout = function(){
                clearInterval(interID);
                interID = setInterval(changePic, 1000);
            }
        }
    </script>
</body>
</html>