记录-js实现焦点轮播图

最新推荐文章于 2021-10-17 09:40:19 发布

星辰落海

最新推荐文章于 2021-10-17 09:40:19 发布

阅读量415

点赞数

文章标签： javascript css html html5 css3

本文链接：https://blog.youkuaiyun.com/weixin_45596380/article/details/105766602

版权

记录-js实现焦点轮播图

1.html代码

<html>
<head>
    <title>焦点轮播图</title>
    <link href="jiaodian.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="demo">
<div class="box">
    <div class="image" style="left:-600">
        <img src="image/5.jpg"/>
        <img src="image/1.jpg"/>
        <img src="image/2.jpg"/>
        <img src="image/3.jpg"/>
        <img src="image/4.jpg"/>
        <img src="image/5.jpg"/>
        <img src="image/1.jpg"/>
    </div>
    <div class="jiantou">
        <a href="#" class="left-to">
            <img src="image/chevron-left.png">
        </a>
        <a href=#" class="right-to">
            <img src="image/chevron-right.png">
        </a>
    </div>
    <div id="yuandian">
        <a href="#" class="on" index="1">1</a>
        <a href="#" index="2">2</a>
        <a href="#"index="3">3</a>
        <a href="#"index="4">4</a>
        <a href="#"index="5">5</a>
    </div>
</div>
</div>
<script type="text/javascript" src="jiaodian.js">
</script>
</body>
</html>

2.css代码


* {
margin:0px;
padding:0px;
}
.demo{
width:600px;
height:337px;
padding:0px;
margin:50px auto;

}
.box{
width:600px;
height:337px;
padding:0px;
margin:0px;	
position:relative;
overflow:hidden;
}
.image{
width:4200px;
position:absolute;
margin:0px;

}
img{
float:left;
}
.jiantou{
position:absolute;
width:600px;
height:24px;
top:50%;
margin-top:-12px;
z-index:1;
}
.jiantou .left-to{
width:24px;
height:24px;
left:10px;
position:absolute;
background-color:black;
opacity:0.4;
display:none;
}
.jiantou .right-to{
width:24px;
height:24px;
right:10px;
position:absolute;
background-color:black;
opacity:0.4;
display:none;
}
.demo:hover  .left-to{
display:block;
}
.demo:hover  .right-to{
display:block;
}
.left-to:hover{
opacity:1;
}
.right-to:hover{
opacity:1;
}
/*************************小圆点开始*********************************/
#yuandian{
position:absolute;
width:600px;
height:30px;
z-index:1;
text-align:center;
bottom:40px;
}
#yuandian a{
color:white;
display:inline-block;
background:black;
width:20px;
line-height:20px;
height:20px;
text-align:center;
margin:15px;
border-radius:100%;
text-decoration:none;
font-size:12px;
}
#yuandian  .on{
background-color:white;
color:black;
}

3.javascript代码

window.onload=function() {
    var box = document.getElementsByClassName("box")[0];
    var image = box.children[0];//图片容器
    var jiantou = box.children[1];
    var left = jiantou.children[0];//左箭头
    var right = jiantou.children[1];//右箭头
    var yuandian = document.getElementById("yuandian").getElementsByTagName("a");
    var index = 1;
    var animated = false;//存放动画状态
    var timer;//存放定时器


//创建小圆点函数
    function showyuandian() {
        for (var i = 0; i < yuandian.length; i++) {
            if (yuandian[i].className == 'on') {
                yuandian[i].className = '';
                break;
            }
        }
        yuandian[index - 1].className = 'on'
    }

//事件绑定
    //  封装函数
    function animate(offset) {
        animated = true;
        var newLeft = parseInt(image.style.left) + offset;
        var time = 500;//位移总时间
        var interval = 10;//位移间隔间隔时间
        var speed = offset / (time / interval);//每次位移量
        //位移判断 是否位移
        function go() {
            if ((speed < 0 && parseInt(image.style.left) > newLeft) || (speed > 0 && parseInt(image.style.left) < newLeft)) {
                image.style.left = parseInt(image.style.left) + speed;
                setTimeout(go, interval);
            } else {
                animated = false;
                image.style.left = newLeft + "px";
                if (newLeft > -600) {
                    image.style.left = -3000 + 'px';
                }
                if (newLeft < -3000) {
                    image.style.left = -600 + 'px';
                }
            }
        }

        go();

    }

    //箭头切换
//点击右箭头下一张
    right.onclick = function () {
        if (index == 5) {
            index = 1;
        } else {
            index += 1;
        }
        showyuandian();
        if (!animated) {
            animate(-600);
        }
    }
//点击左箭头上一张
    left.onclick = function () {
        if (index == 1) {
            index = 5;
        } else {
            index -= 1;
        }
        showyuandian();
        if (!animated) {
            animate(600);
        }
    }
//按钮切换
    for (var i = 0; i < yuandian.length; i++) {
        yuandian[i].onclick = function () {
            if (this.className == 'on') {
                return;//执行到此返回 下面部分不执行
            } else {
                var myIndex = parseInt(this.getAttribute('index'));//getAttribute 获取自定义属性
                var offset = -600 * (myIndex - index);
                if (!animated) {
                    animate(offset);
                }
                index = myIndex;
                showyuandian();
            }
        }
    }

//自动播放
    function play() {
        timer = setInterval(function () {
            right.onclick();
        },2500);
    };

    function stop() {
        clearInterval(timer);
    };
    box.onmouseover=stop;
    box.onmouseout=play;
    play();
};

**实现效果图
静态图
**
鼠标移入图片
通过JavaScript实现以下效果

1.箭头切换
2.按钮切换
3.自动播放
4.无限滚动