JQuery image scrolling sample code

  • 2020-03-30 02:27:54
  • OfStack

The complete project is attached
 
<!DOCTYPE html> 
<html> 
<head> 
<title> Image switching </title> 
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" > 
var num = 0 
$(function(){ 
$("div ol li").mouseover(function(e){ 
$(this).attr("class","current"); 
$(this).siblings().attr("class",""); //The class attribute of the sibling node is set to null
//alert($('ul').index()) 
num = $('ul').index() + 2 
var index = $(this).index(); //Records the index of the selected li tag in ul
//In order to display the current image, set the z-index value of the current image to greater than the other sibling elements
$("div ul li").eq(index).css({"left":"650px","zIndex":num}) 
$("div ul li").eq(index).siblings().css("zIndex",num-1); 
//Animated effect. Image flies in from the right
$("div ul li").eq(index).animate({left:"0"},500) 

}); 

}); 
</script> 
<style type="text/css"> 
*{margin: 0px;padding: 0px;border: 0px;} 
ul,ol{list-style: none;} 
.all{width:650px;height: 250px;margin: 100px auto;position: relative;border: 1px solid crimson;overflow: hidden;} 
.all ul{position: relative;z-index: 1;position: relative;} 

 
.all ul li{position: absolute;left: 0;top: 0px;} 

.all ol{position: absolute;z-index: 2; right: 10px;bottom: 10px;} 
.all ol li{width: 20px;height: 20px;background: #333;border: 1px solid #509629;font-weight: 
bold;text-align: center;line-height: 20px;float: left;margin-left: 10px;margin-top: 10px;} 

.all ol .current{width: 30px;height: 30px;line-height: 30px;border: 1px solid red;margin-top: 0px; 
cursor: pointer;} 
</style> 
</head> 
<body> 
<div class="all"> 
<ul> 
<li><img src="src/1.jpg" /></li> 
<li><img src="src/2.jpg" /></li> 
<li><img src="src/3.jpg" /></li> 
<li><img src="src/4.jpg" /></li> 
</ul> 
<ol> 
<li class="current">1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ol> 
</div> 
</body> 
</html> 

Related articles: