來自php陣列的jQuery幻燈片

我有這個代碼獲取所有圖像具有相同的ID和陣列我想顯示它作爲幻燈片，右知道圖像顯示彼此相鄰我如何使用Jquery slide show來自php陣列的jQuery幻燈片

// PHP文件（服務器端）

<?php 
$dbhost = '127.0.0.1'; 
$dbuser = 'root'; 
$dbpass = ''; 
$dbname = 'images'; 

$sql2 = "SELECT img FROM image WHERE L_ID=:id"; 
try { 
    $con = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass); 
    $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
    $con->query('SET NAMES utf8'); 
    $stmt = $con->prepare($sql2); 
    $stmt->bindParam("id", $_GET["L_ID"]); 
    $stmt->execute(); 
    $img = $stmt->fetchAll(PDO::FETCH_OBJ); 
    $con = null; 
    echo '{"pics":'. json_encode($img) .'}'; 
    } catch(PDOException $e) { 
    echo '{"error":{"text":'. $e->getMessage() .'}}'; 
} 

?>

// js文件

$('#detailsPage').live('pageshow', function (event) { 
     var id = getUrlVars()["L_ID"]; 
     $.getJSON(serviceURL + 'getimage.php?L_ID=' + id, displayImg); 
     }); 
    function displayImg(data) { 





    var imgs = data.pics; 
    console.log(imgs); 
    for(var j=0;j<imgs.length;j++) 
    { 
     $('#pic').append('<img src="' + imgs[j].img + '"width=112 height=112/>');} 

    $('#actionList').listview('refresh'); 

} 

function getUrlVars() { 
var vars = [], 
hash; 
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
for (var i = 0; i < hashes.length; i++) { 
    hash = hashes[i].split('='); 
    vars.push(hash[0]); 
    vars[hash[0]] = hash[1]; 
} 
return vars; 
}

//的Html

來源

2017-02-15 RAB

這jQuery的VERS你用的是什麼？ –

我正在使用rtl.jquery.mobile-1.4.5.js – RAB

嘗試** [Flexslider]（http://flexslider.woothemes.com/）**，希望下面的小提琴會給你一個想法http：///jsfiddle.net/z_acharki/CPpBD/619/ –

以下似乎工作得很好。但是確實有很大的改進空間。

我用下面的：https://www.w3schools.com/howto/howto_js_slideshow.asp

由於我不知道，你正在與$('#actionList').listview('refresh');做我評論一下。

HTML：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>StackOverflow Question 42261254</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
     <script src="slideshow.js"></script> 
     <link rel="stylesheet" href="slideshow.css"> 
    </head> 
    <body> 
     <h1>StackOverflow Question 42261254</h1> 

     <div class="slideshow-container"> 
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
      <a class="next" onclick="plusSlides(1)">&#10095;</a> 
     </div> 
     <br> 

     <div class="dots-container" style="text-align:center"></div> 
    </body> 
</html>

PHP：

<?php 
$dbhost = '127.0.0.1'; 
$dbuser = 'root'; 
$dbpass = ''; 
$dbname = 'images'; 

$sql = "SELECT img FROM image WHERE L_ID=:id"; 
$data = array(); 

try 
{ 
    $con = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass); 
    $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
    $con->query('SET NAMES utf8'); 
    $stmt = $con->prepare($sql); 
    $stmt->bindParam("id", $_GET["L_ID"]); 
    $stmt->execute(); 
    $img = $stmt->fetchAll(PDO::FETCH_OBJ); 
    $con = null; 

    $data['pics'] = $img; 
    $data['success'] = true; 
} 
catch(PDOException $e) 
{ 
    $data['success'] = false; 
    $data['errors'][] = $e->getMessage(); 
} 

echo json_encode($data, JSON_PRETTY_PRINT); 

?>

JS：

var slideIndex = 1; 

function plusSlides(n) { 
    showSlides(slideIndex += n); 
} 

function currentSlide(n) { 
    showSlides(slideIndex = n); 
} 

function getUrlVars() { 
    var vars = [], 
     hash, 
     hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 

    for (var i = 0; i < hashes.length; i++) { 
     hash = hashes[i].split('='); 
     vars.push(hash[0]); 
     vars[hash[0]] = hash[1]; 
    } 

    return vars; 
} 

function displayImg(data) { 
    console.log(data); 

    if (data.success) { 
     var imgs = data.pics; 

     console.log(imgs); 

     for (var j = 0; j < imgs.length; j++) { 
      $('.slideshow-container a.prev').before(
       '<div class="mySlides fade">' + 
        '<div class="numbertext">' + (j+1) + '/' + imgs.length + '</div>' + 
        '<img src="' + imgs[j].img + '" style="width: 100%"/>' + 
        '<div class="text">Caption Text</div>' + 
       '</div>' 
      ); 

      $('.dots-container').append(
       '<span class="dot" onclick="currentSlide(' + (j+1) + ')"></span> ' 
      ); 
     } 

     //$('#actionList').listview('refresh'); 
     showSlides(slideIndex); 
    } else { 
     for (var i = 0; i < data.errors.length; i++) { 
      console.error(data.errors[i]); 
     } 
    } 
} 

function showSlides(n) { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 
    console.log(slides); 
    var dots = document.getElementsByClassName("dot"); 
    if (n > slides.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = slides.length} 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    for (i = 0; i < dots.length; i++) { 
     dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active"; 
} 

$(document).ready(function() { 
    var id = getUrlVars()["L_ID"]; 
    $.getJSON('getimage.php?L_ID=' + id, displayImg); 
});

CSS：

* {box-sizing:border-box} 

/* Slideshow container */ 
.slideshow-container { 
    max-width: 1000px; 
    position: relative; 
    margin: auto; 
} 

.mySlides { 
    display: none; 
} 

/* Next & previous buttons */ 
.prev, .next { 
    cursor: pointer; 
    position: absolute; 
    top: 50%; 
    width: auto; 
    margin-top: -22px; 
    padding: 16px; 
    color: white; 
    font-weight: bold; 
    font-size: 18px; 
    transition: 0.6s ease; 
    border-radius: 0 3px 3px 0; 
} 

/* Position the "next button" to the right */ 
.next { 
    right: 0; 
    border-radius: 3px 0 0 3px; 
} 

/* On hover, add a black background color with a little bit see-through */ 
.prev:hover, .next:hover { 
    background-color: rgba(0,0,0,0.8); 
} 

/* Caption text */ 
.text { 
    color: #f2f2f2; 
    font-size: 15px; 
    padding: 8px 12px; 
    position: absolute; 
    bottom: 8px; 
    width: 100%; 
    text-align: center; 
} 

/* Number text (1/3 etc) */ 
.numbertext { 
    color: #f2f2f2; 
    font-size: 12px; 
    padding: 8px 12px; 
    position: absolute; 
    top: 0; 
} 

/* The dots/bullets/indicators */ 
.dot { 
    cursor:pointer; 
    height: 13px; 
    width: 13px; 
    margin: 0 2px; 
    background-color: #bbb; 
    border-radius: 50%; 
    display: inline-block; 
    transition: background-color 0.6s ease; 
} 

.active, .dot:hover { 
    background-color: #717171; 
} 

/* Fading animation */ 
.fade { 
    -webkit-animation-name: fade; 
    -webkit-animation-duration: 1.5s; 
    animation-name: fade; 
    animation-duration: 1.5s; 
} 

@-webkit-keyframes fade { 
    from {opacity: .4} 
    to {opacity: 1} 
} 

@keyframes fade { 
    from {opacity: .4} 
    to {opacity: 1} 
}

來源

2017-02-15 23:36:00 Koelli91

但是，當我運行它在鉻，我得到這個javascript錯誤：未捕獲TypeError：無法讀取未定義的屬性'風格'，我張貼鉻錯誤img頂部 – RAB

似乎該腳本沒有找到任何幻燈片類'mySlides'。您添加的'img'必須位於'div.mySlides'內。 – Koelli91

當你寫的時候，類裏面的圖像src會發生變化，對吧？ – RAB

來自php陣列的jQuery幻燈片

回答

相關問題