Of Stack

jQuery Realizes Big Picture Carousel

  • 2021-07-21 06:05:38
  • OfStack

css style: 


*{
 margin: 0;
 padding: 0;
}
ul{
 list-style:none;
}
.slideShow{
 width: 620px;
 height: 700px; /* Is actually the height of the picture */
 border: 1px #eeeeee solid;
 margin: 100px auto;
 position: relative;
 overflow: hidden; /* Here, you need to hide the picture part of the overflow frame */
}
.slideShow ul{
 width: 2500px;
 position: relative; /* Note here relative :  Objects cannot be cascaded, but will be based on the left , right , top , bottom Attributes such as this are offset in the normal document stream. Without this attribute, the picture will not move left and right */
}
.slideShow ul li{
 float: left; /* Jean 4 Pictures float to the left, forming a side-by-side horizontal layout, which is convenient for moving to the left when clicking a button */
 width: 620px;
}
.slideShow .showNav{ /* Layout numeric buttons with absolute positioning */
 position: absolute;
 right: 10px;
 bottom: 5px;
 text-align:center;
 font-size: 12px; 
 line-height: 20px;
}
.slideShow .showNav span{
 cursor: pointer;
 display: block;
 float: left;
 width: 20px;
 height: 20px;
 background: #ff5a28;
 margin-left: 2px;
 color: #fff;
}
.slideShow .showNav .active{
 background: #b63e1a;
}

js code specification: 


<script src="../../../jQuery/js/jquery-2.1.4.js"></script> <script type="text/javascript">
$(document).ready(function(){ 
var slideShow=$(".slideShow"),  // Gets the name of the outermost frame  
ul=slideShow.find("ul"), 
showNumber=slideShow.find(".showNav span"),   // Get button  
oneWidth=slideShow.find("ul li").eq(0).width();   // Gets the width of each picture  
var timer=null;   // Timer return value, mainly used to turn off the timer  
var iNow=0;   //iNow Index the value of the picture being displayed. When the user opens the web page, the first 1 Graph, that is, the index value is 0 
showNumber.on("click",function(){    // Bind for each button 1 Click events   
$(this).addClass("active").siblings().removeClass("active");  // Add a highlight to the button when it is clicked, and remove the highlight of other buttons  
var index=$(this).index();    // Get which button was clicked, that is, find the index value of the clicked button  
iNow=index; 
ul.animate({ "left":-oneWidth*iNow,  // Note that the left Property, so ul You need to set the style of position: relative;  Jean ul Left shift N The width of a picture size, N Index value according to the clicked button iNOWx Determine  
 }) 
 }); 
 function autoplay(){ 
timer=setInterval(function(){   // Turn on the timer  
iNow++;     // Let the index values of pictures be added in order 1 So that you can carousel pictures sequentially  
 if(iNow>showNumber.length-1){   // When reaching the end, 1 When drawing a picture, let iNow Assign a value to the 1 The index value of the map, the carousel effect jumps to the first 1 The picture starts again  
iNow=0; } 
showNumber.eq(iNow).trigger("click");   // Analog to trigger the digital button click 

},2000);     //2000 Is the time of carousel 
} 
 autoplay(); 
 slideShow.hover( function(){clearInterval(timer);},autoplay);  Also note setInterval The usage of is more critical. 
})
</script>

Body code: 


<body>
 <div class="slideShow">
 <!-- Picture layout starts -->
 <ul>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/view/111.jpg"/></a></li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/view/112.jpg" /></a></li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/view/113.jpg" /></a></li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/view/114.jpg" /></a></li>
 </ul>
 <!-- End of picture layout -->
 <!-- Button layout start -->
 <div class="showNav">
 <span class="active">1</span>
 <span>2</span>
 <span>3</span>
 <span>4</span>
 </div>
 <!-- Button layout end -->
 </div>
</body>
Related articles: