非常简单的图像滑块/幻灯片，带左右键。没有自动播放 [英] Very Simple Image Slider/Slideshow with left and right button. No autoplay

问题描述

< style>

。 bxslider  
 {
  width  ：  500px;  
  height  ：  500px;  
 溢出 ：  hidden;  
  position  ：  absolute;  
 
 
} 
。 style17  
 {
 
  width  ：  800px;  
  height  ：  400px;  
  POSI  ：  relative;  
 
} 
 
＃ next  {
  width  ：   10px;  
  height  ：   10px;  
  z-index  ：  99;  
  cursor  ： 指针;  
  text-align  ：  center;  
  line-height  ：  50px;  
  position  ： 绝对;  
  z-index  ：  50;  
  left  ：  0;  
  top  ：  200px;  
 
  opacity  ： 。3;  
 
 
} 
 ＃上游 {
  width  ：  10px;  
  height  ：  10px;  
  z-index  ：  50;  
  cursor  ： 指针;  
  text-align  ：  center;  
  line-height  ：  50px;  
  position  ： 绝对;  
  z-index  ： < span class =code-keyword> 99;  
  right  ： < span class =code-keyword> 20px;  
  top  ： < span class =code-keyword> 200px;  
 
  opacity  ： 。3;  
 
} 
。 style17：hover ＃ next  
 {
  opacity  ：  1;  
  transition  ： 全部.5s缓出;  
} 
。 style17：hover ＃上一页 
 {
  opacity  ：  1;  
  transition  ： 全部.5s缓出;  
} 

< / style>

 <   script     src   =  // ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js\">  <   / script  >  
 <！ -     bxSlider Javascript文件   - >   
 <   script     src   =  jquery.bxslider.min.js >  <   / script  >  
 <！ -     bxSlider CSS file    - >   
 
 <  < span class =code-leadattribute> link     href   =  jquery.bxslider.css    rel   =  stylesheet    /  >  
 
 <   script  >  
 $（function（）{ 
 $（。bxslider）。bxslider（{
 
}）; 
}）; 
 <   / script  >  

 <  < span class =code-leadattribute> div     class   =  style17 >  
 
 < span class =code-keyword><   div     id   =  next >  <   img     src   =  images / Alarm-Arrow-Left -icon.png >  <   / div  >  
 <   div     id   =  prev >  <   img     src   =   images / Alarm-Arrow-Right-icon.png >  <   / div  >  
 
 <   div       class   =  bxslider >  
 
 <   img     src   =  images / 1.jpg   >  
 <   img     src   =  images / 2.jpg   >  
 <   img     src   =  images / 3.jpg   >  
 <   img     src   =  images / 1.jpg   >  
 
 <   / div  >  
 
 <   / div  >  

解决方案

（function（）{

（。bxslider）。bxslider（{

}）;
}）;
< / script >

 <  < span class =code-leadattribute> div     class   =  style17 >  
 
 < span class =code-keyword><   div     id   =  next >  <   img     src   =  images / Alarm-Arrow-Left -icon.png >  <   / div  >  
 <   div     id   =  prev >  <   img     src   =   images / Alarm-Arrow-Right-icon.png >  <   / div  >  
 
 <   div       class   =  bxslider >  
 
 <   img     src   =  images / 1.jpg   >  
 <   img     src   =  images / 2.jpg   >  
 <   img     src   =  images / 3.jpg   >  
 <   img     src   =  images / 1.jpg   >  
 
 <   / div  >  
 
 <   / div  >  

<style>

.bxslider
{
    width:500px;
    height:500px;
    overflow:hidden;
    position:absolute;


}
.style17
 {

width: 800px;
height: 400px;
position:relative;

}

#next {
     width:10px;
    height:10px;
    z-index:99;
    cursor:pointer;
    text-align:center;
    line-height:50px;
    position:absolute;
    z-index:50;
     left:0;
    top:200px;

    opacity:.3;


}
#prev {
     width:10px;
    height:10px;
    z-index:50;
    cursor:pointer;
    text-align:center;
    line-height:50px;
    position:absolute;
    z-index:99;
     right:20px;
    top:200px;

    opacity:.3;

}
.style17:hover #next
 {
    opacity: 1;
    transition: all .5s ease-out;
}
.style17:hover #prev
 {
    opacity: 1;
    transition: all .5s ease-out;
}

</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->

<link href="jquery.bxslider.css" rel="stylesheet" />

     <script>
         $(function () {
             $(".bxslider").bxslider({
                 
             });
         });
  </script>

<div class="style17">

             <div id="next"><img src="images/Alarm-Arrow-Left-icon.png"></div>
             <div id="prev"><img src="images/Alarm-Arrow-Right-icon.png"></div>

                  <div  class="bxslider">

                   <img src="images/1.jpg" >
                   <img src="images/2.jpg" >
                   <img src="images/3.jpg" >
                   <img src="images/1.jpg" >

                   </div>

         </div>

解决方案

(function () {

(".bxslider").bxslider({ }); }); </script>

<div class="style17">

             <div id="next"><img src="images/Alarm-Arrow-Left-icon.png"></div>
             <div id="prev"><img src="images/Alarm-Arrow-Right-icon.png"></div>

                  <div  class="bxslider">

                   <img src="images/1.jpg" >
                   <img src="images/2.jpg" >
                   <img src="images/3.jpg" >
                   <img src="images/1.jpg" >

                   </div>

         </div>

这篇关于非常简单的图像滑块/幻灯片，带左右键。没有自动播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！