完成

 

引用 : 

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_imgdots

改一下 php  用 html iframe 呼叫外部 sidebar.php 帶入三張圖 p1 , p2 , p3 及用 table 將第二張圖放到 右邊 ....

<?php
if($row_sort['picture1']!=null){
echo '
<div class="col-xs-12 col-lg-6">
<table class="rwd-table">
  <tr>
<th>
 <iframe src="sidebar.php?p1=
';
echo $row_sort['picture'];
echo '&p2=';
echo $row_sort['picture2'];
echo '&p3=';
echo $row_sort['picture3'];
echo '" width="450px" height="550px" frameborder="0" scrolling="no"></iframe>
</th>
<th>
<img src="./picture/
';
echo $row_sort['picture1'];
echo '" class="attachment-edin-thumbnail-landscape wp-post-image" alt="" style="z-index:-1;position: relative;"></a>
</th>
  </tr>
</table>
</div>
';
}
?>

這是參考 tryw3css_slideshow_imgdots 改的 sidebar.php

<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<style>
.mySlides {display:none}
.demo {cursor:pointer}
</style>
<body>

<div class="w3-content" style="max-width:450px">

  <?php

  echo '<img class="mySlides" src=".picture/';
  echo $_GET['p1'] ;
  echo '">';

if ( isset($_GET['p2']) && $_GET['p2'] != '' ) {
  echo '<img class="mySlides" src="./picture/';
  echo $_GET['p2'] ;
  echo '">';
}

if ( isset($_GET['p3']) && $_GET['p3'] != '' ) {
  echo '<img class="mySlides" src="./picture/';
  echo $_GET['p3'] ;
  echo '">';
}

  ?>

  <div class="w3-row-padding w3-section">
<?php

   echo '<div class="w3-col s4"> <img class="demo w3-opacity w3-hover-opacity-off" src="./picture/';
   echo $_GET['p1'];
   echo '" style="width:50%" onclick="currentDiv(1)"></div>';

if ( isset($_GET['p2']) && $_GET['p2'] != '' ) {
   echo '<div class="w3-col s4"> <img class="demo w3-opacity w3-hover-opacity-off" src="./picture/';
   echo $_GET['p2'];
   echo '" style="width:50%" onclick="currentDiv(2)"></div>';
}

if ( isset($_GET['p3']) && $_GET['p3'] != '' ) {
   echo '<div class="w3-col s4"> <img class="demo w3-opacity w3-hover-opacity-off" src="./picture/';
   echo $_GET['p3'];
   echo '" style="width:50%" onclick="currentDiv(3)"></div>';
}

?>
  </div>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
  }
  x[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " w3-opacity-off";
}
</script>

</body>
</html>

}

改成橫的

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.mySlides {display:none}
.demo {cursor:pointer}
</style>
<body>

<table class="rwd-table">
  <tr>
<div class="w3-content" style="max-width:1200px">

<td>
  <img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
  <img class="mySlides" src="img_fjords_wide.jpg" style="width:100%">
  <img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
</td>
<td>

  <div class="w3-col-padding w3-section">
    <div class="w3-row s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="img_nature_wide.jpg"     style="width:25%" onclick="currentDiv(1)">
    </div>
    <div class="w3-row s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="img_fjords_wide.jpg" style="width:25%" onclick="currentDiv(2)">
    </div>
    <div class="w3-row s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="img_mountains_wide.jpg" style="width:25%" onclick="currentDiv(3)">
    </div>
  </div>
</td>
</div>
</tr>

</table>
<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
  }
  x[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " w3-opacity-off";
}
</script>

</body>
</html>
文章標籤
全站熱搜
創作者介紹
創作者 echochio 的頭像
echochio

echochio

echochio 發表在 痞客邦 留言(0) 人氣(26)