用PHP显示MySQL数据&；jQuery

在你们中的一些人的帮助下，我成功地部分实现了我想要的功能。现在我又卡住了，我需要更多的帮助

检查实时版本，代码如下。我需要的是：

- 了解如何通过单击箭头在屏幕两侧切换到下一个/上一个产品。左侧按预期工作，右侧在任何情况下都不会切换

- 使右侧的slika1、slika2和slika3（它们包含三个单独图像的文件名）的结果显示为链接，从而在左侧切换图像

- 修改代码以防止SQL注入攻击（目前是可选的，但欢迎使用）

我很确定整个功能可以包含在一个单独的文件中，通过POST调用，但我真的不确定如何正确地完成它。那也会是一种奖励

这是我的密码：

HTML（index.php）：

---

一如既往，提前感谢

我建议在bootstrap中使用carousel，因为它比您试图使用Javascript实现的功能要好得多

此外，通过使用whileloop将结果输出到不同的部分，可以缩短MySQL查询并将其转换为更高效的代码

但为了不让事情复杂化， 我假设您正在尝试获取两个不同的部分，一个包含图像，另一个包含信息？如果是这样，您可能希望在两个具有相同功能的相同幻灯片之间循环。为此,

<div id="Section1">Description</div> 
<div id="Section1">slika1</div>
<div id="Shift">    Next </div>

可以在此处查看一个实例：

---

编辑：我在不理解你的代码的情况下写下了整个答案。。所以进一步的澄清可能会有所帮助：）

我建议在引导中使用carousel，因为它比使用Javascript要更好

此外，通过使用whileloop将结果输出到不同的部分，可以缩短MySQL查询并将其转换为更高效的代码

但为了不让事情复杂化， 我假设您正在尝试获取两个不同的部分，一个包含图像，另一个包含信息？如果是这样，您可能希望在两个具有相同功能的相同幻灯片之间循环。为此,

<div id="Section1">Description</div> 
<div id="Section1">slika1</div>
<div id="Shift">    Next </div>

可以在此处查看一个实例：

---

编辑：我在不理解你的代码的情况下写下了整个答案。。所以进一步的澄清可能会有所帮助：）

尝试将此处显示的代码缩短到显示问题的最低限度。在这种情况下，不需要SQL查询（而是使用硬编码的演示数据）、更少的CSS等。感谢您让我知道。我（显然）是一个noob，我害怕缩短代码，因为我不想删除任何可能对试图帮助我的人很重要的内容。请尽量将显示问题的代码缩短到最小。在这种情况下，不需要SQL查询（而是使用硬编码的演示数据）、更少的CSS等。感谢您让我知道。我（显然）是一个noob，我害怕缩短代码，因为我不想删除任何可能对试图帮助我的人很重要的东西。

<?php

$username = "root"; //mysql username
$password = ""; //mysql password
$hostname = "localhost"; //hostname
$databasename = '2199'; //databasename

//get pic id from ajax request
if(isset($_POST["info"]) && is_numeric($_POST["info"]))
{
    $current_info = filter_var($_POST["info"], FILTER_SANITIZE_NUMBER_INT);
}else{
    $current_info=1;
}

//Connect to Database
$mysqli = new mysqli($hostname, $username, $password, $databasename);

if ($mysqli->connect_error){   
    die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}

//get next picture id
$result2 = $mysqli->query("SELECT id FROM gola WHERE id > $current_info ORDER BY id ASC LIMIT 1")->fetch_object();
if($result2){
    $next_id = $result2->id;
}

//get previous picture id
$result2 = $mysqli->query("SELECT id FROM gola WHERE id < $current_info ORDER BY id DESC LIMIT 1")->fetch_object();
if($result2){
    $prev_id = $result2->id;
}

//get details of current from database
$result2 = $mysqli->query("SELECT artikel, slika1, slika2, slika3, dim1, dim2, dim3, obdelava, dodatno FROM gola WHERE id = $current_info LIMIT 1")->fetch_object();

if($result2){

    //construct next/previous button
    $prev_button = (isset($prev_id) && $prev_id>0)?'<a href="#" data-id="'.$prev_id.'" class="get_info"><span class="glyphicon glyphicon-circle-arrow-left rujz-wht"></span></a>':'';
    $next_button = (isset($next_id) && $next_id>0)?'<a href="#" data-id="'.$next_id.'" class="get_info"><span class="glyphicon glyphicon-circle-arrow-right rujz-wht"></span></a>':'';

    //output html

    echo '<div class="info">';
    echo '<h3 style="color: #fff !important;">';
    echo $prev_button; 
    echo $result2->artikel;
    echo $next_button;
    echo '</h3>';
    echo '<br />';
    echo '<p>';
    echo $result2->slika1;
    echo '<br />';
    echo $result2->slika2;
    echo '<br />';
    echo $result2->slika3;
    echo '<br />';
    echo $result2->dim1;
    echo '<br />';
    echo $result2->dim2;
    echo '<br />';
    echo $result2->dim3;
    echo '<br />';
    echo $result2->obdelava;
    echo '<br />';
    echo $result2->dodatno;
    echo '</p>';
    echo '</div>';

}

html, body {
    height: 100%;
    background-color: #fff;
    font-size: 62.5%;
}
.special, .special .jumbotron {
    height: 100%;
    background-color: white;
    border: 0px solid red;
    margin-bottom: 0px !important;
}
.special2, .special2 .jumbotron {
    height: 100%;
    background-color: #62a70f;
    border: 0.5rem solid #fff;
    border-radius: 3rem;
    margin-bottom: 0px !important;
    padding: 1rem;
}
.logo {
    border: 1px solid red;
    width: 10%;
    min-height: 100%;
    position: relative;
    height: 100%;
}
#picture {
    border: 0px red solid;
    height: 100%;
    background: #fff;
}
.prod_img {
    height: 100%;
}
h3 {
    font-family: 'Syncopate', sans-serif;
    font-size: 24px;
    font-size: 2.4rem;
    color: #62a70f;
}
.boxy {
    border: 0.5rem solid white;
    position: fixed;
    bottom: 2.5%;
    right: 5%;
    width: 25%;
    padding: 1rem;
    /*  height: 30rem;*/
    background-color: rgba(64,64,64,1);
    border-radius: 3rem;/*  background-image: url(logo.png);
    background-size: contain;
    background-repeat: no-repeat;*/
}

@media (min-width:768px) {
.boxy {
    border: 0.5rem solid white;
    position: fixed;
    bottom: 5%;
    right: 45%;
    width: 10%;
    /*  height: 30rem;*/
    background-color: rgba(64,64,64,1);
    border-radius: 3rem;/*  background-image: url(logo.png);
    background-size: contain;
    background-repeat: no-repeat;*/
}
.navbar {
    min-height: 10% !important;
    max-height: 10% !important;
    height: 10%;
    background-image: url(logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    border: 0px solid green;
    background-color: #0e0e0e;
    animation-name: example;
    animation-duration: 1s;
    animation-timing-function: ease;
}
.navbar-header {
    border: 0px solid green;
    min-height: 100%;
}
.logo {
    visibility: collapse;
}
.special, .special .jumbotron {
    width: 50%;
    float: left;
    margin-bottom: 0px !important;
}
.special2, .special2 .jumbotron {
    width: 50%;
    float: left;
    margin-bottom: 0px !important;
}
h3 {
    font-size: 48px;
    font-size: 4.8rem;
}
.rujz {
    font-size: 36px;
    font-size: 3.6rem;
    color: #62a70f;
    margin: 0.5em;
}

.rujz-wht {
    font-size: 36px;
    font-size: 3.6rem;
    color: #fff;
    margin: 0.5em;
}

}
 @keyframes example {
 0% {
bottom:-10%;
}
 100% {
bottom:0%;
}
}

<div id="Section1">Description</div> 
<div id="Section1">slika1</div>
<div id="Shift">    Next </div>

$(document).ready(function () {
$("#Section1").cycle();

$("#shift").click(function () { 
    $("#Section1").cycle('next');
});
});