JS 三种轮播图

最新推荐文章于 2024-06-17 15:29:34 发布

甘乐2333

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量309

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_35254240/article/details/90733944

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *
        {
            margin: 0;
        }
        div
        {
            width: 100%;
            height:455px;
            background-image: url("./img/a.jpeg");
            background-size: 100% 100%;
            transition: all 1s;
        }

        img{
            position: absolute;
            display: block;
            right:50px;
            border:2px solid rgba(0,0,0,0);
            top:40px
        }
        img:nth-child(1){
            border: 2px solid #ff9d00;
        }
        img:nth-child(2){
            top:121px;
        }
        img:nth-child(3){
            top:202px;
        }
        img:nth-child(4){
            top:283px;
        }
        img:nth-child(5){
            top:364px;
        }

    </style>
</head>
<body>
    <div>
        <img src="img/icon_a.jpeg">
        <img src="img/icon_b.jpeg">
        <img src="img/icon_c.jpeg">
        <img src="img/icon_d.jpeg">
        <img src="img/icon_e.jpeg">
    </div>
   <script>
        var pre;
       var imgArr=["./img/a.jpeg","./img/b.jpeg","./img/c.jpeg","./img/d.jpeg","./img/e.jpeg"];
       init();
       function init() {
            var imgs=document.getElementsByTagName("img");
            for(var i=0;i<imgs.length;i++){
                imgs[i].addEventListener("click",clickHandler);
            }
            pre=imgs[0];
        }

        function clickHandler(e) {
            var arr=Array.from(this.parentElement.children);
            var index=arr.indexOf(this);
            var div=document.querySelector("div");
            div.style.backgroundImage="url("+imgArr[index]+")";
            pre.style.border="2px solid rgba(0,0,0,0)";
            pre=this;
            pre.style.border="2px solid #ff9d00";
        }
   </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <script>
       var imgArr=["./img/a.jpeg","./img/b.jpeg","./img/c.jpeg","./img/d.jpeg","./img/e.jpeg"];
       var iconArr=["./img/icon_a.jpeg","./img/icon_b.jpeg","./img/icon_c.jpeg","./img/icon_d.jpeg","./img/icon_e.jpeg"];
        var pre;
       init();
       function init() {
            document.body.style.margin="0px";
            var div=createBg(document.body);
           createIcon(div);
       }
       
       function createBg(parent) {

           var div=document.createElement("div");
           Object.assign(div.style,{
                width:document.documentElement.offsetWidth+"px",
               height:document.documentElement.offsetWidth/3+"px",
               backgroundImage:"url("+imgArr[0]+")",
               backgroundSize:"100% 100%",
               transition: "all 1s"
           });
           parent.appendChild(div);
           return div;
       }
       function createIcon(parent) {
           var margin=40;
           var padding=10;
           var height=(parent.offsetHeight-margin*2-padding*4)/iconArr.length;
           for(var i=0;i<iconArr.length;i++){
               var img=new Image();
               if(i===0) pre=img;
               img.src=iconArr[i];
               Object.assign(img.style,{
                   position:"absolute",
                   display:"block",
                   border:"2px solid "+ (i===0 ? "#ff9d00" : "rgba(0,0,0,0)"),
                   height:(height-4)+"px",
                   right:"50px",
                   top:margin+(height+(i===0 ? 0 : padding))*i+"px"
               });
               parent.appendChild(img);
               img.addEventListener("click",clickHandler);
           }
       }
       
       function clickHandler(e) {
           var arr=Array.from(this.parentElement.children);
           var index=arr.indexOf(this);
           this.parentElement.style.backgroundImage="url("+imgArr[index]+")";
           pre.style.border="2px solid rgba(0,0,0,0)";
           pre=this;
           pre.style.border="2px solid #ff9d00";
       }
   </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .carousel
        {
            width: 960px;
            height:320px;
            margin: auto;
            position: relative;
            overflow: hidden;
        }
        .imgCon
        {
            width: 4800px;
            height: 320px;
            position: absolute;
            left: 0;
            font-size: 0;
            transition: all 2s;

        }
        .imgCon img{
            width: 960px;
            height: 320px;
        }
        .dot
        {
            list-style: none;
            position: absolute;
            bottom: 20px;
            left:380px
        }
        .dot>li{
            width: 18px;
            height: 18px;
            border-radius: 10px;
            border: 1px solid red;
            background-color: rgba(255,0,0,0);
            float: left;
            margin-left: 20px;

        }
        .dot>li:nth-child(1){
            background-color: rgba(255,0,0,0.6);
        }
        .leftBn,.rightBn
        {
            position: absolute;
            top:140px;
        }
        .leftBn{
            left:20px;
        }
        .rightBn{
            right: 20px;
        }
    </style>
</head>
<body>
    <div class="carousel">
        <div class="imgCon">
            <img src="./img/a.jpeg">
            <img src="./img/b.jpeg">
            <img src="./img/c.jpeg">
            <img src="./img/d.jpeg">
            <img src="./img/e.jpeg">
        </div>
        <ul class="dot">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <img src="img/left.png" class="leftBn">
        <img src="img/right.png" class="rightBn">
    </div>
<script>

    var imgCon,pre,lis;
    var position=0;
    init();
    function init() {
        imgCon=document.querySelector(".imgCon");
        lis=document.getElementsByTagName("li");
        var leftBn=document.querySelector(".leftBn");
        var rightBn=document.querySelector(".rightBn");
        leftBn.addEventListener("click",clickHandler);
        rightBn.addEventListener("click",clickHandler);
        for(var i=0;i<lis.length;i++){
            lis[i].addEventListener("click",dotClickHandler);
        }
        pre=lis[0];
    }

    function dotClickHandler(e) {
        var arr=Array.from(lis);
        position=arr.indexOf(this);
        imgMove();
    }

    function clickHandler(e) {
        if(this.className==="leftBn"){
            position--;
            if(position<0) position=4;
        }else{
            position++;
            if(position>4) position=0;
        }
        imgMove();
    }
    
    function imgMove() {
        imgCon.style.left=-position*960+"px";
        if(pre){
            pre.style.backgroundColor="rgba(0,0,0,0)";
        }
        pre=lis[position];
        pre.style.backgroundColor="rgba(255,0,0,0.6)";
    }
</script>
</body>
</html>

甘乐2333

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 三种轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; }...
复制链接

扫一扫

专栏目录