Question

这是我的代码：

HTML

<!DOCTYPE html> 
<html>
    <head>
        <title>Roohi Health Screnning</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="roohiSTYLE.css">
          <script src="http://code.jquery.com/jquery-latest.min.js"></script>
          <script src="bjqs.min.js"></script>


          <script type="text/javascript">
        jQuery(document).ready(function($) {
    $('#banner-fade').bjqs({
        'height' : 320,
        'width' : 620,
        'responsive' : true
    });
});
            </script>

    </head>
    <body>
    <div>
        <header>
            <h1>Roohisd page<h1> 
        </header>
        <section>
        <!-- Content Starts Here -->
        <header>
            <h1>Welcome to My Site</h1>
            <p>These pages are the work of Me</p>
        </header>

            <nav id="navigation">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="Roohi.html">Roohi</a></li>
                <li><a href="Service.html">Service</a></li>
                <li><a href="Products.html">Products</a></li>
                <li><a href="About-us.html">About Us</a></li>
                <li><a href="findus.html">Find Us</a></li>
            </ul> 
            </nav>


                <div id="my-slideshow">
                <ul class="bjqs">

                <li><img src="images/bloodPresure.jpg"/></li>
                <li><img src="images/Cholesterol.jpg"/></li>
                <li><img src="images/diabetes.jpg"/></li>
            </ul>
            </div>





        <!-- Content Ends Here -->
        </section>

    </div>
    </body>
</html>
enter code here

CSS

body
{
width:800px;
margin:0 auto;
background-color:white;
}

#navigation ul
{
margin:0;
padding:0;
list-style-type:0;
text-align: center;
}

#navigation ul li 
{
display: inline;
color: black;
}

#navigation ul li a
{
text-decoration: none;
padding: .2em 1em;
color: black;
background-color: orange;
}

我正在尝试在HTML文件中进行幻灯片放映。还有javascript所以请soembody帮助让幻灯片正常工作我一整天都在努力谢谢你

Answer 1

只需替换您正在处理的元素，即#my-slideshow，而不是#banner-fade：

jQuery(document).ready(function($) {
    $('#my-slideshow').bjqs({
        'height' : 320,
        'width' : 620,
        'responsive' : true
    });
});

根据您的喜好调整滑块的样式。

JS Fiddle Demo

Answer 2

<!DOCTYPE html> 
<html>
<head>
  <title>Roohi Health Screnning</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="roohiSTYLE.css">
  <link rel="stylesheet" href="bjqs.css">
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="js/bjqs-1.3.min.js"></script>
  <script type="text/javascript">
  jQuery(document).ready(function($) {
    $('#my-slideshow').bjqs({
      'height' : 320,
      'width' : 620,
      '  responsive' : true
    });
  });
  </script>
</head>
<body>
  <div>
    <header>
      <h1>Roohisd page<h1> 
      </header>
      <section>
        <!-- Content Starts Here -->
        <header>
          <h1>Welcome to My Site</h1>
          <p>These pages are the work of Me</p>
        </header>

        <nav id="navigation">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="Roohi.html">Roohi</a></li>
            <li><a href="Service.html">Service</a></li>
            <li><a href="Products.html">Products</a></li>
            <li><a href="About-us.html">About Us</a></li>
            <li><a href="findus.html">Find Us</a></li>
          </ul> 
        </nav>


        <div id="my-slideshow">
          <ul class="bjqs">

            <li><img src="http://lorempixel.com/620/320/city/7"/></li>
            <li><img src="http://lorempixel.com/620/320/city/4"/></li>
            <li><img src="http://lorempixel.com/620/320/city/3"/></li>
          </ul>
        </div>





        <!-- Content Ends Here -->
      </section>

    </div>
  </body>
  </html>

我需要播放幻灯片

2 个答案:

JS Fiddle Demo