轮播图

最新推荐文章于 2022-10-10 17:17:14 发布

浪子一秋

最新推荐文章于 2022-10-10 17:17:14 发布

阅读量188

点赞数 5

分类专栏： web 文章标签：轮播图 web应用

本文链接：https://blog.csdn.net/qq_41534115/article/details/82630555

版权

web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

方法1

不太完善

html+js代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/test3.css">
    <title>轮播图</title>
</head>

<body>
    <div class="content">
        <div class="list" style="left:-600px;">
            <img src="./image/1.jpg" alt="">
            <img src="./image/2.jpg" alt="">
            <img src="./image/3.jpg" alt="">
            <img src="./image/4.jpg" alt="">
            <img src="./image/5.jpg" alt="">
        </div>
        <ul class="number">
            <li index="1" class="first dot">1</li>
            <li index="2" class="dot">2</li>
            <li index="3" class="dot">3</li>
            <li index="4" class="dot">4</li>
            <li index="5" class="dot">5</li>
        </ul>
        <div class="pre">&lAarr;</div>
        <div class="next">&rAarr;</div>
    </div>
</body>
<script type="text/javascript">
    var index = 1, timer;
    function init() {
        eventBind();
        autoPlay();
    }
    init();
    function autoPlay() {
        timer = setInterval(function () {
            animation(-600);
            dotIndex(true);
        }, 1000)
    }
    function stopAutoPlay() {
        clearInterval(timer);
    }
    function dotIndex(add) {
        if (add) {
            index++;
        }
        else {
            index--;
        }
        if (index > 5) {
            index = 1;
        }
        if (index < 1) {
            index = 5;
        }
        dotActive();
    }
    function dotActive() {
        var dots = document.getElementsByClassName("dot");
        var len = dots.length;
        for (var i = 0; i < len; i++) {
            dots[i].className = "dot";
        }

        for (var i = 0; i < len; i++) {
            /*此处可以不用parseInt，当不用全等时*/
            if (index === parseInt(dots[i].getAttribute("index"))) {
                dots[i].className = "dot first";
            }
        }
    }
    function eventBind() {
        /*点的点击事件*/
        var dots = document.getElementsByClassName("dot");
        var len = dots.length;
        for (var i = 0; i < len; i++) {
            (function (j) {
                dots[j].onclick = function (e) {
                    var ind = parseInt(dots[j].getAttribute("index"));
                    animation((index - ind) * (-600));/*显示点击的图片*/
                    index = ind;
                    dotActive();
                }
            })(i)
        }
        /*容器的hover事件*/
        var con = document.getElementsByClassName("content")[0];
        /*鼠标移动到容器上时，停止制动滑动，离开时继续滚动*/
        con.onmouseover = function (e) {
            stopAutoPlay();
        }
        con.onmouseout = function (e) {
            autoPlay();
        }
        /*箭头事件的绑定*/
        var pre = document.getElementsByClassName("pre")[0];
        var next = document.getElementsByClassName("next")[0];
        pre.onclick = function (e) {
            dotIndex(false);
            animation(600);
        }
        next.onclick = function (e) {
            dotIndex(true);
            animation(-600);
        }
    }
    function animation(offset) {
        var lists = document.getElementsByClassName("list")[0];
        var left = parseInt(lists.style.left.slice(0, lists.style.left.indexOf("p"))) + offset;
        if (left < -3000) {
            lists.style.left = "-600px";
        }
        else if (left > -600) {
            lists.style.left = "-3000px";
        }
        else {
            lists.style.left = left + "px";
        }
    }
</script>

</html>

css代码

*{
    margin: 0;
    padding: 0;
}
.content{
    margin: auto;
    height: 540px;
    width: 600px;
    overflow: hidden;
    position: relative;
    box-shadow: 1px rgb(223, 223, 119);
    border: 1px solid rgb(104, 104, 91);
}
/* 图片 */
.list{
    width: 4200px;
    height: 400px;
    position: absolute;
    top: 0;
    /* overflow: hidden; */
}
img{
    float: left;
    width: 600px;
    height: 400px;
}
/* 数字 */
.number{
    position: absolute;
    left: 40%;
    bottom: 30px;
    list-style: none;
}
.number li{
    float: left;
    width: 15px;
    height: 15px;
    background: rgb(50, 158, 190);
    margin-left: 8px;
    /* border-radius: 50%; */
}
.number .first{
    background: white;
}
.pre,.next{
    position: absolute;
    top:40%;
    height: 40px;
    width: 40px;
    font-size: 40px;
    color: white;
    text-align: center;
    background: red;
}
.pre{
    left: 30px;
}
.next{
    right: 30px;
}

方法2

html+js代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <title>轮播图</title>
</head>

<body>
    <div class="box">
        <div class="list" id="list">
            <img src="./image/1.jpg" alt="">
            <img src="./image/2.jpg" alt="">
            <img src="./image/3.jpg" alt="">
            <img src="./image/4.jpg" alt="">
            <img src="./image/5.jpg" alt="">
        </div>
        <div class="num">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript">
    window.onload = function () {
        // 获取图像
        var lists = document.querySelector(".list").children;
        var lis = document.querySelector("ul").children;
        // 记录当前选中对象
        var selection;
        for (var i = 0; i < lists.length; i++) {
            // 找到元素
            var img = lists[i];
            var li = lis[i];
            // 赋值
            li.index=i;
            // 鼠标移入事件
            li.onmouseover = function () {
                // 获取对应图片的下标
                var tmp=lists[this.index];
                // 将已选择的恢复
                lists[selection].style.visibility="hidden";
                lis[selection].style.backgroundColor="red";
                // 将现选择的显示
                tmp.style.visibility="visible";
                this.style.backgroundColor = "blue";
                clearInterval(timer);
                selection=this.index;
            }
            li.onmouseout=function(){
                timer = setInterval(scrollDisplay, 2000);
            }
            if (i == 0) {
                img.style.visibility = "visible";
                li.style.backgroundColor = "blue";
                selection = i;
            } else {
                // 隐藏
                img.style.visibility = "hidden";
                li.style.backgroundColor = "red";
            }
        }
        // 启动定时器
        var timer = setInterval(scrollDisplay, 2000);

        function scrollDisplay() {
            // 显示下一个
            // 判断是不是最后一个
            if (selection == lists.length - 1) {
                // 上个隐藏
                var tmp = lists[selection];
                var tmp1 = lis[selection];
                tmp.style.visibility = "hidden";
                tmp1.style.backgroundColor = "red";
                // 从零开始
                selection = 0;
            } else {
                // 上一个隐藏
                var tmp = lists[selection];
                var tmp1 = lis[selection];
                tmp.style.visibility = "hidden";
                tmp1.style.backgroundColor = "red";
                selection++;
            }
            // 显示当前
            var tmp = lists[selection];
            var tmp1 = lis[selection];
            tmp.style.visibility = "visible";
            tmp1.style.backgroundColor = "blue";
        }
        
    }

</script>

</html>

css代码

*{
    margin: 0;
    padding: 0;
}
body{
    display: block;
}
/* 外框 */
.box{
    width: 500px;
    height: 700px;
    margin: auto;
}
/* 图片 */
.list{
    border: 1px solid #84c50a;
    width: 100%;
    height: 500px;
    position: relative;
    left: 0;
    right: 0;
}
img{
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
}
.num{
    width: 250px;
    height: 30px;
    position: relative;
    top:30px;
    left: 130px;
}
ul{
   
    list-style: none;
}
li{
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 30px;
    background: #c50a13;
}