用js实现轮播图

最新推荐文章于 2024-07-24 13:45:34 发布

cb++

最新推荐文章于 2024-07-24 13:45:34 发布

阅读量72

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_44768794/article/details/120129312

版权

在这里插入图片描述

index.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>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="middle-banner">
    <div class="top-md-ban" id="slider">
        <ul class="lunbotu">
            <li><a href="#"><img src="images/58db5212Nad79f4bc.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/58d32f0aN8888c17a.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/58db5212Nad79f4bc.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/58d880eaN452778ff.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/58db7ea6N44bf1b08.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/58dcb13cN89094d67.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/58d32f0aN8888c17a.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/58db5212Nad79f4bc.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/58dcb13cN89094d67.jpg" alt=""></a></li>
        </ul>
        <div class="pages">
            <a href="javascript:void(0)" class="arrow-left">&lt;</a>
            <a href="javascript:void(0)" class="arrow-right">&gt;</a>
        </div>
        <div class="slder-item">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li class="color-red"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div class="btm-md-ban">
        <div class="ban-left"><a href="#"><img src="images/ban1.jpg" alt=""></a></div>
        <div class="ban-right"><a href="#"><img src="images/ban2.jpg" alt=""></a></div>
    </div>
</div>
<script src="js/index.js"></script>
</body>
</html>

index.css

li {
  list-style: none;
}
/*轮播图*/
.middle-banner {
  width: 790px;
  float: left;
  height: 480px;
  margin-left: 10px;
}

.middle-banner .top-md-ban {
  width: 790px;
  height: 340px;
  overflow: hidden;
  position: relative;
}

.middle-banner .top-md-ban .lunbotu {
  position: absolute;
  width: 1000%;
  left: 0;
  top: 0;

}

.middle-banner .top-md-ban .lunbotu li {
  float: left;
}

/*焦点div*/
.top-md-ban .pages {
  width: 790px;
  height: 60px;
  margin-top: -30px;
  top: 50%;
  left: 0;
  position: absolute;
  cursor: pointer;
  opacity: 0;
}

.top-md-ban .pages {
  position: relative;
}

.top-md-ban .pages a {
  width: 30px;
  height: 60px;
  display: block;
  text-align: center;
  line-height: 60px;
  color: #FFF;
  background-color: rgba(0, 0, 0, .2);
  font: 400 22px/60px "宋体";
}

.top-md-ban .pages a:hover {
  background-color: rgba(0, 0, 0, .7);
}

.pages .arrow-left {
  float: left;
}

.pages .arrow-right {
  float: right;
}

/*小按钮*/
.slder-item {
  width: 166px;
  height: 20px;
  background-color: transparent;
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -84px;
  padding: 0 8px;
}

.slder-item ul {
  width: 182px;
}

.slder-item li {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  float: left;
  background-color: #FFF;
  margin-top: 3px;
  margin-right: 10px;
  cursor: pointer;
}

.slder-item .color-red {
  background-color: #DB192A
}

.btm-md-ban {
  margin-top: 10px;
}

.btm-md-ban .ban-left {
  float: left;

}

.btm-md-ban .ban-right {
  float: right;
}

index.js

// var slider = document.getElementById('slider')
// var ulObj = slider.children[0]
// var liItem = slider.children[0].children

// // 轮播图
// for (var i = 0; i < liItem.length; i++) {

// }
//轮播图切换效果实现
//获取所有的li标签
//获取轮播图外面的ul
var ulObj = my$("slider").children[0];
var list = my$("slider").children[0].children;
//左右焦点的div
var page = my$("slider").children[1];
//左右焦点中的左边按钮
var left = page.children[0];
//左右焦点中的右边按钮
var right = page.children[1];
//获取小按钮
var pic = 0;
var smallBtn = my$("slider").children[2].children[0].children;
for (i = 0; i < smallBtn.length; i++) {
  smallBtn[i].setAttribute("index", i);
  smallBtn[i].onmouseover = function () {
    for (var j = 0; j < smallBtn.length; j++) {
      smallBtn[j].className = "";
    }
    this.className = "color-red";
    pic = parseInt(this.getAttribute("index"));

    animate(ulObj, { "left": -(pic * my$("slider").offsetWidth) });
  };
}

//自动播放轮播图
var timeId = null;
timeId = setInterval(rightClickHandle, 1000);
//显示左右焦点
my$("slider").onmouseover = function () {
  animate(page, { "opacity": 1 });
  clearInterval(timeId);//干掉自动播放
};
//隐藏左右焦点
my$("slider").onmouseout = function () {
  animate(page, { "opacity": 0 });
  //继续自动播放
  timeId = setInterval(rightClickHandle, 1000);
};
//左按钮
left.onclick = function () {
  if (pic == 0) {
    pic = list.length - 1;
    ulObj.style.left = -pic * my$("slider").offsetWidth + "px";
  }
  pic--;
  //移动图片
  animate(ulObj, { "left": -(pic * my$("slider").offsetWidth) });
  for (var i = 0; i < smallBtn.length; i++) {
    smallBtn[i].className = "";
  }
  smallBtn[pic].className = "color-red";
};

//右按钮
right.onclick = rightClickHandle;
function rightClickHandle() {
  if (pic == list.length - 1) {
    pic = 0;
    ulObj.style.left = -pic * my$("slider").offsetWidth + "px";
  }
  pic++;
  animate(ulObj, { "left": -(pic * my$("slider").offsetWidth) });
  //移除小按钮的所有的样式
  for (var i = 0; i < smallBtn.length; i++) {
    smallBtn[i].className = "";
  }
  if (pic == list.length - 1) {//如果最后一个图片,让第一个小按钮有样式
    smallBtn[0].className = "color-red";
  } else {
    //设置对应的小按钮有样式
    smallBtn[pic].className = "color-red";
  }

}
function my$(id) {
  return document.getElementById(id);
}
//缓动动画函数的封装
function animate(element, json, fn) {
  clearInterval(element.timeId);
  element.timeId = setInterval(function () {
    var flag = true;
    for (var attr in json) {
      if (attr == "opacity") {
        var current = getStyle(element, attr) * 100;
        var target = json[attr] * 100;
        //每次移动的步数
        var step = (target - current) / 10;
        //每次移动步数都是整数(比较大的数字)
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        current += step;//移动后的当前的像素
        element.style[attr] = current / 100;
      } else if (attr == "zIndex") {
        element.style[attr] = json[attr];
      } else {
        var current = parseInt(getStyle(element, attr));
        var target = json[attr];
        //每次移动的步数
        var step = (target - current) / 10;
        //每次移动步数都是整数(比较大的数字)
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        current += step;//移动后的当前的像素
        element.style[attr] = current + "px";
      }
      if (current != target) {//到达目标后停止计时器
        flag = false;
      }
    }
    if (flag) {
      clearInterval(element.timeId);//清理计时器
      if (fn) {
        fn();
      }
    }
    console.log("target:" + target + ",current:" + current + ",step:" + step);
  }, 20);
}
function getStyle(element, attr) {
  return element.currentStyle ? element.currentStyle[attr] : window.getComputedStyle(element, null)[attr];
}

cb++

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用js实现轮播图

index.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&gt.
复制链接

扫一扫