小贝子编程

带有计时器和指示器的幻灯片



你好，我正试图获得一个带有计时器的幻灯片和图标，以手动更改幻灯片。我有java中图标的代码，但我希望整个东西在JQuery中，因为我更擅长(但仍然是一个电圈)

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("slide");
      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("Jdot", "");
      }
      x[slideIndex-1].style.display = "block";
      dots[slideIndex-1].className += "Jdot";
    }
$(document).ready(function() {
$('div.table1').fadeIn(2000);
var aboveHeight = $('title').outerHeight();
$(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('div.nav').addClass('fixed').css('top','0').next()
        .css('padding-top','46px');
        } else {
        $('div.nav').removeClass('fixed').next()
        .css('padding-top','0');
        }
    });
});
body {
    margin: 0 auto;
    padding: 0;
    background-color: #f5f5f5;
    background-image: url("images/ReStock.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position:center;
    font-family:Arial;
    letter-spacing: .5;
}
li {
    float: left;
}
.link {
    color: #0073e6;
    text-decoration: none;
}
.link:hover {
    color: #3399ff;
    text-decoration: underline;
}
.title {
    text-align: center;
    font-family:Arial;
    color: #252525;
    font-size: 27px;
    height: 60;
    line-height: 2.5;
    letter-spacing: 4px;
}
.rx {
    height: 90;
}
.nav{
    position:relative;
    z-index: 3;
    display:block;
    width: 100%
}
.navbar{
    color:#1075ff;
    background-color: #404040;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family:Arial;
    letter-spacing: .5;
    position:relative;
    display:block;
    z-index: 3;
    width: 100%;
}  
.navitem {
    padding: 14px 16px;
    text-align: center;
    display: block;    
}
.navitem:hover {
    background-color:#0044aa;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
}
.navitem:active {
    background-color: #ffb31a;
    color: #4d88ff;
    -o-transition:.0s;
    -ms-transition:.0s;
    -moz-transition:.0s;
    -webkit-transition:.0s;
}
.slideshow {
    height: 360px;
    width: 720px;
    margin:auto;
    position:relative;
}
.slide {
    max-width: 100%;
    height: auto;
    display:none;
    box-sizing: inherit;
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}
@-webkit-keyframes slide {
  from {opacity: .4} 
  to {opacity: 1}
}
@keyframes slide {
  from {opacity: .4} 
  to {opacity: 1}
}
.slidetext {
    position:absolute;
    font-size: 23px;
    margin: 15px;
}
.slideright {
    cursor: pointer;
    float: right;
    color: #fff;
    margin-bottom: 4px;
    -webkit-transition:background-color .3s,
        color .15s,
        box-shadow .3s,
        opacity 0.3s,
        filter 0.3s;
    transition:background-color .3s,
        color .15s,
        box-shadow .3s,
        opacity 0.3s,
        filter 0.3s
}
.slideleft {
    cursor: pointer;
    float: left;
    color: #fff
    -webkit-transition:background-color .3s,
        color .15s,
        box-shadow .3s,
        opacity 0.3s,
        filter 0.3s;
    transition:background-color .3s,
        color .15s,
        box-shadow .3s,
        opacity 0.3s,
        filter 0.3s
}
.slideleft:hover, .slideright:hover {
    color:#50aaff!important
}
.slideicon {
    text-align: center;
    font-size: 18px!important;
    color: #fff!important;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    box-sizing: inherit;
}
.slidedot {
    cursor: pointer;
    background-color:transparent!important;
    color:#fff;
    display: inline-block;
    padding: 5px;
    text-align: center;
    border-radius: 50%;
    border:1px solid #ccc;
    margin-top: 7px;
    -webkit-transition:background-color .3s,
        color .15s,
        box-shadow .3s,
        opacity 0.3s,
        filter 0.3s;
    transition:background-color .3s,
        color .15s,
        box-shadow .3s,
        opacity 0.3s,
        filter 0.3s
}
.slidedot:hover {
    color:#000!important;
    background-color:#fff!important
}
.Jdot {
    color:#000!important;
    background-color:#fff!important;
}
.holder {
    width: 800;
    height: 5000;
    background-color: rgba(0,0,0,.6);
    padding: 50;
}
.fixed {
    position: fixed;
}
.addPatientPane {
    background-color: rgba(240,240,240, 1);
    width: 200px;
    height: 362px;
    border-radius: .75%;
    padding: 50px;
    margin-left: 30px;
}
.aboutPane {
    background-color: rgba(240,240,240, 1);
    width: 200px;
    height: 362px;
    border-radius: .75%;
    padding: 50px;
    margin-left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title">       
                <span>Louis's Pharmacy<br></span>      
        </div>
        <div style="text-align: center;">
           <div class="nav">
            <ul class="navbar">
                <li class = "navitem"> Patient </li>
                <li class = "navitem">Place</li>
                <li class = "navitem">Holder</li>
                <li class = "navitem">Items</li>
                <li class = "navitem">About</li>
                <li class = "NavItem" style="float:right">&nbsp;Login&nbsp;</li>
            </ul>
            </div>
            <center>
               <div class="holder">
                   <div style="margin-top: 50px; display: none;" class="table1" >
                    <table >
                        <tr>
                            <td colspan="3">
                                <div class="slideshow">
                                    <div class="slide"><span class="slidetext">
                                        <span style="font-size: 35px;">Louis Pharmacy</span><br>
                                        Where you are always welcome!
                                        </span>
                                        <img src="Images/drugs.jpg">
                                    </div>
                                    <img class="slide" src="Images/Stock.jpg">
                                    <img class="slide" src="">
                                    <img class="slide" src="">
    
                                    <div class="slideicon" style="width:100%">
                                        <div class="slideleft" onclick="plusDivs(-1)">&nbsp;&nbsp;&#10094;</div>
                                        <div class="slideright" onclick="plusDivs(1)">&#10095;&nbsp;&nbsp;</div>
    
                                        <span class="slidedot demo " onclick="currentDiv(1)"></span>
    
                                        <span class="slidedot demo " onclick="currentDiv(2)"></span>
    
                                        <span class="slidedot demo " onclick="currentDiv(3)"></span>
    
                                        <span class="slidedot demo " onclick="currentDiv(4)"></span>
    
    
                                    </div>
    
    
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3 style="height="30px"></td>
                        </tr>
                        <tr>
                            <td style="max-width: 280px;max-height: 400px;">
                                <div class="addPatientPane">
                                    Add a Patient *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* <a href="" class="link">... Sign up today!</a>
                                </div>
                            </td>
                            
                            <td style="width:20px"></td>
                            
                            <td>
                                <div class="aboutPane">
                                    About Us *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* <a href="" class="link">... Learn more!</a>
                                </div>
                            </td>
                        </tr>
    
    
    
    
                    </table>
                   </div>
                </div>
            </center>
        </div>

您所需要做的就是使用setInterval()在计时器上循环播放幻灯片。我建议您在淡入后立即这样做，就像这样:

$('div.table1').fadeIn(2000, function() {
  setInterval(function() {
    plusDivs(1);
  }, 5000);
});

请看下面的代码片段:

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("slide");
  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("Jdot", "");
  }
  x[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += "Jdot";
}
$(document).ready(function() {
  $('div.table1').fadeIn(2000, function() {
    setInterval(function() {
      plusDivs(1);
    }, 5000);
  });
  var aboveHeight = $('title').outerHeight();
  $(window).scroll(function() {
    if ($(window).scrollTop() > aboveHeight) {
      $('div.nav').addClass('fixed').css('top', '0').next()
        .css('padding-top', '46px');
    } else {
      $('div.nav').removeClass('fixed').next()
        .css('padding-top', '0');
    }
  });
});
body {
  margin: 0 auto;
  padding: 0;
  background-color: #f5f5f5;
  background-image: url("images/ReStock.jpg");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  font-family: Arial;
  letter-spacing: .5;
}
li {
  float: left;
}
.link {
  color: #0073e6;
  text-decoration: none;
}
.link:hover {
  color: #3399ff;
  text-decoration: underline;
}
.title {
  text-align: center;
  font-family: Arial;
  color: #252525;
  font-size: 27px;
  height: 60;
  line-height: 2.5;
  letter-spacing: 4px;
}
.rx {
  height: 90;
}
.nav {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%
}
.navbar {
  color: #1075ff;
  background-color: #404040;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: Arial;
  letter-spacing: .5;
  position: relative;
  display: block;
  z-index: 3;
  width: 100%;
}
.navitem {
  padding: 14px 16px;
  text-align: center;
  display: block;
}
.navitem:hover {
  background-color: #0044aa;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
}
.navitem:active {
  background-color: #ffb31a;
  color: #4d88ff;
  -o-transition: .0s;
  -ms-transition: .0s;
  -moz-transition: .0s;
  -webkit-transition: .0s;
}
.slideshow {
  height: 360px;
  width: 720px;
  margin: auto;
  position: relative;
}
.slide {
  max-width: 100%;
  height: auto;
  display: none;
  box-sizing: inherit;
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes slide {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}
@keyframes slide {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}
.slidetext {
  position: absolute;
  font-size: 23px;
  margin: 15px;
}
.slideright {
  cursor: pointer;
  float: right;
  color: #fff;
  margin-bottom: 4px;
  -webkit-transition: background-color .3s, color .15s, box-shadow .3s, opacity 0.3s, filter 0.3s;
  transition: background-color .3s, color .15s, box-shadow .3s, opacity 0.3s, filter 0.3s
}
.slideleft {
  cursor: pointer;
  float: left;
  color: #fff -webkit-transition: background-color .3s, color .15s, box-shadow .3s, opacity 0.3s, filter 0.3s;
  transition: background-color .3s, color .15s, box-shadow .3s, opacity 0.3s, filter 0.3s
}
.slideleft:hover,
.slideright:hover {
  color: #50aaff!important
}
.slideicon {
  text-align: center;
  font-size: 18px!important;
  color: #fff!important;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  box-sizing: inherit;
}
.slidedot {
  cursor: pointer;
  background-color: transparent!important;
  color: #fff;
  display: inline-block;
  padding: 5px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin-top: 7px;
  -webkit-transition: background-color .3s, color .15s, box-shadow .3s, opacity 0.3s, filter 0.3s;
  transition: background-color .3s, color .15s, box-shadow .3s, opacity 0.3s, filter 0.3s
}
.slidedot:hover {
  color: #000!important;
  background-color: #fff!important
}
.Jdot {
  color: #000!important;
  background-color: #fff!important;
}
.holder {
  width: 800;
  height: 5000;
  background-color: rgba(0, 0, 0, .6);
  padding: 50;
}
.fixed {
  position: fixed;
}
.addPatientPane {
  background-color: rgba(240, 240, 240, 1);
  width: 200px;
  height: 362px;
  border-radius: .75%;
  padding: 50px;
  margin-left: 30px;
}
.aboutPane {
  background-color: rgba(240, 240, 240, 1);
  width: 200px;
  height: 362px;
  border-radius: .75%;
  padding: 50px;
  margin-left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title">
  <span>Louis's Pharmacy<br></span> 
</div>
<div style="text-align: center;">
  <div class="nav">
    <ul class="navbar">
      <li class="navitem">Patient</li>
      <li class="navitem">Place</li>
      <li class="navitem">Holder</li>
      <li class="navitem">Items</li>
      <li class="navitem">About</li>
      <li class="NavItem" style="float:right">&nbsp;Login&nbsp;</li>
    </ul>
  </div>
  <center>
    <div class="holder">
      <div style="margin-top: 50px; display: none;" class="table1">
        <table>
          <tr>
            <td colspan="3">
              <div class="slideshow">
                <div class="slide"><span class="slidetext">
                                        <span style="font-size: 35px;">Louis Pharmacy</span>
                  <br>Where you are always welcome!
                  </span>
                  <img src="Images/drugs.jpg">
                </div>
                <img class="slide" src="Images/Stock.jpg">
                <img class="slide" src="">
                <img class="slide" src="">
                <div class="slideicon" style="width:100%">
                  <div class="slideleft" onclick="plusDivs(-1)">&nbsp;&nbsp;&#10094;</div>
                  <div class="slideright" onclick="plusDivs(1)">&#10095;&nbsp;&nbsp;</div>
                  <span class="slidedot demo " onclick="currentDiv(1)"></span>
                  <span class="slidedot demo " onclick="currentDiv(2)"></span>
                  <span class="slidedot demo " onclick="currentDiv(3)"></span>
                  <span class="slidedot demo " onclick="currentDiv(4)"></span>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="3 style=" height="30px"></td>
          </tr>
          <tr>
            <td style="max-width: 280px;max-height: 400px;">
              <div class="addPatientPane">
                Add a Patient *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT*
                *SAMPLE_TEXT* <a href="" class="link">... Sign up today!</a>
              </div>
            </td>
            <td style="width:20px"></td>
            <td>
              <div class="aboutPane">
                About Us *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT* *SAMPLE_TEXT*
                <a href="" class="link">... Learn more!</a>
              </div>
            </td>
          </tr>

        </table>
      </div>
    </div>
  </center>
</div>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium