js滚播图实现LOL效果图总结一

最新推荐文章于 2022-11-06 14:31:42 发布

打码中...

最新推荐文章于 2022-11-06 14:31:42 发布

阅读量196

点赞数

文章标签： javascript css html5

本文链接：https://blog.csdn.net/m0_52669454/article/details/116860190

版权

一、学生代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .active{
     border: 5px solid rgb(43, 226, 211);
     box-sizing: border-box;
  
    }

.properties{

/* display: flex; */
width: 6860px;
height: 500px;
 position:absolute;
 left: 0px;  
transition: 1s;
}
.properties img{
    width: 980px;
    height: 500px;
    float: left;
    
}


.tip2{
    display: flex;
    position: absolute;
    left: 725px;
    top: 430px;
    z-index: 1 ;
   
}

.tip3{
    width: 980px;
    height: 500px;
     overflow: hidden; 
     position: relative; 
    margin: auto;
}

.a{
 font-size: 30px;
 color:coral;
 position: absolute;
 left: 880px;
 top: 380px;
 z-index: 1;
}
 
.tip2 img{
    width: 60px;
    height: 70px;
} 

</style>

</head>
<body>
   
  
    <div class="tip2">
        <img src="./small266000.jpg" alt=""  class="picture1 active "/>
       <img src="./small266001.jpg" alt="" class="picture1 "/>
       <img src="./small266002.jpg" alt="" class="picture1"/>
       <img src="./small266003.jpg" alt="" class="picture1"/>
      
   </div>   
   <div class="tip3">
    <div class="properties">  
        <img src="./big266000.jpg" alt="" class="picture2 " />
       <img src="./big266001.jpg" alt="" class="picture2" />
        <img src="./big266002.jpg" alt="" class="picture2 "/>
        <img src="./big266003.jpg" alt="" class="picture2 "/>
        <img src="./big266007.jpg" alt="">
        <img src="./big266008.jpg" alt="">
        <img src="./big266009.jpg" alt="">
    </div>
</div>
<span class="a">剑魔</span>

<script>
var imgs=document.querySelectorAll('.picture1');
console.log(imgs);
var lastindex=0;
var bigimgs=document.querySelectorAll('.picture2');
var tip=document.querySelector('.properties');
console.log(tip);
var sp=document.querySelector('span')
console.log(sp);
var num=0;
var names=[
'剑魔',
'丰富',
'帆帆',
'仿佛'
];
console.log(  names);

//     for(var i=0;i<imgs.length;i++){
  
//     imgs[i].setAttribute('index',i);
//     bigimgs[i].setAttribute('index',i);
// //    var displacement=i*-980+'px'
// //       console.log(displacement);


// //    imgs[i].setAttribute('wz', displacement);
   
// imgs[i].οnclick=function(){
// num=-980*this.getAttribute('index')

// sp.innerHTML=names[this.getAttribute('index')]
// // console.log(typeof num);
// // console.log(typeof 'num');
// // console.log( typeof num+'px');
// // console.log(typeof  displacement);
// // console.log(this.getAttribute('wz'));
// tip.style.left=num+'px' ;



// //    console.log(this.getAttribute('index'));

// //    console.log(this.getAttribute('wz'));


// //   tip.style.left=this.getAttribute('wz')

   
//  console.log(bigimgs[this.getAttribute('index')]);

// // bigimgs[lastindex].className='picture2';

// //  imgs[lastindex].className='';

// // console.log( this.getAttribute('index'));
// // lastindex=this.getAttribute('index');

// // console.log(lastindex);
// imgs[lastindex].className='';
//  this.className="active"
 
//  lastindex=this.getAttribute('index');
// // bigimgs[this.getAttribute('index')].className='tip '


// }
//    }

imgs.forEach(function(item,index) {
    console.log(item);
    item.onclick=function(){
       imgs[lastindex].className='';
 item.className="active"
 lastindex=index;
 tip.style.left=-980*index+'px' ;
 sp.innerHTML=names[index]
    }
  
});
 

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

二、老师代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .banner-container {
        width: 980px;
        height: 500px;
        margin: auto;
        overflow: hidden;
        position: relative;
      }
      .bigImgs {
        width: 6860px;
        height: 500px;
        position: absolute;
        left: 0;
        transition: 300ms;
      }
      .bigImgs img {
        width: 980px;
        height: 500px;
        float: left;
      }
      .title {
        position: absolute;
        right: 30px;
        bottom: 120px;
        color: white;
        font-size: 20px;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 10px;
      }
      .smallImgs {
        position: absolute;
        right: 30px;
        bottom: 30px;
      }
      .smallImgs img {
        float: left;
        width: 60px;
        height: 60px;
        opacity: 0.7;
      }
      .active {
        box-sizing: border-box;
        border: 5px solid greenyellow;
        opacity: 1 !important;
      }
    </style>
  </head>
  <body>
    <div class="banner-container">
      <div class="bigImgs">
        <img src="./images/big/big266000.jpg" alt="" />
        <img src="./images/big/big266001.jpg" alt="" />
        <img src="./images/big/big266002.jpg" alt="" />
        <img src="./images/big/big266003.jpg" alt="" />
        <img src="./images/big/big266007.jpg" alt="" />
        <img src="./images/big/big266008.jpg" alt="" />
        <img src="./images/big/big266009.jpg" alt="" />
      </div>
      <div class="title">暗裔剑魔</div>
      <div class="smallImgs">
        <img src="./images/small/small266000.jpg" alt="" class="active" />
        <img src="./images/small/small266001.jpg" alt="" />
        <img src="./images/small/small266002.jpg" alt="" />
        <img src="./images/small/small266003.jpg" alt="" />
        <img src="./images/small/small266007.jpg" alt="" />
        <img src="./images/small/small266008.jpg" alt="" />
        <img src="./images/small/small266009.jpg" alt="" />
      </div>
    </div>
    <script>
      var smallImgs = document.querySelectorAll(".smallImgs img");
      var title = document.querySelector(".title");
      var bigImgs = document.querySelector(".bigImgs");
      //   console.log(smallImgs);
      var lastIndex = 0;
      var titles = [
        "暗裔剑魔",
        "仲裁圣骑 亚托克斯",
        "霸天剑魔 亚托克斯",
        "狂鲨 亚托克斯",
        "腥红之月 亚托克斯",
        "腥红之月 亚托克斯 至臻",
        "胜利之剑 亚托克斯",
      ];
      //   for (var i = 0; i < smallImgs.length; i++) {
      //     smallImgs[i].setAttribute("index", i);
      //     smallImgs[i].onclick = function () {
      //       // console.log(this);
      //       smallImgs[lastIndex].className = "";
      //       this.className = "active";
      //       title.innerHTML = titles[this.getAttribute("index")];
      //       bigImgs.style.left = -980 * this.getAttribute("index") + "px";
      //       lastIndex = this.getAttribute("index");
      //     };
      //   }
      smallImgs.forEach(function (item, index) {
        item.onclick = function () {
          smallImgs[lastIndex].className = "";
          item.className = "active";
          title.innerHTML = titles[index];
          bigImgs.style.left = -980 * index + "px";
          lastIndex = index;
        };
      });
    </script>
  </body>
</html>

三、对所做的小插件的总结：
1.做一个小插件要先做html(文档/页面)布局，再做他的css属性，最后再写js代码，做到条理清晰
2.基础知识点运用要熟悉，多敲代码
3.思想（布局思想，实现思想）很重要，要先构思，才会有感觉懂如何去做
4.敲js代码时，要把 html、css相关知识点融合进来（三者融合）
5. 把index属性写进元素（imgs[i]）中: imgs[i].setAttribute(‘index’,i); 获取index的值（i）：getAttribute(‘index’)；

6.定义一个相应的空数组存储对象：
var names=[ '剑魔', '丰富', '帆帆', '仿佛'， ]; 数组名要加s，这样系统才会识别这时一个数组类型，否则识别不出来
7.for循环和onclick存在同步异步问题，for同步事件执行完了，异步事件onclick排在同步事件后面，然后你才点击，执行函数（i的值此时是固定的最大值了）
8.smallImgs.forEach(function (item, index) { item.onclick = function () { } });
forEach这种方法更简单方便，item代表每一个元素，index就是对应的元素下标，写法如上，没有同步异步的烦恼，index就是对应的下标，forEach下的函数会开辟一块空间，对应的index值会存在里面
9.要注意数据类型，可以通过typeof 变量打印数据类型，加” “是字符串，单位（px）前要加加号