Javascript应用(轮播图进阶)

最新推荐文章于 2024-10-10 10:50:43 发布
不修×蝙蝠
最新推荐文章于 2024-10-10 10:50:43 发布
阅读量366
点赞数 1
本文链接：https://blog.csdn.net/m0_74977981/article/details/142138021
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){   
            // 获取轮播容器
            var c  = document.querySelector(".content")
            var img_box  = document.querySelector(".img_box")
            img_box.style.left="-800px" 
         

// ==================自动播放======================
            var change=function(offset){  //为解决重复内容，所以用函数替代
            //     var newoffset=parseInt(img_box.style.left) + offset
            //     if(newoffset < -2400){
            //         img_box.style.left="0px"
            //     }else if(newoffset > 0){
            //         img_box.style.left="-2400px"
            //     } else{
            //          img_box.style.left=newoffset + "px"
            //     }
               
            // }
            // var time=setInterval(function(){
            //     change(-800)  // 传参进去
            // },2000) 自动播放版本
      //获取图片切换的目标位置
      var newoffset=parseInt(img_box.style.left) + offset
      var speed=offset / 100
      //慢慢切换
      var move=function(){
        img_box.style.left=parseInt(img_box.style.left) + speed + "px"
        if(parseInt(img_box.style.left)!=newoffset){
            setTimeout(move,10)
        }else{
            if(parseInt(img_box.style.left)==-4000){
                img_box.style.left="-800px"
            }else if(parseInt(img_box.style.left)==0){
                img_box.style.left="-3200px"
            }
        }
      }  
      move()
    }
// ==================生成左右切换的按钮==============
      var ul=document.createElement("ul")
      ul.className="btns"
      var left_li=document.createElement("li")
      left_li.innerText="<"
      var right_li=document.createElement("li")
      right_li.innerText=">"
    //   将生成的两个添加到创建的ul盒子中
      ul.appendChild(left_li)
      ul.appendChild(right_li)
    //   将创建的ul连带加入其中的li添加到content中
      c.appendChild(ul)
// ================按钮点击=======================
      left_li.onclick=function(){
        change(800)
        index--;
        if(index < 0){
            index = 3
        }
        highlight()
      }
      right_li.onclick=function(){
        change(-800)
          index++
        if(index>3){
            index=0
        }
        highlight()
      }
    var time=setInterval(function(){  //自动轮播
                change(-800)  // 传参进去
    },2000) 
// 解决自动轮播和手动点击的冲突问题
// 即鼠标进入容器，则停止动画，离开再开启动
     c.onmouseenter=function(){
        clearInterval(time)
     }
     c.onmouseleave=function(){
        time=setInterval(right_li.onclick,2000)
        // time=setInterval(function(){
        //         change(-800)  
        //     },2000) 上述表达方式等同于此注释
     }

   // 任意页面切换
       var list=document.createElement("ul")
       list.className="list"
    //获取图片数量
       var img_box_li=document.querySelectorAll(".img_box li")
    //    console.log(img_box_li)
       for(var i=0;i<img_box_li.length;i++){
        var li=document.createElement("li")
        li.innerText=i+1
        if(i == 0){
            li.className="current" //给选中的第一个加特殊样式 
        }
        list.appendChild(li)
       }
         c.appendChild(list)
 
         var list_li=document.querySelectorAll(".list li")
         for(var j=0;j<list_li.length;j++){
            list_li[j].onclick=function(){

                var new_index = this.innerText-1
                change((index-new_index)*800)  //移动距离就是（原来-现在）*800图片单位
                index = new_index
                highlight()
            }
           
         }
         
         // =================按钮样式切换=====================
         var index = 0  //协助变量(定义一个游标，来记录当前点点的索引值)
         var highlight=function(){
            for(var k=0;k<list_li.length;k++){
                if(k==index){
                    list_li[k].className= "current"  //即点击谁，给谁加current的class即设定current的形式
                }else{
                    list_li[k].className=""  //火力覆盖掉所有其他的元素class属性
                }     
            }
               
        }

        // 初始化辅助无缝轮播图片
        var last_li=img_box.firstElementChild.cloneNode(true) //复制图1
        var first_li=img_box.lastElementChild.cloneNode(true)

        img_box.insertBefore(first_li,img_box.firstElementChild)
        img_box.appendChild(last_li)
    }


    </script>
      <style>
        *{
            padding: 0%;
            margin: 0%;
        }

        .title{
            width:480px;
            margin:50px auto;
            box-shadow: 0 0 5px salmon;
            border-radius: 30px;
           text-align: center;
            /* background: salmon; */
        }

        .title h1{
            font-family: xx;
            font-size:40px;
        }
        @font-face{
            font-family: xx;
            src:url(12.ttf);
        }
        img{
            height:500px;

        }
        .content{
            width:800px;
            height:500px;
            margin: 100px auto;
            background: wheat;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 100px rgb(102, 102, 116);
            border-radius: 20px;
        }
        .content .img_box{
            width: 4800px;
            height:500px;
            list-style: none;
            background: wheat;
            display:flex;
            position: absolute;
            left:0px;
            border-style:dashed;
            border-color: slategray;
            

        }
        .content .img_box li{
            list-style: none;
            width:800px;
            height:500px;

        }

        .content .img_box li img{
            width: 100%;
            height:100%;
        }
        .content .btns{
            position: absolute;
            /* html定位中不涉及层级，那么html中后出现的元素将出现在上层 */
            width:90%;
            display: flex;
            /* background: darkcyan; */
            justify-content: space-between;
            margin-top: 230px;
            margin-left: 38px;
            
        }
        .content .btns li{
            list-style: none;
            text-align: center;
            color:#fff;
            width:50px;
            height:50px;
            border-radius: 100px;
            background-color: rgba(0, 0, 0, 0.25);
            line-height: 50px;
            cursor: pointer;
        }
        .content .btns li:hover{
            background-color: rgba(0, 0, 0, 0.35);
        }

        .content .list{
            position: absolute;
            width:25%;
            display: flex;
            /* background: seashell; */
            justify-content: space-between;
            margin-top: 430px;
            margin-left: 300px;
        }
        .content .list li{
            list-style: none;
            width:20px;
            height:20px;
            background:rgba(255, 255, 255, 0.4);
            cursor: pointer;
            color:#000;

        }
        .list li.current{
            background: rgba(0, 0, 0, 0.4); 
            color:#fff
        }
       
        
 
       
    </style>
</head>
<body>
    <div class="title"> <h1>小猫你可以吃芝士汉堡儿</h1></div>
    <div class="content">
       
        <ul class="img_box">   <!-- ul胶卷 -->
            <li>
                <img src="mm3.jpg" alt="">
            </li>
            <li>
                <img src="mm4.jpg" alt="">
            </li>
            <li>
                <img src="mm2.jpg" alt="">
            </li>
            <li>
                <img src="mm1.jpg" alt="">
            </li>
        </ul>
    </div>
    <!-- 一些为了做效果而诞生的内容，可以直接用JavaScript生成 -->
</body>
</html>