js做一个首页轮播图效果

最新推荐文章于 2021-01-23 23:24:32 发布

小蟹！

最新推荐文章于 2021-01-23 23:24:32 发布

阅读量522

点赞数

分类专栏：前端学习日记文章标签： html js css

本文链接：https://blog.csdn.net/qq_45310244/article/details/105177782

版权

前端学习日记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

轮播图主要用来做电商网站的首页促销和企业首页的产品展示，可以说对电商，企业来讲，是必不可少的一个板块。

案例展示

案例链接

代码实现

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<link rel="stylesheet" href="pic.css">
<body>
    <div id="box">
        <div id="pic">
            <img src="325438.jpg" alt="">
            <img src="325459.jpg" alt="">
            <img src="1000977.jpg" alt="">
            <img src="1001295.jpg" alt="">
            <img src="2000956.jpg" alt="">
            <img src="2001519.jpg" alt="">
            <img src="2001666.jpg" alt="">
            <img src="2001828.jpg" alt="">
            <img src="2003403.jpg" alt="">
        </div>
        <img id="leftBtn" src="左箭头.png" alt="">
        <img id="rightBtn" src="右箭头.png" alt="">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
<script src="pic.js"></script>
</html>

css代码

* {
    margin: 0;padding: 0;
}
/* 轮播图位置 */
#box {
    width: 1200px;height: 600px;
    position: relative;margin: auto;
    top: 55px;
    /* 超出隐藏 */
    overflow: hidden;
}
#pic {
    width: 10800px;height: 600px;
    /* 图片间距处理/无间距*/
    font-size: 0;position: absolute;
    /* animation */
    left: 0;transition: all 1s;
}
/* 图片大小 */
#pic>img {
    width: 1200px;height: 600px;
}
#leftBtn {
    position: absolute;top: 200px;left: 0;
}
#rightBtn {
    position: absolute;top: 200px;right: 0px;
}
#box ul {
    list-style: none;position: absolute;bottom: 10px;
    left: 451px;
}
#box ul li {
    width: 16px;height: 16px;
    border: 1px solid black;
    border-radius: 8px;
    float: left;
    margin-right: 15px;
}

js代码

var pos = 0;
// 获取图片盒子
var pic = document.getElementById("pic");
//获取按钮
var leftBtn = document.getElementById("leftBtn");
var rightBtn = document.getElementById("rightBtn");
//绑定click事件
leftBtn.addEventListener("click", click);
rightBtn.addEventListener("click", click);
// 获取li
var liList = Array.from(document.getElementsByTagName("li"));
//li点击
for (var i = 0; i < 9; i++) {
    liList[i].addEventListener("click", liClick);
}
function click() {
    if (this === leftBtn) {
        pos--;
        if (pos < 0) {
            pos = 8;
        }
        move();
        return;
    }
    pos++;
    if (pos > 8) {
        pos = 0;
    }
    move();
}
function move() {
    pic.style.left = -1200 * pos + "px";
}
function liClick() {
    pos = liList.indexOf(this);
    move();
}