轮播图—基于原生js

<!-- 图片展示区域 -->
    <div class="outer">
        <ul class="imgList">
            <li><img src="images/service_pic1.jpg"/></li>
            <li><img src="images/service_pic2.jpg"/></li>
            <li><img src="images/service_pic3.jpg"/></li>
            <li><img src="images/service_pic4.jpg"/></li>
            <li><img src="images/service_pic1.jpg"/></li>
        </ul>
        <!-- 图片上的导航按钮 -->
        <div class="navDiv">
            <a href="javascript: ;"></a>
            <a href="javascript: ;"></a>
            <a href="javascript: ;"></a>
            <a href="javascript: ;"></a>
        </div>
</div>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .outer{ 
            margin: 0 auto;
            width: 550px;
            height: 350px;
            /* border: 5px solid aquamarine; */
            position: relative;
            margin-top: 300px;
            overflow: hidden;
        }
        .imgList{
            list-style: none;
            position: absolute;
            top: 0;
        }
        .imgList li{
            float: left;
            /* margin: 0 5px; */
        }
        
        .navDiv{
            position: absolute;
            bottom: 20px;
        }
        .navDiv a{
            float: left;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: aquamarine;
            opacity: 0.3;
            margin: 0 5px;
        }
        .navDiv a:hover{
            background-color: cadetblue;
        }
        
        
</style>

<script type="text/javascript">
        window.onload = function(){
            //move函数
            function move(obj,attr,target,speed,callback){
            clearInterval(obj.timer);//关闭上一个定时器
            var current = parseInt(getStyle(obj,attr));//获取obj当前位置
            if(current > target){
                speed = - speed;//如果当前位置大于目标位置，应该向左移动，速度为负值
            }
            obj.timer = setInterval(function(){
                var oldValue = parseInt(getStyle(obj,attr));//获取obj原来的位置
                var newValue = oldValue + speed;//设置obj移动
                if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
                    newValue = target;//不能让移动超过边界
                }
                obj.style[attr] = newValue + "px";//设置obj现在的位置

                if(newValue == target){//如果obj到达目标位置，则停止移动，清除定时器
                clearInterval(obj.timer);
                callback && callback();
            }
            },30);
            
        };

        function getStyle(obj,name){
            if(window.getComputedStyle){
                return getComputedStyle(obj,null)[name];
            }else{
                return obj.currentStyle[name];
            };
        }
            
            var imgList = document.getElementsByClassName("imgList")[0];
            var imgArr = document.getElementsByTagName("img");
            imgList.style.width = 550 * imgArr.length + "px";

            // 设置导航按钮居中
            var navDiv = document.getElementsByClassName("navDiv")[0];
            var outer = document.getElementsByClassName("outer")[0];
            navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";

            // 设置按钮选中后出现的效果
            var index = 0;
            var allA = document.getElementsByTagName("a");
            allA[index].style.background = "cadetblue";

            // 点击超链接切换到指定图片
            for(var i = 0 ; i < allA.length ; i++){
                allA[i].num = i;
                allA[i].onclick = function(){
                    clearInterval(timer);
                    index = this.num;
                    // imgList.style.left = -560 * index +"px";
                    setA();
                    move(imgList,"left",-550 * index,30,function(){
                        autoChange();
                    });
                };
            }
            autoChange();
            function setA(){
                if(index >= imgArr.length - 1){
                    index = 0;
                    imgList.style.left = 0;
                };
                for(var i = 0;i < allA.length;i++){
                    allA[i].style.backgroundColor = "";
                };
                allA[index].style.backgroundColor = "cadetblue";
            };

            //设置自动切换函数
            var timer;
            function autoChange(){
                timer = setInterval(function(){
                    index ++;
                    index %= imgArr.length;
                    // imgList.style.left = -560 * index +"px";
                    move(imgList,"left",-550 * index,30,function(){
                        setA();
                    });
                },2000)
            }
        }
</script>