如何在动态幻灯片中移动缩略图

时间：2015-07-26 02:31:16

标签： php dynamic slideshow

我正在尝试移动在主图像右侧垂直显示的缩略图。 我想在主图像下方水平显示它们。

幻灯片是来自mysql数据库的动态。

来自显示页面的Php：

    <?php $sqli3 = "SELECT * FROM pro_img WHERE pro_id='$pid' ORDER BY img_id ASC LIMIT 0,1";
  $resulti3 = mysql_query($sqli3);
  $rs3 = mysql_fetch_array($resulti3);
  $description = str_replace( ' <br /><br /><br />', '</p>', $rs[pro_desc]);
  $description = str_replace( "<br /><br /><br />\r\n", "\n\r<p>", $description);
  ?>


 <div id=show class=slideshow>
    <div class=slideshow-images>
    <?php $sqli2 = "SELECT * FROM pro_img WHERE pro_id='$pid' ORDER BY img_id";
      $resulti2 = mysql_query($sqli2);
      $i=0;
      while($rsi2 = mysql_fetch_array($resulti2)){?>
    <a href=><img id=slide-<?php print $i?> src=images/pro-photo/normals/<?php print $rsi2[img_name]?> alt="<?php print $title.' Image '.($i+1)?>"/></a>
    <?php $i++;}?>
    </div>



<div class=slideshow-thumbnails><ul> <?php $sqli2 = "SELECT * FROM pro_img WHERE pro_id='$pid' ORDER BY img_id";
  $resulti2 = mysql_query($sqli2);
  $i=0;
  while($rsi2 = mysql_fetch_array($resulti2)){?>  
<li><a href=#slide-<?php print $i?>><img src=images/pro-photo/thumbnails/<?php print $rsi2[img_name]?> alt="<?php print $title.' Slide '.($i+1)?>"/></a></li><?php $i++;}?>

</ul></div>
</div>

这是幻灯片CSS 

 .slideshow {
    display: block;
    position: relative;
    z-index: 0;

}

.slideshow-images {
    display: block;
    overflow: hidden;
    position: relative;
}       
.slideshow-images img {
    display: block;
    position: absolute;
    z-index: 1;
}       
.slideshow-thumbnails {
    overflow: hidden;
}

.slideshow {
    width: 508px;
    height: 375px;
    margin: 0 0 20px 0;

}
.slideshow a img {
    border: 0;
}

.slideshow-images {
    width: 508px;
    height: 381px;
}       
.slideshow-images-visible { 
    opacity: 1;
}   
.slideshow-images-prev { 
    opacity: 0; 
}
.slideshow-images-next { 
    opacity: 0; 
}
.slideshow-images img {
    float: left;
    left: 0;
    top: 0;
    position: static;
}

.slideshow-thumbnails * {
    margin: 0;
    padding: 0;
}
.slideshow-thumbnails li {
    float: left;
    list-style: none;
    margin: 15px 0 0 16px;
    position: relative;
}
.slideshow-thumbnails a {
    display: block;
    float: left;
    position: relative; 
}
.slideshow-thumbnails a:hover {
    /*background-color: #005b79 !important;*/
    opacity: 1 !important;
}
.slideshow-thumbnails img {
    display: block;
    height: 81px;
    width: 108px;
}
.slideshow-thumbnails-active {
    background-color: #0081ac;
    opacity: 1;
}
.slideshow-thumbnails-inactive {
    background-color: #FFF;
    opacity: .5;
}
.slideshow-thumbnails {
    height: 381px;
    left: auto;
    right: -133px;
    top: 0;
    position: absolute;
    width: 135px;
    overflow: auto; 
}
.slideshow-thumbnails ul {
    height: 100%;
    position: absolute;
    width: 120px;
}

任何帮助都会很棒。

谢谢

Javascript：

function VisualSlideShow(options){
if(options.effect&&options.effect.toLowerCase()=="fade"){options.effect="";}var path="";var regexp=/^(.*)visualslideshow\.js$/;$each($$("script"),function(item,index,object){if(regexp.test(item.src)){var res=regexp.exec(item.src);path=res[1];}});function writeScript(src,text){document.write("<scr"+"ipt type=\"text/javascript\""+(src?" src=\""+path+src+"\"":"")+">"+(text||"")+"</scr"+"ipt>");}writeScript("slideshow.js");if(options.effect){writeScript("slideshow."+options.effect.toLowerCase()+".js");}if(options.sound){writeScript("swfobject.js");}window.addEvent("domready",function(){if(options.sound){window.vssSoundListener={onInit:function(){}};$(options.id).grab(new Element("div",{id:"vssSound"}));swfobject.createSWF({data:path+"player_mp3_js.swf",width:"1",height:"1"},{allowScriptAccess:"always",loop:true,FlashVars:"listener=vssSoundListener&loop=1&autoplay=1&mp3="+options.sound},"vssSound");}var Instance;if(options.effect){Instance=new Slideshow[options.effect](options.id,null,options);}else{Instance=new Slideshow(options.id,null,options);}if(!window.visualslideshow){window.visualslideshow=[];}window.visualslideshow[window.visualslideshow.length]=Instance;var h=$$("#"+options.id+" div.slideshow-images");if(h&&t){var c=new Element("div",{styles:{position:"absolute",right:0,bottom:0,padding:"0 3px 2px",'background-color':"#EEE",'z-index':999999},events:{contextmenu:function(eventObject){return false;}}});




}});}

VisualSlideShow({"duration":2000,"delay":5000,"id":"show","width":508,"height":381,"captions":true,"controller":false,"thumbnails":true,"loop":true,"paused":false,"effect":"Fade"});

1 个答案:

答案 0 :(得分：0)

我已经找到了解决这个问题的方法。

PHP不会只改变css和javascript。

两者都在下面。

CSS 

.slideshow {
    display: block;
    position: relative;
    z-index: 0;
}
.slideshow-images {
    display: block;
    overflow: hidden;
    position: relative;
}       
.slideshow-images img {
    display: block;
    position: absolute;
    z-index: 1;
}       
.slideshow-thumbnails {
    overflow: hidden;
}

.slideshow {
    width: 630px;
    height: 600px;
    margin: 0 auto;
}
.slideshow a img {
    border: 0;
}

.slideshow-images {
    width: 630px;
    height: 434px;
    left: 0px;
    top: 0px;
}       
.slideshow-images-visible { 
    opacity: 1;
}   
.slideshow-images-prev { 
    opacity: 0; 
}
.slideshow-images-next { 
    opacity: 0; 
}
.slideshow-images img {
    float: left;
    left: 0;
    top: 0;
    position: static;
}

.slideshow-thumbnails * {
    margin: 0;
    padding: 0;
}
.slideshow-thumbnails li {
    float: left;
    list-style: none;
    margin: 0px 0px 0px 0;
    position: relative;
}
.slideshow-thumbnails a {
    display: block;
    float: left;
    padding: 3px;
    position: relative; 
}
.slideshow-thumbnails a:hover {
    background-color: #CCC !important;
    opacity: 1 !important;
}
.slideshow-thumbnails img {
    display: block;
        height: 83px;
    width: 120px;
}
.slideshow-thumbnails-active {
    background-color: #7A7A7A;
    opacity: 0.8;
}
.slideshow-thumbnails-inactive {
    background-color: #FFF;
    opacity: .5;
}
.slideshow-thumbnails {
    top: 420px;
    height: 180px;
    left: 0;
    position: absolute;
    width: 630px;
    overflow: auto; 
}
.slideshow-thumbnails ul {
    height: 100px;
    left: 0;
    position: absolute;
    top: 0;
    width: 630px;
}
.slideshow {
    margin-top: 0px;
}


.slideshow-captions {
    background: #000;
    bottom: 20px;
    color: #FFF;
    font: normal 12px/22px Arial, sans-serif;
    left: 20px;
    overflow: hidden;
    position: absolute;
    padding: 0 10px;
    width: 580px;   /* 100% */
    z-index: 10000;
}
.slideshow-captions-hidden {
    opacity: 0;
}
.slideshow-captions-visible {
    opacity: .7;
}


.slideshow-controller {
    background: url(../images/controller.png) no-repeat;
    height: 70px;
    left: 50%;
    margin: -21px 0 0 -96px;
    overflow: hidden;
    position: absolute;
    bottom: 50%;
    width: 192px;
    z-index: 10000;
}
.slideshow-controller * {
    margin: 0;
    padding: 0;
}
.slideshow-controller-hidden { 
    opacity: 0;
}
.slideshow-controller-visible {
    opacity: 1;
}
.slideshow-controller a {
    cursor: pointer;
    display: block;
    height: 32px;
    overflow: hidden;
    position: absolute;
    top: 15px;
}
.slideshow-controller a.active {
    background-position: 0 32px;
}
.slideshow-controller li {
    list-style: none;
}
.slideshow-controller li.first a {
    background-image: url(../images/controller-first.png);
    left: 13px;
    width: 32px;
}
.slideshow-controller li.prev a {
    background-image: url(../images/controller-prev.png);
    left: 46px;
    width: 32px;
}
.slideshow-controller li.pause a {
    background-image: url(../images/controller-pause.png);
    left: 79px;
    width: 32px;
}
.slideshow-controller li.play a {
    background-position: 32px 0;
}
.slideshow-controller li.play a.active {
    background-position: 32px 32px;
}
.slideshow-controller li.next a {
    background-image: url(../images/controller-next.png);
    left: 112px;
    width: 32px;
}
.slideshow-controller li.last a {
    background-image: url(../images/controller-last.png);
    left: 145px;
    width: 32px;
}


.slideshow-loader {
    height: 28px;
    right: 0;
    position: absolute;
    top: 0;
    width: 28px;
    z-index: 10001;
}
.slideshow-loader-hidden {
    opacity: 0;
}
.slideshow-loader-visible {
    opacity: 1;
}

使用Javascript：

function VisualSlideShow(options){
if(options.effect&&options.effect.toLowerCase()=="fade"){options.effect="";}var path="";var regexp=/^(.*)visualslideshow\.js$/;$each($$("script"),function(item,index,object){if(regexp.test(item.src)){var res=regexp.exec(item.src);path=res[1];}});function writeScript(src,text){document.write("<scr"+"ipt type=\"text/javascript\""+(src?" src=\""+path+src+"\"":"")+">"+(text||"")+"</scr"+"ipt>");}writeScript("slideshow.js");if(options.effect){writeScript("slideshow."+options.effect.toLowerCase()+".js");}if(options.sound){writeScript("swfobject.js");}window.addEvent("domready",function(){if(options.sound){window.vssSoundListener={onInit:function(){}};$(options.id).grab(new Element("div",{id:"vssSound"}));swfobject.createSWF({data:path+"player_mp3_js.swf",width:"1",height:"1"},{allowScriptAccess:"always",loop:true,FlashVars:"listener=vssSoundListener&loop=1&autoplay=1&mp3="+options.sound},"vssSound");}var Instance;if(options.effect){Instance=new Slideshow[options.effect](options.id,null,options);}else{Instance=new Slideshow(options.id,null,options);}if(!window.visualslideshow){window.visualslideshow=[];}window.visualslideshow[window.visualslideshow.length]=Instance;var h=$$("#"+options.id+" div.slideshow-images");if(h&&t){var c=new Element("div",{styles:{position:"absolute",right:0,bottom:0,padding:"0 3px 2px",'background-color':"#EEE",'z-index':999999},events:{contextmenu:function(eventObject){return false;}}});




}});}

VisualSlideShow({"duration":2000,"delay":5000,"id":"show","width":630,"height":420,"captions":false,"controller":false,"thumbnails":true,"loop":true,"paused":false,"effect":"Fade"});

我希望这有助于其他人寻找以mysql为主的幻灯片。

相关问题
最新问题