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

Question

这是我在 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>

Answer 1

您可以使用::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>