模拟简易图片轮播以及效果图

最新推荐文章于 2022-05-30 18:46:02 发布

Bessry

最新推荐文章于 2022-05-30 18:46:02 发布

阅读量214

点赞数

本文链接：https://blog.csdn.net/fsw930924/article/details/53535890

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .pic{
            width: 300px;
            height: 400px;
            background-color: #f1ffd6;
            margin: 0px auto;
            position: relative;
        }
        .pic span,.pic p{
            position: absolute;
            background-color: #fffc9b;
            text-align: center;
            width: 100%;
            height: 20px;
            line-height: 20px;
        }
        .pic span{
            top: 0px;
        }
        .pic p{
            margin: 0px;
            padding: 0px;
            bottom: 0px;
        }
        .pic img{
            position: absolute;
            width: 100%;
            height: 400px;
        }
        .pic ul{
            list-style: none;
            position: absolute;
            left: 300px;
        }
        .pic ul li{
            width: 20px;
            height: 20px;
            background-color: gray;
            margin-bottom: 10px;
        }
        .as{
            background-color: orange!important;
        }
    </style>
</head>
<body>
    <div class="pic">
        <img src="lunbo/image/1.jpg" alt=""/>
        <span>图片的数量</span>
        <p>图片的描述</p>
        <ul>

        </ul>
    </div>

    <script>
        var odiv = document.getElementsByClassName("pic")[0];
        var oimg = odiv.getElementsByTagName("img")[0];
        var ospan = odiv.getElementsByTagName("span")[0];
        var op = odiv.getElementsByTagName("p")[0];
        var oul = odiv.getElementsByTagName("ul")[0];
        var liArr = oul.getElementsByTagName("li");

        /*模拟数据库取出数据*/
        var imgarr = ["lunbo/image/1.jpg","lunbo/image/2.jpg","lunbo/image/3.jpg","lunbo/image/4.jpg"];
        var textArr =["图片1","图片2","图片3","图片4"];

        /*根据图片动态生成按钮*/
        var str="";
        for(var i=0;i<imgarr.length;i++){
           str+="<li></li>";
        }
        oul.innerHTML = str;

        /*初始化*/
        var num=0;
        function show(){
            ospan.innerHTML = num+1+"/"+imgarr.length;
            op.innerHTML = textArr[num];
            oimg.src=imgarr[num];

            /*不知道上次点的那个按钮，所以就一次性把所有的样式都去掉。在选中某一个li增加样式*/
            for(var k=0;k<imgarr.length;k++){
                liArr[k].className = "";
            }
            liArr[num].className = "as";
        }

        show();

        var time;
        function setint(){
            time = setInterval(function(){
                ++num;
                if(num==imgarr.length){
                    num=0;
                }
                show();
            },2000)
        }

        setint();

        /*动态给li绑定事件，控制num下标*/
        for(var j=0;j<imgarr.length;j++){
            liArr[j].setAttribute("index",j);

            liArr[j].onclick = function(){
                num = parseInt(this.getAttribute("index"));
                clearInterval(time);
                show();
                setint();

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

Bessry

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模拟简易图片轮播以及效果图

html>html lang="en">head> meta charset="UTF-8"> title>title> style> .pic{ width: 300px; height: 400px; background-color: #f1ffd6;
复制链接

扫一扫