首页幻灯片代码实例

一下是案例代码,可以根据自己的需要再次修改。

<body>
 <div class="show">
  <div class="myShow">
   <div class="number">1 / 4</div>
   <img src="../image/huan1.jpg" alt="">
   <div class="text">introduction1</div>
  </div>
  <div class="myShow">
   <div class="number">2 / 4</div>
   <img src="../image/huan2.jpg" alt="">
   <div class="text">introduction2</div>
  </div>
  <div class="myShow">
   <div class="number">3 / 4</div>
   <img src="../image/huan3.jpg" alt="">
   <div class="text">introduction3</div>
  </div>
  <div class="myShow">
   <div class="number">4 / 4</div>
   <img src="../image/huan4.jpg" alt="">
   <div class="text">introduction4</div>
  </div>
  <div class="dot_contain">
   <div class="dot" onmouseenter="currentShow(1)">1</div>
   <div class="dot" onmouseenter="currentShow(2)">2</div>
   <div class="dot" onmouseenter="currentShow(3)">3</div>
   <div class="dot" onmouseenter="currentShow(4)">4</div>
  </div>

  <a class="prev">❮</a>
  <a class="next">❯</a>
 </div>
 <br>
</body>


<style> 
  *{
   font-family: 微软雅黑;
  }
  .show{
   max-width: 1000px;
   position: relative;
   margin:auto;
  }

  .myShow{
   display: none;
  }
  
  img{
   width: 100%;
  }

/*-------------------------------------------------------------------*/
  /*文字部分s*/
  .text {
   color: #f2f2f2;
   font-size: 15px;
   padding: 8px 12px;
   position: absolute;
   bottom: 8px;
   right: 8px;
   width: 50%;
   text-align: center;
   /*border:1px solid #000;*/
  }

   /*数字文字部分*/
  .number{
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
/*-------------------------------------------------------------------*/
  /*左右切换*/
  .prev,.next{
   cursor: pointer;
   position:absolute;
   top:50%;
   margin-top: -22px;
   padding: 16px;
   border-radius: 0 3px 3px 0;
   color: #000;
   font-size: 50px;
   font-weight: bold;
  }

  .next{
   right:0px;
  }

  .prev:hover, .next:hover {
   background-color:#DCDCDC;
   opacity: 0.3;
  }
/*-------------------------------------------------------------------*/
  /*幻灯片下方圆点*/
  .dot_contain{
   position:absolute;
   bottom:8px;
   text-align: center;
  }

  .dot{
   font-size: 10px;
   font-weight: bold;
   text-align: center;
   height: 20px;
   width: 20px;
   margin: 0 2px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
  }

  .active, .dot:hover {
   background-color: #696969;
  }

 </style>
 
 
 
<script src="../jquery-1.11.3/jquery-1.11.3.min.js"></script>

<script>
 index = 1;
 show(index);
  
 function changeShow(n) {
   show(index += n);
 }
  
 function currentShow(n) {
   show(index = n);
 }
 
 function show(n) {
 //根据class名获取到shows和dots
   shows=$('.myShow');
   dots =$('.dot');

   //获取到幻灯片长度-----即幻灯片个数
   length=shows.length;

   //获取到幻灯片下方圆圈个数
   dotLength=dots.length;

   //如果向后走到最后一张幻灯片时,则将index=1-----即切换到第一张幻灯片
   if (n > length) {
    index = 1;
   }else if (n < 1) {//如果向前走到第一张幻灯片时,则将index=length-----即切换到最后一张幻灯片
    index = length;
   }


   for (i = 0; i < length; i++) {
       shows[i].style.display = "none"; 
   }

   for (i = 0; i < dotLength; i++) {
       dots[i].className = dots[i].className.replace("active", "");
   }

   shows[index-1].style.display = "block"; 
   dots[index-1].className += " active";
 }

 $('.prev').click(function(){
  changeShow(-1);
 });
 $('.next').click(function(){
  changeShow(1);
 }); 
</script>


收藏
0
有帮助
0
没帮助
0
业界动态