【JavaScript】实现简易轮播图

最新推荐文章于 2024-06-17 16:07:25 发布

占得一味愚

最新推荐文章于 2024-06-17 16:07:25 发布

阅读量103

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/lw2283432950/article/details/98469344

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   * {
    margin: 0;
    padding: 0;
   }
   /*
    * 设置outer的样式
    */
   #outer {
    /*设置宽和高*/
    width: 520px;
    height: 333px;
    /*居中*/
    margin: 50px auto;
    /*设置背景颜色*/
    background-color: greenyellow;
    /*设置padding*/
    padding: 10px 0;
    /*开启相对定位*/
    position: relative;
    /*裁剪溢出的内容*/
    overflow: hidden;
   }
   /*设置imgList*/
   
   #imgList {
    /*去除项目符号*/
    list-style: none;
    /*设置ul的宽度*/
    /*width: 2600px;*/
    /*开启绝对定位*/
    position: absolute;
    /*设置偏移量*/
    /*
     * 每向左移动520px，就会显示到下一张图片
     */
    left: 0px;
   }
   /*设置图片中的li*/
   
   #imgList li {
    /*设置浮动*/
    float: left;
    /*设置左右外边距*/
    margin: 0 10px;
   }
   /*设置导航按钮*/
   
   #navDiv {
    /*开启绝对定位*/
    position: absolute;
    /*设置位置*/
    bottom: 15px;
    /*设置left值
      outer宽度  520
      navDiv宽度 25*5 = 125
       520 - 125 = 395/2 = 197.5
     * */
    /*left: 197px;*/
   }
   
   #navDiv a {
    /*设置超链接浮动*/
    float: left;
    /*设置超链接的宽和高*/
    width: 15px;
    height: 15px;
    /*设置背景颜色*/
    background-color: red;
    /*设置左右外边距*/
    margin: 0 5px;
    /*设置透明*/
    opacity: 0.5;
    /*兼容IE8透明*/
    filter: alpha(opacity=50);
   }
   /*设置鼠标移入的效果*/
   
   #navDiv a:hover {
    background-color: black;
   }
  </style>
 </head>
 <body>
  <script>
   window.onload=function(){
    var imgList=document.getElementById("imgList");
    var imgArr=document.getElementsByTagName("img");
    //动态设置imgList的宽度
    imgList.style.width=520*imgArr.length+"px";
    //设置导航按钮居中
    var nav=document.getElementById("navDiv");
    //获取outer元素
    var outer=document.getElementById("outer");
    //获取元素的宽度
    nav.style.left=(outer.offsetWidth-nav.offsetWidth)/2+"px";
    //默认第一个按钮背景是黑色
    var index=0;
    var allA=document.getElementsByTagName("a");
    allA[index].style.background="black";
    for(var i=0;i<allA.length;i++){
    // console.log(i);
     //自定义属性
     allA[i].num=i;
     allA[i].onclick=function(){
      index=this.num;
      //设置a标签的样式
      setA();
      //图片移动效果
      move(imgList,'left',-520*index,50);
     }
    }
    //获取行内样式：alert(imgList.style.left);
    //获取style标签里的样式：alert(window.getComputedStyle(imgList)['left']);
    
    /*定义移动的函数
    obj:要移动的对象  imgList
    attr:要改变的对象的属性：left top width height
    target:目标位置
    speed:移动速度
    */
    function move(obj,attr,target,speed){
     clearInterval(obj.timer);//清掉定时器
     //获取当前位置
     var current=parseInt(getStyle(obj,attr));
     //判断当前位置是否大于目标位置，如果大于速度取反
     if(current>target){
      speed=-speed;
     }
     //开启定时器
     obj.timer=setInterval(function(){
      //获取移动开始（原来的）位置
      var oldValue=parseInt(getStyle(obj,attr));
      console.log(oldValue);
      //在原位置上增加
      var newValue=oldValue+speed;
      //判断是否向左或向右移动
      if((speed<0 && newValue<target) ||(speed>0 && newValue>target)){
       newValue=target;
      }
      obj.style.left=newValue+"px";
     },30);
    }
    
    //兼容不同浏览器的获取对象方式
    function getStyle(obj,name){
     if(window.getComputedStyle(imgList)[name]){
      return getComputedStyle(imgList)[name];//返回属性值
     }else{
      //IE
      return obj.currentStyle[name];
     }
    }
    
    function setA(){
     console.log(index+" "+imgArr.length);
     //最后一张图片
     if(index>=imgArr.length-1){
      //index设置为0
      index=0;
      imgList.style.left=0;
     }
     
     for(var i=0;i<allA.length;i++){
      allA[i].style.background="";//清掉其他a标签的背景
     }
     allA[index].style.background="black";
    }
   }
  </script>
  
  <!-- 创建一个外部的div，来作为大的容器 -->
  <div id="outer">
   <!-- 创建一个ul，用于放置图片 -->
   <ul id="imgList">
    <li><img src="../img/1.jpg"/></li>
    <li><img src="../img/2.jpg" /></li>
    <li><img src="../img/3.jpg" /></li>
    <li><img src="../img/4.jpg" /></li>
    <li><img src="../img/5.jpg" /></li>
    <li><img src="../img/3.jpg" /></li>
   </ul>
   <!--创建导航按钮-->
   <div id="navDiv">
    <a href="javascript:;"></a>
    <a href="javascript:;"></a>
    <a href="javascript:;"></a>
    <a href="javascript:;"></a>
    <a href="javascript:;"></a>
   </div>
  </div>
 </body>
</html>

效果图

可通过下方导航按钮自由切换图片，每个导航栏对应着一张图片切换

在这里插入图片描述

占得一味愚

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】实现简易轮播图

代码如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } /* * 设置outer的样式 ...
复制链接

扫一扫