Question

当我点击箭头时，我想让子弹移动，我试着思考如何编码，但我的知识和经验仍然不够，所以我真的需要人们的帮助。

＆＃13;

$(document).ready(function () {
    $("#mainTopics").click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        $("#sub-topics").toggle();
    });

    $("html").on('click', function () {
        if ($("#sub-topics").is(':visible')) {
            $("#sub-topics").toggle();
        }
    });
});

var sliderImages = document.querySelectorAll('.slide');
var arrowLeft = document.querySelector('#arrow-left');
var arrowRight = document.querySelector('#arrow-right');
var arrowSlide = document.querySelectorAll('.arrow');
var sliderBullets = document.querySelectorAll('.bullets');
var current = 0;

//reset slideimages
function resetSlide() {
    for (var i = 0; i < sliderImages.length; i++) {
        sliderImages[i].style.display = 'none';
    }
}

//slide left
function slideLeft() {
    resetSlide();
    sliderImages[current - 1].style.display = 'block';
    current--;
}

//slide right
function slideRight() {
    resetSlide();
    sliderImages[current + 1].style.display = 'block';
    current++;
}

//arrow left
arrowLeft.addEventListener('click', function () {
    if (current === 0) {
        current = sliderImages.length;
    }
    slideLeft();
});

//arrow right
arrowRight.addEventListener('click', function () {
    if (current === sliderImages.length - 1) {
        current = -1;
    }
    slideRight();
});

//start to slideimages
function startSlide() {
    resetSlide();
    sliderImages[0].style.display = 'block';
}

//called startslide function
startSlide();

＆＃13;

body {
    margin: 0;
}

li, a{
    text-decoration: none;
    list-style-type: none;
    text-decoration-line: none;
    color: black;
}

/*main-menu*/
#main-menu {
    position: relative;
}

#main-menu ul {
    margin: 0;
    padding: 0;
}

#main-menu li {
    display: inline-block;
}

#main-menu a {
    display: block;
    width: 100px;
    padding: 10px;
    border: 1px solid;
    text-align: center;
}

/*sub-topics*/
#sub-topics {
    position: absolute;
    display: none;
    margin-top: 10px;
    width: 100%;
    left: 0;
}

#sub-topics ul {
    margin: 0;
    padding: 0;
}

#sub-topics li {
    display: block;
}

#subTopics a {
    text-align: left;
}

/*columns*/
#column1, #column2, #column3 {
    position: relative;
    float: left;
    left: 125px;
    margin: 0px 5px 0px 0px;
}

/*hover underline*/
#main-menu li:hover {
    text-decoration: underline;
}

/*slideshow*/
#slideshow {
    position: relative;
    width: 100%;
    height: 100%;
}

#slide1 {
    background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}

#slide2 {
    background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}

#slide3 {
    background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}

.slide {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 800px 400px;
    width: 800px;
    height: 400px;
    margin: auto;
    margin-top: 40px;
}

.slide-contain {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate3d(-50%,-50%,0);
    text-align: center;
}

.slide-contain span {
    color: white;
}

/*arrow*/
.arrow {
    position: absolute;
    cursor: pointer;
    top: 200px;
    width: 0;
    height: 0;
    border-style: solid;
}

.arrow:hover {
    background-color: #e0dede;
    transition: background-color 0.6s ease;
}

/*arrow-left*/
#arrow-left {
    position: absolute;
    border-width: 30px 40px 30px 0px;
    border-color: transparent gray transparent transparent;
    left: 0;
    margin-left: 300px;
}

/*arrow-right*/
#arrow-right {
    border-width: 30px 0px 30px 40px;
    border-color: transparent transparent transparent gray;
    right: 0;
    margin-right: 300px;
}

/*bullets*/
#slidebullet {
    position: relative;
    top: -30px;
    text-align: center;
}

.bullets {
    display: inline-block;
    background-color: gray;
    width: 15px;
    height: 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.6s ease;
}

.active, .bullets:hover {
    background-color: #e0dede;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
    <header></header>
    <nav>
        <div id="main-menu">
            <ul>
                <li><a href="">Logo</a></li>
                <li><a href="">Home</a></li>
                <li>
                    <a href="" id="mainTopics">Topics</a>
                    <div id="sub-topics">
                        <div id="column1" class="columns">
                            <ul>
                                <li><a href="">example1</a></li>
                                <li><a href="">example2</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
    <div id="slideshow">

        <div id="arrow-left" class="arrow"></div>

        <div id="slide1" class="slide">
            <div class="slide-contain">
                <span>Image One</span>
            </div>
        </div>

        <div id="slide2" class="slide">
            <div class="slide-contain">
                <span>Image Two</span>
            </div>
        </div>

        <div id="slide3" class="slide">
            <div class="slide-contain">
                <span>Image Three</span>
            </div>
        </div>

        <div id="slidebullet">
            <div id="bullet1" class="bullets"></div>
            <div id="bullet2" class="bullets"></div>
            <div id="bullet3" class="bullets"></div>
        </div>

        <div id="arrow-right" class="arrow"></div>
    </div>
    <script src="jquery.js"></script>
    <script src="index.js"></script>
    <script>

    </script>
</body>
</html>

＆＃13;

以上是我从网站上向人们和youtube学习的代码。我的网站现在箭头工作正常可以更改为其他幻灯片，但子弹不像箭头一样移动。

Answer 1

您可以通过将以下javascript代码添加到js文件来实现目标：

function checkMultiArrayValue($array) {
        global $test;
        foreach ($array as $key => $item) {

            if(!empty($item) && is_array($item)) {
                checkMultiArrayValue($item);
            }else {
                if($item)
                 $test[$item] = false;
                else
                 $test[$item] = true;
            }
        }
        return $test;   
    }

 $multiArray = array(    
                0 =>  array(  
                      "country"   => "",  
                      "price"    => 4,  
                      "discount-price" => 0,  
               ),);

$test = checkMultiArrayValue($multiArray);
echo "<pre>"
print_r($test);

Answer 2

尝试这个，非常简单。

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h

如何通过javascript单击箭头项目符号和自动幻灯片图像来滑动图像？

2 个答案: