完整的javascript轮播图（幻灯片）

基本信息
源码名称：完整的javascript轮播图（幻灯片）
源码大小：0.09M
文件格式：.zip
开发语言：js
更新时间：2019-05-30
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：78630559
本次赞助数额为： 2 元　
源码介绍
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #main{
            width: 267px;
            height: 374px;
            margin: 100px auto;
            position: relative;
        
        }
        #main .scollimg{
            width: 267px;
            height: 374px;
            position: relative;
        }
        .scollimg img{
        	width: 267px;
            height: 374px;
            
        }
        #main .scollimg img{
            position: absolute;
            top: 0;
            left: 0;
        }
        #main .btn{
            width: 267px;
            height: 100px;
            position: absolute;
            top:80px;
            left: 0;
        }
        #main .btn>div{
            width: 100px;
            height: 220px;
            background: #fff;
            opacity: 0;
        }
        #main .btn：hover>div{
            opacity: 0.65;
        }
        #main .btn #btnleft{
            position: absolute;
            top: 0;
            left: 0;
        }
        #main .btn #btnright{
            position: absolute;
            top: 0;
            right:0;
        }
        /*左右button里的三角形*/
        .triangle{
            margin-top: 50px;
            width: 0;
            height: 0;
            border-width:70px 40px;
            border-style: solid;
        }

        #main .btn #btnleft .triangle{
            border-color: transparent #ccc transparent  transparent;
        }
        #main .btn #btnright .triangle{
            margin-left: 20px;
            border-color: transparent transparent transparent #ccc;
        }
        #main .item{
            position: absolute;
            bottom: 30px;
            left: 100px;
            width: 100px;
            height: 16px;
        }
        #main .item span{
            width: 16px;
            height: 16px;
            background: #ccc;
            display: inline-block;
            border-radius: 50%;
        }
        #main .item span:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="scollimg">
            <img src="img/0503038001546069813.jpg" alt="">
            <img src="img/0512514001546062623.jpg" alt="">
            <img src="img/0517413001545981618.jpg" alt="">
        </div>
        <div class="btn">
            <div id="btnleft"><div class="triangle"></div></div>
            <div id="btnright"><div class="triangle"></div></div>
        </div>
        <div class="item">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script type="text/javascript">
        window.onload=function(){
            autoMove('img','span');
        }

        //轮播图函数
        function autoMove(tagImg,tagSpan){
            var imgs=document.getElementsByTagName(tagImg);
            var spans=document.getElementsByTagName(tagSpan);
            //每次轮播后样式
            /*轮播到哪个位置，就对哪个位置的图片样式进行设置，首先让所有的图片样式opacity变为0，然后对移动到的位置的样式进行设置opacity为1*/
            function InitMove(index){
                for(var i=0;i<imgs.length;i  ){
                    imgs[i].style.opacity='0';
                    spans[i].style.background='#ccc';
                }
                imgs[index].style.opacity='1';
                spans[index].style.background='red';
            }
            //第一次初始化
            InitMove(0);
            //轮播过程的变换函数
            /*前面已经初始化了图片最开始看到的效果，接着轮播的话会隐藏第一张出现第二张
             *这里count从1开始（图片的初始化位置是count为0的情况），count=1执行一次Init*Move(count),使第一张隐藏第二张出现，依次执行。当count==imgs.leghth时由于*图片最后一张的位置是imgs.length-1,所以此时把count置为0；相当于轮播图轮回
             *依次重新开始。
             */
            var count=1;
            function fMove(){
                if(count==imgs.length){
                    count=0;
                }
                InitMove(count);
                count  ;
            }
            //设置自动轮播定时器；
            var scollMove=setInterval(fMove,2500);

            //点击移动图片；
            /*这里就是点击左右移动的button来让图片根据用户的点击左右移动；需要注意一点就*是每次点击左移动或右移动需要首先清除定时器，等移动完了在重新添加定时器不然的*话你点击移动后图片虽然该变了，但是由于定时器还没移动到这张图片上面，所以就需*要等待定时器移动到你移动到的那张图片上面让后才开始定时轮播。比如如果你从开始
            *就点击移动图片，一直移动到最后一张那么你就要等待两个定时器的时间才能看到自动*轮播。
            */
            var btnleft=document.getElementById('btnleft');
            var btnright=document.getElementById('btnright');
            btnleft.onclick=function(){
                clearInterval(scollMove);
                if(count==0){
                    count=imgs.length;
                }
                count--;
                InitMove(count);
                scollMove=setInterval(fMove,2500);
            };
            btnright.onclick=function(){
                clearInterval(scollMove);
                fMove();
                scollMove=setInterval(fMove,2500);
            }
        }




    </script>
</body>
</html>