时间戳

首页 > 解决方案 > 如何使用左右箭头制作圆形效果？

javascript - 如何使用左右箭头制作圆形效果？

问题描述

这是我在 CodePen 中的代码： https ://codepen.io/Krzysiek_39/pen/poNLbgx

这可以通过属性border-radius: 50%;来完成。.

这是在这个网站上的样子： https ://www.studiointerbit.pl/kontakt/

如何使用左右箭头制作圆形效果？

我将非常感谢有效的帮助。

<div class="text">
    <a class="refresh" title="A website refresh">Website</a>
</div>

<div class="menu">
    <a>MENU</a>
</div>

<div class="slider_wrapper">

    <div class="slider">
    
        <div class="slider_img_wrapper">
            <a href="#"><img src="https://source.unsplash.com/1600x900/?art" alt=""><span class="caption">Caption for slide 1</span></a>
        </div>
        
        <div class="slider_img_wrapper">
            <a href="#"><img src="https://source.unsplash.com/1600x900/?action" alt=""><span class="caption">Caption for slide 2</span></a>
        </div>
        
        <div class="slider_img_wrapper">
            <a href="#"><img src="https://source.unsplash.com/1600x900/?war" alt=""><span class="caption">Caption for slide 3</span></a>
        </div>
        
        <div class="slider_img_wrapper">
            <a href="#"><img src="https://source.unsplash.com/1600x900/?crime" alt=""><span class="caption">Caption for slide 4</span></a>
        </div>
        
        <div class="slider_img_wrapper">
            <a href="#"><img src="https://source.unsplash.com/1600x900/?drama" alt=""><span class="caption">Caption for slide 5</span></a>
        </div>
        
        <div class="slider_img_wrapper">
            <a href="#"><img src="https://source.unsplash.com/1600x900/?sci-fi" alt=""><span class="caption">Caption for slide 6</span></a>
        </div>
        
    </div>
    
    <div class="slider_objects">
    
        <div class="slider_btn prev_btn"><i class="fas fa-chevron-left fa-2x"></i></div>
        <div class="slider_btn next_btn"><i class="fas fa-chevron-right fa-2x"></i></div>
        
        <ul class="slider_list_wrapper">
            <li class="slider_list active_slide"></li>
            <li class="slider_list"></li>
            <li class="slider_list"></li>
            <li class="slider_list"></li>
            <li class="slider_list"></li>
            <li class="slider_list"></li>
        </ul>
        
    </div>
    
</div>

标签： javascripthtmlcss

解决方案

您可以::before根据需要使用选择器并相应地对其进行样式设置。

$(document).ready(function() {
  $('.refresh').click(function(e) {
    location.reload();
  });

});



//-----------------------------------------



var active_img_num = 0;
var slide_interval_time = 5;
var slide_during_time = 2;
var slide_fast_during_time = 2;

var slide_timer;
var num_of_img = 1;
var num_of_img_tag = 1;
var sliding_now = false;

$
  (
    function() {
      var div_tag, a_tag, img, cap;

      num_of_img_tag = $(".slider_img_wrapper").length
      num_of_img = $(".slider_img_wrapper img").length;
      active_img_num = adjust_img_num(active_img_num)["img_tags"];

      for (var i = 0; i < num_of_img_tag; i++) {
        $(".slider_img_wrapper").eq(adjust_img_num(active_img_num + (Math.pow(-1, i + 1)) * Math.ceil(i / 2))["img_tags"]).css("opacity", 1);
        $(".slider_img_wrapper").eq(adjust_img_num(active_img_num + (Math.pow(-1, i + 1)) * Math.ceil(i / 2))["img_tags"]).css("transform", "translateX(" + (100 * Math.pow(-1, i + 1) * Math.ceil(i / 2)) + "%)");
      }

      next_img_num = adjust_img_num(active_img_num + 1)["img_tags"];

      slide_timer = setInterval(slide, slide_interval_time * 1000);

      $(".slider_list_wrapper li").removeClass("active_slide");
      $(".slider_list_wrapper li").eq(active_img_num).addClass("active_slide");

      $(".slider_list").css("transition", slide_during_time + "s");
    }
  );

function adjust_img_num(img_num) {

  var result = [];

  if (!$.isNumeric(img_num)) {
    result["images"] = 0;
    result["img_tags"] = 0;
  } else if (img_num < 0) {
    result["images"] = (num_of_img + (img_num % num_of_img)) % num_of_img;
    result["img_tags"] = (num_of_img_tag + (img_num % num_of_img_tag)) % num_of_img_tag;
  } else {
    result["images"] = img_num % num_of_img;
    result["img_tags"] = img_num % num_of_img_tag;
  }

  return result;
}



function search_direction(now_positon = 0, goal_position = 0) {
  var i = 0;
  while (true) {
    if ((goal_position % num_of_img) == adjust_img_num(now_positon + i)["images"]) {
      return {
        "plus": true,
        "target_num": adjust_img_num(now_positon + i)["img_tags"],
        "move_value": i
      };
    } else if ((goal_position % num_of_img) == adjust_img_num(now_positon - i)["images"]) {
      return {
        "plus": false,
        "target_num": adjust_img_num(now_positon - i)["img_tags"],
        "move_value": -i
      };
    }
    i++;
  }

}

function slide(next_img = next_img_num, duration = slide_during_time, easing = "easeInOutCubic") {
  $
    (
      function() {

        next_img = adjust_img_num(next_img)["img_tags"];

        if (sliding_now) {
          return;
        } else {
          sliding_now = true;
        }

        var target_img_info = search_direction(active_img_num, next_img);

        if (Math.abs(target_img_info["move_value"]) >= 2) {
          move_images(active_img_num + (target_img_info["plus"] ? 1 : -1), next_img, slide_fast_during_time, "linear");
        } else {
          move_images(next_img, next_img, duration, easing);
        }

        function move_images(next_img, target_img = next_img, duration = slide_during_time, easing = "swing") {

          var translateX_matrix = [];
          $(".slider_img_wrapper").css("transition", duration + "s");



          for (var i = 0; i < num_of_img_tag; i++) {
            translateX_matrix = $(".slider_img_wrapper").eq(i).css("transform").slice(7, -1).split(",");
            translateX_matrix[4] = parseInt(translateX_matrix[4]) - (target_img_info["move_value"]) * parseInt($(".slider_img_wrapper").css("width"));
            $(".slider_img_wrapper").eq(i).css("transform", "matrix(" + translateX_matrix.join(",") + ")").css("left", "0%");
          }

          $(".slider_list_wrapper li").removeClass("active_slide");
          $(".slider_list_wrapper li").eq(target_img % num_of_img).addClass("active_slide");


          setTimeout
            (
              function() {
                active_img_num = adjust_img_num(target_img)["img_tags"];
                next_img_num = adjust_img_num(target_img + 1)["img_tags"];
                $(".slider_img_wrapper").css("transition", "0s");

                for (var i = 0; i < num_of_img_tag; i++) {
                  $(".slider_img_wrapper").eq(adjust_img_num(active_img_num + Math.pow(-1, i + 1) * Math.ceil(i / 2))["img_tags"]).css("opacity", 1);
                  $(".slider_img_wrapper").eq(adjust_img_num(active_img_num + Math.pow(-1, i + 1) * Math.ceil(i / 2))["img_tags"]).css("transform", "translateX(" + (100 * Math.pow(-1, i + 1) * Math.ceil(i / 2)) + "%)");
                }
                sliding_now = false;
              },
              duration * 1000
            );

          clearInterval(slide_timer);
          slide_timer = setInterval(slide, slide_interval_time * 1000);

        }
      }
    );
}

$(".slider_objects").on(
  "click touchend",
  ".prev_btn",
  function() {
    clearInterval(slide_timer);
    slide_timer = setInterval(slide, slide_interval_time * 1000);
    slide(adjust_img_num(active_img_num - 1)["img_tags"]);
  }
);

$(".slider_objects").on(
  "click touchend",
  ".next_btn",
  function() {
    clearInterval(slide_timer);
    slide_timer = setInterval(slide, slide_interval_time * 1000);
    slide(adjust_img_num(active_img_num + 1)["img_tags"]);
  }
);

$(document).on(
  "click touchend",
  ".slider_list",
  function() {
    var clicked_num = $(".slider_list").index(this);
    clicked_num = search_direction(active_img_num, clicked_num)["target_num"];
    slide(clicked_num);
  }
);

document.addEventListener(
  'touchstart',
  function(event) {
    if (sliding_now) {
      return;
    }
    event.preventDefault();
    touch_x1 = event.changedTouches[0].pageX;
    move_x_percent = 0;
    clearInterval(slide_timer);
  }, {
    passive: false
  }
);

document.addEventListener(
  'touchmove',
  function(event) {
    if (sliding_now) {
      return;
    }
    event.preventDefault();
    touch_x2 = event.changedTouches[0].pageX;

    move_x_percent = (touch_x1 - touch_x2) / window.innerWidth * 100;

    if (false) {
      $(".slider_img_wrapper").eq(adjust_img_num(active_img_num - 1)["img_tags"]).css("left", (-move_x_percent - 100) + "%");
      $(".slider_img_wrapper").eq(active_img_num).css("left", (-move_x_percent) + "%");
      $(".slider_img_wrapper").eq(adjust_img_num(active_img_num + 1)["img_tags"]).css("left", (-move_x_percent + 100) + "%");
    }

    for (var i = 0; i < num_of_img_tag; i++) {
      $(".slider_img_wrapper").css("left", (-move_x_percent) + "%");
    }

    if (Math.abs(move_x_percent) >= 75) {
      if (touch_x1 - touch_x2 > 0) {
        slide(active_img_num + 1, slide_fast_during_time, "easeOutQuart");
      } else {
        slide(active_img_num - 1, slide_fast_during_time, "easeOutQuart");
      }
      touch_x1 = touch_x2;
    }



  }, {
    passive: false
  }
);

document.addEventListener(
  'touchend',
  function(event) {
    if (sliding_now) {
      return;
    }
    event.preventDefault();
    touch_x3 = event.changedTouches[0].pageX;

    if (Math.abs(move_x_percent) > 30) {
      if (touch_x1 - touch_x2 > 0) {
        slide(active_img_num + 1, slide_fast_during_time, "easeOutQuart");
      } else {
        slide(active_img_num - 1, slide_fast_during_time, "easeOutQuart");
      }
    } else {
      slide(active_img_num, slide_fast_during_time, "easeOutQuart");
    }

    move_x_percent = 0;

  }, {
    passive: false
  }
);



//-----------------------------------------



$(document).ready(function() {
  var NavY = $('.menu-container').offset().top;

  var stickyNav = function() {
    var ScrollY = $(window).scrollTop();

    if (ScrollY > NavY) {
      $('.menu').addClass('sticky');
    } else {
      $('.menu').removeClass('sticky');
    }
  };

  stickyNav();

  $(window).scroll(function() {
    stickyNav();
  });
});
body {
  background-color: #bdbdbd;
  font-family: Verdana;
  margin: 0;
  position: relative;
  height: 220vh;
  z-index: -100;
}

.header-container {
  background-color: #01579b;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 20vh;
  z-index: 4;
}

.header {
  background-color: #191919;
  position: absolute;
  left: 5%;
  margin-top: 20px;
}

.header .text a {
  color: #77A0AC;
  font-size: 31px;
  padding: 0px 15px 0px;
  text-decoration: none;
}

.text:hover {
  cursor: pointer;
}

.menu-container {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 0;
  width: 90%;
}

.menu {
  font-size: 16px;
}

.menu a {
  background-color: #660066;
  color: #76ff03;
  text-align: center;
  display: block;
  margin: 0;
  text-decoration: none;
}

.content {
  left: 10%;
  top: 15%;
  right: 10%;
  position: absolute;
}

.box {
  background-color: #191919;
  width: 100%;
  position: absolute;
  padding: 15px 15px 15px;
}

.slider_wrapper {
  width: 100%;
  height: 40vw;
  overflow: hidden;
  position: relative;
}

.slider {
  position: absolute;
  width: 100%;
}

.slider div {
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.slider img {
  width: 100%;
  height: 40vw;
}

.caption {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  width: 100%;
  font-size: 36px;
  padding: 1.6rem;
  cursor: default;
}

.slider_objects {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: default;
}

.slider_btn {
  pointer-events: auto;
  opacity: 0;
}

.slider:hover .slider_objects .slider_btn {
  opacity: 1;
}

.slider_btn:hover {
  background-color: #000000;
  color: lime;
  opacity: 1;
}

.slider_wrapper:hover .slider_btn {
  opacity: 1 !important;
  display: block !important;
}

.slider_btn:hover:after {
  display: block;
  position: absolute;
  border-radius: 50%;
  width: 10%;
  height: 10%;
  background: none !important;
}

.prev_btn,
.next_btn {
  width: 10px;
  height: 10px;
  position: absolute;
  top: calc(50% - 25px);
  border-radius: 50%;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  z-index: 2;
  background: none !important;
  cursor: pointer;
}

.prev_btn::before,
.next_btn::before {
  content: "";
  background-color: #00000080;
  border-radius: 50%;
  position: absolute;
  inset: 0 0;
  z-index: -1;
  transform: translate(-27.5%, -20%);
}

.prev_btn:hover::before,
.next_btn:hover::before {
  background-color: #000;
}

.prev_btn {
  color: #ffffff;
  left: 50px;
}

.next_btn {
  color: #ffffff;
  right: 50px;
}

.slider_img_wrapper>a>img {
  cursor: default;
}

.slider_list_wrapper {
  width: calc(100% - 40px);
  position: absolute;
  bottom: 3vw;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style-type: none;
}

.slider_list {
  width: 15px;
  height: 15px;
  margin: 5px 10px 0;
  background-color: #323232;
  border: 2px solid #ffffff;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  box-shadow: 0 0 3px 1px #000000;
  cursor: pointer;
  pointer-events: auto;
}

.active_slide {
  background-color: #ffa500;
}

.sticky {
  width: 90%;
  position: fixed;
  left: 5%;
  top: 0;
  z-index: 100;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/css/jquerysctipttop.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/mobile-json-carousel/css/style.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

<body>

  <div class="header-container">

    <div class="header">

      <div class="text">
        <a class="refresh" title="A website refresh">Website</a>
      </div>

    </div>

    <div class="menu-container">

      <div class="menu">
        <a>MENU</a>
      </div>

    </div>

  </div>

  <div class="content">

    <div class="box">

      <div class="slider_wrapper">

        <div class="slider">

          <div class="slider_img_wrapper">
            <a href="#"><img src="https://source.unsplash.com/1600x900/?art" alt=""><span class="caption">Caption for slide 1</span></a>
          </div>

          <div class="slider_img_wrapper">
            <a href="#"><img src="https://source.unsplash.com/1600x900/?action" alt=""><span class="caption">Caption for slide 2</span></a>
          </div>

          <div class="slider_img_wrapper">
            <a href="#"><img src="https://source.unsplash.com/1600x900/?war" alt=""><span class="caption">Caption for slide 3</span></a>
          </div>

          <div class="slider_img_wrapper">
            <a href="#"><img src="https://source.unsplash.com/1600x900/?crime" alt=""><span class="caption">Caption for slide 4</span></a>
          </div>

          <div class="slider_img_wrapper">
            <a href="#"><img src="https://source.unsplash.com/1600x900/?drama" alt=""><span class="caption">Caption for slide 5</span></a>
          </div>

          <div class="slider_img_wrapper">
            <a href="#"><img src="https://source.unsplash.com/1600x900/?sci-fi" alt=""><span class="caption">Caption for slide 6</span></a>
          </div>

        </div>

        <div class="slider_objects">

          <div class="slider_btn prev_btn"><i class="fas fa-chevron-left fa-2x"></i></div>
          <div class="slider_btn next_btn"><i class="fas fa-chevron-right fa-2x"></i></div>

          <ul class="slider_list_wrapper">
            <li class="slider_list active_slide"></li>
            <li class="slider_list"></li>
            <li class="slider_list"></li>
            <li class="slider_list"></li>
            <li class="slider_list"></li>
            <li class="slider_list"></li>
          </ul>

        </div>

      </div>

    </div>

  </div>

</body>

推荐阅读