在你们的帮助下，我成功地部分获得了我想要的功能。现在我又被困了，我需要更多的帮助。
请在此处查看实时版本，代码如下。我需要的是：
-只需单击箭头，即可在屏幕的两侧切换到下一个/上一个产品。左侧工作正常，右侧在任何情况下都不会切换。
-使右侧的slika1、slika2和slika3（它们包含三个独立图像的文件名）的结果显示为链接，这些链接将切换左侧的图像。
-修改代码以防止SQL注入攻击（目前是可选的，但欢迎使用）
我很确定整个功能可以包含在一个文件中，用POST调用，但我真的不确定如何正确地执行。那也是一笔奖金！
这是我的代码：
HTML（index.php）:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="layout.css">
<link href='https://fonts.googleapis.com/css?family=Syncopate' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.post( "art.php", { pic: "1"}, function( data ) {
$("#picture").html( data );
});
$.post( "info.php", { id: "1"}, function( data ) {
$("#info").html( data );
});
$("#picture").on("click",".get_pic", function(e){
var picture_id = $(this).attr('data-id');
$("#picture").html("<div style='"margin:50px auto;width:50px;'"><img src='"loader.gif'" /></div>");
$.post( "art.php", { pic: picture_id}, function( data ) {
$("#picture").html( data );
});
return false;
});
$("#info").on("click",".get_info", function(e){
var info_id = $(this).attr('data-id');
$("#info").html("<div style='"margin:50px auto;width:50px;'"><img src='"loader.gif'" /></div>");
$.post( "info.php", { pic: info_id}, function( data ) {
$("#info").html( data );
});
return false;
});
});
</script>
<title>2199</title>
</head>
<body>
<div class="navbar-wrapper">
<div class="container"> <img src="logo.png" class="boxy"> </div>
</div>
<div class="jumbotron special">
<div id="picture" align="center"> </div>
</div>
<div class="jumbotron special2">
<div id="info" align="center"> </div>
</div>
</body>
</html>
HTML（art.php）：
$username = "root"; //mysql username
$password = ""; //mysql password
$hostname = "localhost"; //hostname
$databasename = '2199'; //databasename
//get pic id from ajax request
if(isset($_POST["pic"]) && is_numeric($_POST["pic"]))
{
$current_picture = filter_var($_POST["pic"], FILTER_SANITIZE_NUMBER_INT);
}else{
$current_picture=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
$result = $mysqli->query("SELECT id FROM gola WHERE id > $current_picture ORDER BY id ASC LIMIT 1")->fetch_object();
if($result){
$next_id = $result->id;
}
//get previous picture id
$result = $mysqli->query("SELECT id FROM gola WHERE id < $current_picture ORDER BY id DESC LIMIT 1")->fetch_object();
if($result){
$prev_id = $result->id;
}
//get details of current from database
$result = $mysqli->query("SELECT artikel, slika1 FROM gola WHERE id = $current_picture LIMIT 1")->fetch_object();
if($result){
//construct next/previous button
$prev_button = (isset($prev_id) && $prev_id>0)?'<a href="#" data-id="'.$prev_id.'" class="get_pic"><span class="glyphicon glyphicon-circle-arrow-left rujz"></span></a>':'';
$next_button = (isset($next_id) && $next_id>0)?'<a href="#" data-id="'.$next_id.'" class="get_pic"><span class="glyphicon glyphicon-circle-arrow-right rujz"></span></a>':'';
//output html
echo '<div class="prod_img" style="background-image: url(pictures/';
echo $result->slika1;
echo '); background-size: contain; background-repeat: no-repeat; background-position: center center;">';
echo '<h3>';
echo $prev_button;
echo $result->artikel;
echo $next_button;
echo '</h3>';
echo '</div>';
}
HTML（info.php）:
<?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>';
}
CSS：
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%;
}
}
一如既往，提前感谢！
我建议在bootstrap中使用carousel，因为它比您试图使用Javascript实现的要好得多。
此外，通过使用whileloop输出到不同的部分，可以缩短MySQL查询并将其更改为更高效的代码。
但为了不使事情复杂化，我假设你试图获得两个不同的部分，一个有图像，另一个有信息？如果是这样的话，你会想在两个相同功能的幻灯片之间循环播放。为此，
<div id="Section1">Description</div>
<div id="Section1">slika1</div>
<div id="Shift"> Next </div>
并有一个单独的javascript循环通过每个部分
$(document).ready(function () {
$("#Section1").cycle();
$("#shift").click(function () {
$("#Section1").cycle('next');
});
});
可以在此处查看一个实际示例：http://jquery.malsup.com/cycle/pager11.html
编辑：我在不理解你的代码的情况下写下了整个答案。。因此……进一步的澄清可能会有所帮助：）