英雄联盟轮播图手动轮播

编程之家收集整理的这篇文章主要介绍了英雄联盟轮播图手动轮播编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

感谢大朋友们小朋友们的催更,这个月都在努力复习功课,无异于对待期末考试。
通过前一个个小案例越做越熟悉,代码越来越简洁,整体架构越来越规范
一步一步循序渐进,今天写一个英雄联盟轮播图手动轮播练练手。

清除网页认距离

  /* 清除网页认距离*/
  *{margin:0;
    padding:0;
  }
  .banner{
    wIDth: 820px;
    height: 380px;
    background-color:blue;
  }
  .banner_img ul{
    wIDth: 4100px;

过渡动画

    /* 过渡动画 */
   Transition:all 0.2s;
  }

图片大小长度,宽度,颜色,边距

  .banner_img{
    wIDth: 820px;
    height: 340px;
    background-color:red; 
    overflow:hIDden;  
  }
 .banner_img li{
    wIDth: 820px;
    height: 380px;
    float:left;

清除li前面的列表符号

    List-style:none
  }
  .banner_nav{
    wIDth: 820px;
    height: 40px;
    background-color:green;
  }

后代选择器,先找容器,再找内部标签

  .banner_nav li{
    wIDth: 164px;
    height: 40px;

/* 由于li网页中属于块元素,独立成行 /
/
浮动属性,让原本上下排列的li,并排 */

float:left;

清除li前面的列表符号

  List-style:none;
/* 字号是:14px; */
Font-size: 14px;
/* 文本的水平居中 */
text-align:center;
/* 文本垂直居中 单行文本垂直居中,当行高等于当前容器的高度时内部文字垂直居中 */
line-height: 40px;

设置背景颜色

    background-color:#e3e2e2;
  }
  .banner_nav .active{
    background-color:white;
    color:#ab8e66;

边框增加元素的实际占位

border-bottom: 2px solID #cea861;
height: 38px;
}

body部分代码

//创建一个div标签,用于编写整个轮播图结构,命令.banner
  <div class="banner">

 <!--导航据banner中内容,划分成img区域,以及导航区域,区域div -->
 <div class="banner_img">
 <!-- banner_img轮播图的显示窗口,只显示一张图片   -->
 <!-- 滚动式轮播图,将图片并排显示   -->
 <!-- 并列结构,无序联表ul>li -->
 <!-- 需要给容器ul添加宽度,可以盛放五个元素并排显示 -->
   <ul ID="imgWrap">
     <li>
       <img src="https://ossweb-img.qq.com/upload/aDW/image/977/20220513/1880117fcca33efc8c78ca9710544c12.jpeg"alt="">
     </li>
    <li>
      <img src="https://ossweb-img.qq.com/upload/aDW/image/977/20220513/251c4edc9aba721754a63c291a04f826.jpeg"alt="">
    </li>
    <li>
      <img src="https://ossweb-img.qq.com/upload/aDW/image/977/20220513/5fa9fbc22102906860ed52cb134cf17b.jpeg"alt="">
    </li>
    <li>
      <img src="https://ossweb-img.qq.com/upload/aDW/image/977/20220513/1850af58906b7be093c3f0fee9177d71.jpeg"alt="">
    </li>
    <li>
      <img src="https://ossweb-img.qq.com/upload/aDW/image/977/20220513/4dfbd939f2401ca8095cc7c679355618.jpeg"alt="">
    </li>
 </ul>
 
 </div> 
 <div class="banner_nav">
 <!-- 网页还原过程中,如果需要编写对应的并列结构,直接使用无序列表进行开发ul>li -->
        <ul ID="navWrap">
            <li class="active"ID="li1">EDG冠军战队皮肤</li>
            <li ID=li2>EDG冠军荣耀宝箱</li>
            <li ID=li3>西部魔影2022</li>
            <li ID=li4>西部魔影通行证</li>
            <li ID=li5>2022西部秘宝</li>
          </ul>
      </div>
   </div>
   <script>

找到对应的事件源:找到五个li标签放入数组中
不推荐document.getElementByID(“li”)找li标签

  var navWrap=document.getElementByID("navWrap")//先找事件源的容器
  var lis=navWrap.getElementsByTagname("li")//找到navWrap下方所有的li
  var imgWrap=document.getElementByID("imgWrap")

利用循环分发指定的事件

   for(var n=0;n<lis.length;n++){
    lis[n].index=n//分发索引值
    lis[n].onmouseenter=function(){
     // console.log(1)
   //清楚其他的选中样式  排他法
   //先将所有的li的class都清除
  for(var j=0;j<lis.length;j++){
       lis[j].classname=""
     }
     this.classname="active"

让指定ul 移动到对应位置 当前元素的索引值 *820
// console.log(this.index)

   imgWrap.style.marginleft=-820*this.index+"px"
}
  } 

英雄联盟轮播图逻辑

在这里插入图片描述


在这里插入图片描述

原来script部分代码的大约用90多行甚至更多,
这次所需代码不超过15行,
工程量足足减少一半,大大提高了效率,减小了工作量。

英雄联盟轮播图

解锁查看全部内容

付费后查看完整内容
限时 微信扫码支付 ¥9.9 19.9

总结

以上是编程之家为你收集整理的英雄联盟轮播图手动轮播全部内容,希望文章能够帮你解决英雄联盟轮播图手动轮播所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

CSS相关文章

谁说程序员不懂浪漫! -- 送女朋友的网页小惊喜,感动她100年。
在开发中,如果没有动画的话,整个页面内容的显示和隐藏会非常的生硬!不好看,为了给予一定的用户体验,进入今天的主题React框架本身并没有提供任何动画相关的API,所以如果需要使用的话可以使用一个第三方库react-transition-group Vue中为我们提供了一些内置的组件和对应的API来完成动画一、Transition组件的原理当插入或删除包含在transition组件中的元素时,vue将会做以下处理就是会自动把类加入到transition组件下的根元素中添加或者删..
用html、css、JavaScript做的小特效实现功能:点击下方图片可翻转到对应图片实现思路:魔方中用标签包含图片,方便用包裹,后面给ul添加3D模式便可进行翻折
毕业那天都不许给我哭,给我微笑着滚蛋。
html+css+js制作LOL官网,web前端大作业(3个页面+模拟登录+链接)
圆环进度条 两种实现方式
网页简介:经过pink老师的课程学习之后,制作了一个简单的静态页面,其中的重点内容是对所学css样式的编写格式,顺序等进行规范练习,对页面结构的规划安排,对html,css基本内容的熟练,对浮动,定位,盒子模型嵌套的运用等。
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注