焦点轮播图的制作

最新推荐文章于 2022-07-29 22:20:06 发布

Wangdanting123

最新推荐文章于 2022-07-29 22:20:06 发布

阅读量1.8k

点赞数 4

CC 4.0 BY-SA版权

文章标签： javascript html css

本文链接：https://blog.youkuaiyun.com/Wangdanting123/article/details/51387920

功能：

1.左右箭头切换轮播；

2.小圆点跟随导航；

3.小圆点点击图片跳转轮播。

4.图片轮播间动画效果；

5.图片自动轮播功能；

HTML代码：

<body>
<div id="container" class="container" style="width: 600px">
    <div id="list" class="list" style="left: -600px">
        <img src="images/1.jpg" alt="#">
        <img src="images/2.jpg" alt="#">
        <img src="images/3.jpg" alt="#">
        <img src="images/4.jpg" alt="#">
        <img src="images/5.jpg" alt="#">
    </div>
    <!--跟踪小圆点-->
    <div id="circleButton" class="circleButton">
        <!--<span index="1" class="on"></span>-->
    </div>
    <!--左右箭头-->
    <span class="arrow" id="prev"><</span>
    <span class="arrow" id="next">></span>
</div>
</body>

css代码：

  *{
            padding:0;
            margin:0;
        }
        .container{
            /*width: 600px;*/
            height:400px;
            overflow: hidden;
            margin:50px auto;
            border: 3px solid #333;
            position: relative;
        }
        .list{
            height: 400px;
            position: absolute;
        }
        .list img{
            float: left;
        }
        .arrow{
            width: 40px;
            height: 40px;
            background-color: rgba(0,0,0,.3);
            color: #fff;
            cursor: pointer;
            font-size: 25px;
            text-align: center;
            line-height: 40px;
            position: absolute;
            top:180px;
            display: none;
        }
        #prev{
            left: 20px;
        }
        #next{
            right: 20px;
        }
        .container:hover .arrow{
            display: block;
        }
        .arrow:hover{
            background-color: rgba(0,0,0,.7);
        }
        .circleButton{
            position: absolute;
            bottom: 20px;
        }
        .circleButton span{
            width: 10px;
            height: 10px;
            float: left;
            margin-left: 5px;
            border: 1px solid #fff;
            border-radius: 50%;
            background-color: #eee;
            cursor: pointer;
        }
        .circleButton .on{
            background-color:orange;
        }

js代码：

<script type="text/javascript">
    function addLoadEvent(func){
        var oldonload=window.onload;
        if(typeof window.onload!='function'){
            window.onload=func();
        }
        else{
            window.onload=function(){
                oldonload();
                func();
            }
        }
    }
  //主函数
    function startMain(){
        var container=document.getElementById("container");
        var list=document.getElementById("list");
        var imglists=document.getElementById("list").getElementsByTagName("img");
        var allCircle=document.getElementById("circleButton");
        var circleButtons=document.getElementById("circleButton").getElementsByTagName("span");
        var prev=document.getElementById("prev");
        var next=document.getElementById("next");
        var oneImgWidth=parseInt(container.style.width);//获取显示图片的宽度即一张图片的宽度
        var imgNum=imglists.length;//原始图片的张数
        var photoChanging=false;//图片转换状态，初始化为图片没有在转换状态
        var timer;//定时器
        var index=1;

        //设定装图片容器的宽
        list.style.width=(imgNum+2)*oneImgWidth+"px";
        //跟踪小圆点数匹配照片数
        for(var i= 0,len=imglists.length;i<len;i++){
            var circle=document.createElement("span");
            allCircle.appendChild(circle);
            //在第一张图片前面加上一张最后一张图片，在最后一张图片之后加上一张第一张图片，
            if(i==0){
                var firstImg=imglists[0],lastImg=imglists[len-1];
                firstImgSrc=firstImg.getAttribute("src");
                lastImgSrc=lastImg.getAttribute("src");
                var updateFirstImg=document.createElement("img");
                updateFirstImg.setAttribute("src",lastImgSrc);
                list.insertBefore(updateFirstImg,imglists[0]);
            }
            if(i==len-1){
                var updateLastImg=document.createElement("img");
                updateLastImg.setAttribute("src",firstImgSrc);
                list.appendChild(updateLastImg);
            }
        }
        //跟踪小圆点居中对齐
        allCircle.style.left=(oneImgWidth-allCircle.offsetWidth)/2+'px';
        //给第一个小圆点加高亮
        circleButtons[0].className="on";
        //图片轮播函数
        function photoChange(offset){
            var newListLeft=parseInt(list.style.left)+offset;
            var time=500;//两张图片间动画位移总时间
            var interval=10;//两张图片间动画位移间隔时间
            var speed=offset/(time/interval);//偏移量
            function animate(){
                if((speed>0&&newListLeft>parseInt(list.style.left))||(speed<0&&newListLeft<parseInt(list.style.left))){
                    photoChanging=true;
                    list.style.left=parseInt(list.style.left)+speed+"px";
                    setTimeout(animate,10);
                }
                else{
                    photoChanging=false;
                    list.style.left=newListLeft+"px";
                    //如果跑到原始第一张图片前面，则跳到原始最后一张图片
                    if(newListLeft>-oneImgWidth){
                        list.style.left=imgNum*(-oneImgWidth)+"px";
                    }
                    //如果超出原始最后一张图片，则跳到原始第一张图片
                    if(newListLeft<imgNum*(-oneImgWidth)){
                        list.style.left=-oneImgWidth+"px";
                    }
                }
            }
            animate();
        }
        //自动轮播功能
        function autoPlay(){
            timer=setInterval(function(){
                next.onclick();
            },3000)
        }
        //停止自动轮播功能
        function stopAutoPlay(){
            clearInterval(timer);
        }
        //跟踪小圆点高亮效果
        function circleBright(){
            for(var i=0,len=circleButtons.length;i<len;i++){
                if(circleButtons[i].className=="on"){
                    circleButtons[i].className=" ";
                }
            }
            circleButtons[index-1].className="on";
        }
        //左箭头
        prev.onclick=function(){
            if(!photoChanging){
                if(index==1){
                    index=circleButtons.length;
                }
                else{
                    index-=1;
                }
                circleBright();
                photoChange(oneImgWidth);
            }
        };
        //右箭头
        next.onclick=function(){
            if(!photoChanging){
                if(index==circleButtons.length){
                    index=1;
                }
                else{
                    index+=1;
                }
                circleBright();
                photoChange(-oneImgWidth);
            }
        };
        //小圆点的点击功能
        for(var j=0;j<circleButtons.length;j++) {
            circleButtons[j].setAttribute("index",j+1);
            circleButtons[j].onclick=function(){
                if(this.className=="on"){
                    return;
                }
                var myCircle=parseInt(this.getAttribute("index"));//获取小圆点的号数
                var offset=-oneImgWidth*(myCircle-index);//偏移量
                if(!photoChanging){
                    photoChange(offset);
                    index=myCircle;
                    circleBright();
                }
            }
        }
        container.onmouseover=stopAutoPlay;
        container.onmouseout=autoPlay;
        autoPlay();
    }
    addLoadEvent(startMain);
</script>