美团网轮播图_html-js-css

前言

一个简单的美团轮播图

美团网轮播图

核心：定时器的编写

HTML部分

<div class="carousel">
    <a hred="#" class="links">
      <img src="" alt="" id="image">
    a>
    <div class="left">
      <
    div>
    <div class="right">
      >
    div>
    <div class="number">
      <ul>
        <li>1li>
        <li>2li>
        <li>3li>
        <li>4li>
        <li>5li>
      ul>
    div>
  div>
  div>

CSS部分

.carousel{
  width: 550px;
  height: 240px;
  cursor: pointer;
  margin: 0 auto;
  position: relative;
  /* border: 1px solid red; */
}
.left{
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background-color: #222;
  position: absolute;
  top: 100px;
  left: 15px;
  line-height: 40px;
  font-size: 30px;
  color: #fff;
  opacity: .7;
  display: none;
}
.right{
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background-color: #222;
  position: absolute;
  top: 100px;
  right: 15px;
  line-height: 40px;
  font-size: 30px;
  color: #fff;
  opacity: .7;
  display: none;
}
.number{
  width: 150px;
  height: 5px;
  float: left;
  position: absolute;
  top: 200px;
  left: 190px;
}
.number li{
  list-style: none;
  width: 10px;
  height: 2px;
  text-align: center;
  background-color: #ccc;
  float: left;
  font-size: 0px;
  opacity: .7;
  margin-left: 5px;
}
#image{
  width: 100%;
  height: 100%;
}

JavaScript部分

var carousel = document.querySelector('.carousel');
    var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var numberList = document.querySelector('.number').getElementsByTagName('li');

    // 初始化
    image.src = '1.jpg'
    var add = 1
    // numberList[0].style.background = '#fff';
    // 鼠标移入轮播图区域显示箭头
    carousel.onmouseover = function(){
      left.style.display = "block";
      right.style.display = "block";
      // 清除轮播
      clearInterval(timer);
    }
    // 鼠标移开隐藏箭头
    carousel.onmouseout = function(){
      left.style.display = "none";
      right.style.display = "none";
      lunbo()
    }
    // 点击左箭头切换轮播图
    left.onclick = function(){
      add = add - 1;
      if(add < 1){
        add = 5
      }
      image.src = add + '.jpg'
      show_li(add);
    }
    right.onclick = function(){
      add = add - 1;
      if(add > 5){
        add = 1
      }
      image.src = add + '.jpg'
      show_li(add);
    }
    // 定时轮播
    function lunbo(){
      timer = setInterval(function(){
        add = add + 1;
        if(add > 5){
          add = 1;
        }
        image.src = add + '.jpg';
        show_li(add);
      },1000)
    }
    // 获取li的下标的高亮显示
    function show_li(add){
      let x = add - 1;
      for(let i = 0;i<numberList.length;i++){
        numberList[i].style.background = '#ccc';
        if(x == i){
          numberList[i].style.background = '#fff'
        }
      }
    }
    lunbo()

所有代码

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>美团网轮播图title>
  <style>
    .carousel{
      width: 550px;
      height: 240px;
      cursor: pointer;
      margin: 0 auto;
      position: relative;
      /* border: 1px solid red; */
    }
    .left{
      width: 40px;
      height: 40px;
      border-radius: 40px;
      background-color: #222;
      position: absolute;
      top: 100px;
      left: 15px;
      line-height: 40px;
      font-size: 30px;
      color: #fff;
      opacity: .7;
      display: none;
    }
    .right{
      width: 40px;
      height: 40px;
      border-radius: 40px;
      background-color: #222;
      position: absolute;
      top: 100px;
      right: 15px;
      line-height: 40px;
      font-size: 30px;
      color: #fff;
      opacity: .7;
      display: none;
    }
    .number{
      width: 150px;
      height: 5px;
      float: left;
      position: absolute;
      top: 200px;
      left: 190px;
    }
    .number li{
      list-style: none;
      width: 10px;
      height: 2px;
      text-align: center;
      background-color: #ccc;
      float: left;
      font-size: 0px;
      opacity: .7;
      margin-left: 5px;
    }
    #image{
      width: 100%;
      height: 100%;
    }
  style>
head>
<body>
  <div class="carousel">
    <a hred="#" class="links">
      <img src="" alt="" id="image">
    a>
    <div class="left">
      <
    div>
    <div class="right">
      >
    div>
    <div class="number">
      <ul>
        <li>1li>
        <li>2li>
        <li>3li>
        <li>4li>
        <li>5li>
      ul>
    div>
  div>
  div>
  <script>
    var carousel = document.querySelector('.carousel');
    var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var numberList = document.querySelector('.number').getElementsByTagName('li');

    // 初始化
    image.src = '1.jpg'
    var add = 1
    // numberList[0].style.background = '#fff';
    // 鼠标移入轮播图区域显示箭头
    carousel.onmouseover = function(){
      left.style.display = "block";
      right.style.display = "block";
      // 清除轮播
      clearInterval(timer);
    }
    // 鼠标移开隐藏箭头
    carousel.onmouseout = function(){
      left.style.display = "none";
      right.style.display = "none";
      lunbo()
    }
    // 点击左箭头切换轮播图
    left.onclick = function(){
      add = add - 1;
      if(add < 1){
        add = 5
      }
      image.src = add + '.jpg'
      show_li(add);
    }
    right.onclick = function(){
      add = add - 1;
      if(add > 5){
        add = 1
      }
      image.src = add + '.jpg'
      show_li(add);
    }
    // 定时轮播
    function lunbo(){
      timer = setInterval(function(){
        add = add + 1;
        if(add > 5){
          add = 1;
        }
        image.src = add + '.jpg';
        show_li(add);
      },1000)
    }
    // 获取li的下标的高亮显示
    function show_li(add){
      let x = add - 1;
      for(let i = 0;i<numberList.length;i++){
        numberList[i].style.background = '#ccc';
        if(x == i){
          numberList[i].style.background = '#fff'
        }
      }
    }
    lunbo()
script>
body>
html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/945569.html

美团网轮播图

发表评论

评论列表（0条）