文章/答案/技术大牛

发布

社区首页 >问答首页 >当将图像滑块包含在php页面中时，它无法工作

问当将图像滑块包含在php页面中时，它无法工作
EN

Stack Overflow用户

提问于 2014-08-23 15:24:55

回答 2查看 191关注 0票数 0

我已经从http://dandywebsolution.com/skdslider/下载了一个全宽度图像滑块

我根据我的要求修改了滑块页面，现在它只有两个图像的滑块，

slider.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SKDSlider - Full Width Jquery Slider - Jquery Responsive Full Width Slider - Full Screen Slider- Simple Jquery Slider</title>
<meta name="description" content="A jquery light weight image slideshow plugin. Full width and fully responsive simple image slider with fade in and fade out effect.">
<meta name="keywords" content="jquery slideshow, full width slideshow, simple slideshow, simple image slider, responsive slider, full width responsive slider">
<meta name="robots" content="index, follow">
<meta name="copyright" content="Samir Das">
<meta name="language" content="EN">
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="src/skdslider.js"></script>
<link href="src/skdslider.css" rel="stylesheet">
<script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery('#demo1').skdslider({delay:5000, animationSpeed: 2000,showNextPrev:true,showPlayButton:true,autoSlide:true,animationType:'fading',showNav:false});

            jQuery('#responsive').change(function(){
              $('#responsive_wrapper').width(jQuery(this).val());
            });

        });
</script>
<style type="text/css">
body{ margin:0; padding:0;}
.demo-code{ background-color:#ffffff; border:1px solid #333333; display:block; padding:10px;}
.option-table td{ border-bottom:1px solid #eeeeee;}
</style>
</head>
<body>

<div class="skdslider">
    <ul id="demo1" class="slides">
<li>
<img src="slides/slide1.png" />
<!--Slider Description example-->

</li>
<li><img src="slides/slide2.png" />

</li>

</ul>
</div>

</body>
</html>

单独运行它会很好，但是当我将它包括在我的网页上时，它只显示滑块的空间，请任何人给我一个解决方案。

index.php

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>DoIT</title>
      <link href="css/rwdgrid.css" rel="stylesheet" type="text/css" />
      <link href="css/localstyles.css" rel="stylesheet" type="text/css" />
      <script src="scripts/script.js"></script>
      <link href="css/styles.css" rel="stylesheet" type="text/css" />
      <link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
      <script src="http://code.jquery.com/jquery.js"></script>
      <script src="src/skdslider.js"></script>
      <link href="src/skdslider.css" rel="stylesheet">
      <script type="text/javascript">
         jQuery(document).ready(function(){
            jQuery('#demo1').skdslider({delay:5000, animationSpeed: 2000,showNextPrev:true,showPlayButton:true,autoSlide:true,animationType:'fading',showNav:false});

            jQuery('#responsive').change(function(){
              $('#responsive_wrapper').width(jQuery(this).val());
            });

         });
      </script>
      <style type="text/css">
         body{ margin:0; padding:0;}
         .demo-code{ background-color:#ffffff; border:1px solid #333333; display:block; padding:10px;}
         .option-table td{ border-bottom:1px solid #eeeeee;}
      </style>
   </head>
   <body>
      <div class="page-wrap">
         <?php include 'header.php'; ?>
         <div class="fullwidth">
            <div class="skdslider">
               <ul id="demo1" class="slides">
                  <li>
                     <img src="slides/slide1.png" />
                     <!--Slider Description example-->
                  </li>
                  <li><img src="slides/slide2.png" />
                  </li>
               </ul>
            </div>
         </div>
         <div class="fullwidth">
            <br /><br />
         </div>
         <div class="container-12">
            <div class="grid-4">
               <center>
                  <img src="images/professionas.png" width="128" height="128" />
               </center>
               <h2 align="center">Who We Are</h2>
               <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend vitae tellus non egestas. Suspendisse potenti. Praesent facilisis tincidunt scelerisque. Aliquam sed elementum neque. In sed imperdiet quam, ut blandit erat. Sed quis commodo mi. Curabitur at ultricies quam. Nullam malesuada mauris massa.</p>
               <center><input type="submit" class="btn" value="Read More" /></center>
            </div>
            <div class="grid-4">
               <center>
                  <img src="images/professor.png" width="128" height="128" />
               </center>
               <h2 align="center">Courses</h2>
               <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend vitae tellus non egestas. Suspendisse potenti. Praesent facilisis tincidunt scelerisque. Aliquam sed elementum neque. In sed imperdiet quam, ut blandit erat. Sed quis commodo mi. Curabitur at ultricies quam. Nullam malesuada mauris massa.</p>
               <center><input type="submit" class="btn" value="Read More" /></center>
            </div>
            <div class="grid-4">
               <center>
                  <img src="images/success_path.png" width="128" height="128" />
               </center>
               <h2 align="center">Solutions</h2>
               <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend vitae tellus non egestas. Suspendisse potenti. Praesent facilisis tincidunt scelerisque. Aliquam sed elementum neque. In sed imperdiet quam, ut blandit erat. Sed quis commodo mi. Curabitur at ultricies quam. Nullam malesuada mauris massa.</p>
               <center><input type="submit" class="btn" value="Read More" /></center>
            </div>
         </div>
         <div class="fullwidth">
            <br /><br />
         </div>
         <div class="container-12">
            <div style="clear: both;"></div>
            <hr />
            <div class="grid-12">
               <h2>Latest</h2>
            </div>
            <div class="grid-3">
               <img src="images/gaming.png" width="100%" style="max-width:100%;height:auto;" />
            </div>
            <div class="grid-9">
               <h2>DoIT Gaming Challange 2014</h2>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend vitae tellus non egestas. Suspendisse potenti. Praesent facilisis tincidunt scelerisque. Aliquam sed elementum neque. In sed imperdiet quam, ut blandit erat. Sed quis commodo mi. Curabitur at ultricies quam. Nullam malesuada mauris massa. Ut fringilla risus sit amet arcu iaculis, sed egestas neque egestas. Aenean scelerisque tellus sed volutpat consequat. Donec volutpat sem ac dolor elementum bibendum.</p>
               <input type="submit" class="btn" value="Read More" />
            </div>
         </div>
         <div style="clear: both;"></div>
      </div>
      <div class="fullwidth"><br /><br /></div>
      <?php include 'footer.php'; ?>
      <script src="scripts/jquery.js" type="text/javascript"></script>
   </body>
</html>

javascript

jquery

css

回答 2

Stack Overflow用户

发布于 2014-08-23 15:46:43

试试这个：

Index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DoIT</title>
  <meta name="description" content="A jquery light weight image slideshow plugin. Full width and fully responsive simple image slider with fade in and fade out effect.">
  <meta name="keywords" content="jquery slideshow, full width slideshow, simple slideshow, simple image slider, responsive slider, full width responsive slider">
  <meta name="robots" content="index, follow">
  <meta name="copyright" content="Samir Das">
  <meta name="language" content="EN">
      <link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
 <script src="http://code.jquery.com/jquery.js"></script>
 <script src="src/skdslider.js"></script>
 <link href="src/skdslider.css" rel="stylesheet"><link href="css/rwdgrid.css" rel="stylesheet" type="text/css" />
  <link href="css/localstyles.css" rel="stylesheet" type="text/css" />
  <script src="scripts/script.js"></script>
  <link href="css/styles.css" rel="stylesheet" type="text/css" />
 </head>
  <body>

  <div class="page-wrap">
      <?php include 'header.php'; ?>
     <div class="fullwidth">
        <?php include 'slider.html'; ?>
     </div>
     <div class="fullwidth">
        <br /><br />
     </div>
     <div class="container-12">
        <div class="grid-4">
           <center>
              <img src="images/professionas.png" width="128" height="128" />
           </center>
           <h2 align="center">Who We Are</h2>
           <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend vitae tellus non egestas. Suspendisse potenti. Praesent facilisis tincidunt scelerisque. Aliquam sed elementum neque. In sed imperdiet quam, ut blandit erat. Sed quis commodo mi. Curabitur at ultricies quam. Nullam malesuada mauris massa.</p>
           <center><input type="submit" class="btn" value="Read More" /></center>
        </div>
        <div class="grid-4">
           <center>
              <img src="images/professor.png" width="128" height="128" />
           </center>
           <h2 align="center">Courses</h2>
           <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend vitae tellus non egestas. Suspendisse potenti. Praesent facilisis tincidunt scelerisque. Aliquam sed elementum neque. In sed imperdiet quam, ut blandit erat. Sed quis commodo mi. Curabitur at ultricies quam. Nullam malesuada mauris massa.</p>
           <center><input type="submit" class="btn" value="Read More" /></center>
        </div>
        <div class="grid-4">
           <center>
              <img src="images/success_path.png" width="128" height="128" />
           </center>
           <h2 align="center">Solutions</h2>
           <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend vitae tellus non egestas. Suspendisse potenti. Praesent facilisis tincidunt scelerisque. Aliquam sed elementum neque. In sed imperdiet quam, ut blandit erat. Sed quis commodo mi. Curabitur at ultricies quam. Nullam malesuada mauris massa.</p>
           <center><input type="submit" class="btn" value="Read More" /></center>
        </div>
     </div>
     <div class="fullwidth">
        <br /><br />
     </div>
     <div class="container-12">
        <div style="clear: both;"></div>
        <hr />
        <div class="grid-12">
           <h2>Latest</h2>
        </div>
        <div class="grid-3">
           <img src="images/gaming.png" width="100%" style="max-width:100%;height:auto;" />
        </div>
        <div class="grid-9">
           <h2>DoIT Gaming Challange 2014</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend vitae tellus non egestas. Suspendisse potenti. Praesent facilisis tincidunt scelerisque. Aliquam sed elementum neque. In sed imperdiet quam, ut blandit erat. Sed quis commodo mi. Curabitur at ultricies quam. Nullam malesuada mauris massa. Ut fringilla risus sit amet arcu iaculis, sed egestas neque egestas. Aenean scelerisque tellus sed volutpat consequat. Donec volutpat sem ac dolor elementum bibendum.</p>
           <input type="submit" class="btn" value="Read More" />
        </div>
     </div>
     <div style="clear: both;"></div>
  </div>
  <div class="fullwidth"><br /><br /></div>
  <?php include 'footer.php'; ?>

Slider.html

  <div class="skdslider">
    <ul id="demo1" class="slides">
    <li>
<img src="slides/slide1.png" />
<!--Slider Description example-->

</li>
<li><img src="slides/slide2.png" />

</li>

</ul>
</div>

</body>
</html>

将此添加到styles.css中

 body{ margin:0; padding:0;}
.demo-code{ background-color:#ffffff; border:1px solid #333333; display:block; padding:10px;}
.option-table td{ border-bottom:1px solid #eeeeee;}

也要添加这个主js文件

 jQuery(document).ready(function(){
            jQuery('#demo1').skdslider({delay:5000, animationSpeed: 2000,showNextPrev:true,showPlayButton:true,autoSlide:true,animationType:'fading',showNav:false});

            jQuery('#responsive').change(function(){
              $('#responsive_wrapper').width(jQuery(this).val());
            });

        });

希望这能有所帮助

票数 1

Stack Overflow用户

发布于 2014-08-23 15:31:35

试着把你的<script src="scripts/jquery.js" type="text/javascript"></script>就在body标签关闭之前。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25463466

复制

相似问题

问当将图像滑块包含在php页面中时，它无法工作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当将图像滑块包含在php页面中时，它无法工作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当将图像滑块包含在php页面中时，它无法工作
EN