Home >Web Front-end >JS Tutorial >jQuery code realizes automatic + manual fade-in and fade-out switching effect of picture wall_jquery

jQuery code realizes automatic + manual fade-in and fade-out switching effect of picture wall_jquery

WBOYOriginal: 2016-05-16 15:01:321496browse

You can often see the effect of automatically fading in and out of background images on web pages, which is very beautiful and very practical. Today, I will take some time to share with you the automatic + manual fade-in and fade-out switching effect of the picture wall based on jquery code. Let's learn together!

I will show you the renderings first. If you think it is good, please refer to the specific implementation code.

Add a div (class=container) and set the width and height. Here, the width is 800px and the height is 450px. Add centered positioning. Add a ul (class="img") list to the div to hold the image. Set the position of the li tag in the ul to absolute. At this time, the images will overlap and set the display to none. The image sets the width and height to be the same as the container. Add another ul list to the container to hold the row of numbers below, and then position and set accordingly. Add two divs: left and right, which are the left and right buttons respectively, and perform corresponding positioning and settings. The arrows inside are the greater than sign and the less than sign respectively.

Introduction to implementation ideas and principles:

When the mouse moves over the corresponding number, use $(this).index() to get the serial number in the container where the number is located, then pass the serial number to the eq() function to get the li label, and then add the function fadeIn( ); In this way, the hidden picture is displayed, and sibling().fadeOut() is called at the same time to hide the sibling nodes at the same level, so that the previously displayed picture is hidden.

Add the setInterval() function to change the image at the same time.

I think a major problem is the conflict between automatic switching and manual switching. Automatic switching should be stopped when the mouse moves over the picture. The method used here is:

Add a hover function to the container. When the mouse moves into the container, use the clearInterval() function to remove the time interval function. In this way, when the mouse moves over the picture, the picture will not switch. Add it when the mouse moves out. setInterval() function. This way the pictures can continue to be switched.

Note: i and t need to be set as global variables so that different functions can be shared. i represents the index of the currently displayed image. t is the ID of setInterval. When the mouse moves out, there is no need to var a t, just: t=setInterval(time_fun,1500);.

eq(n): Find the nth element

eg: $('li').eq(2).css('background-color', 'red');//Set the background color of the second li tag to red

index(): Find the index value of the element

If you are interested, study the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>jquery_img_switch</title>
</head>
<style type="text/css">
*{
margin: ;
padding: ;
}
.container{
width: px;
height: px;
margin: px auto;
position: relative;
}
.container .img{
list-style: none;
/*position: absolute;*/
}
.container .img li{
position: absolute;
display: none;
}
.container .img img{
width: px;
height: px;
}
.container .num{
position: absolute;
list-style: none;
font-size: ;
bottom: px;
width: %;
text-align: center; 
}
.container .num li{
width: px;
height: px;
background: rgba(,,,.);
border-radius: %;
color: #;
display: inline-block;
line-height: px;
text-align: center;
font-size: px;
margin-right: px;
cursor: pointer;
}
.left, .right{
width: px;
height: px;
text-align: center;
line-height: px;
background-color: rgba(,,,.);
color: #fff;
position: absolute;
top: %;
margin-top: -px; 
font-size: px;
cursor: pointer;
}
.left{
left: px;
}
.right{
right: px;
}
.container .num .active{
background: rgba(,,,);
color: #fff;
}
</style>
<script type="text/javascript" src="../jquery-...min.js"></script>
<script type="text/javascript">
var i=;
var t;
$(document).ready(function(){
$(".container .img li").eq(i).fadeIn().siblings().fadeOut(); 
$(".container .num li").on("mouseover",active);
t=setInterval(time_fun,);
$(".container").hover(in_fun,out_fun);
$(".container .left").on("click",left_fun);
$(".container .right").on("click",right_fun);
});
function time_fun(){
i++;
if(i==){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
function in_fun(){
clearInterval(t);
}
function out_fun(){
t=setInterval(time_fun,);
}
function active(){
$(this).addClass("active").siblings().removeClass("active");
$(".container .img li").eq($(this).index()).fadeIn().siblings().fadeOut();
i=$(this).index();
}
function left_fun(){
i--;
if(i==-){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
function right_fun(){
i++;
if(i==){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
</script>
<body>
<div class="container">
<ul class="img">
<li ><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
</ul>
<ul class="num">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="left"><</div>
<div class="right">></div>
</div>
</body>
</html>

The above is the jQuery code brought to you by the editor to realize the automatic + manual fade-in and fade-out switching effect of the picture wall. I hope it will be helpful to you. At the same time, I also thank you very much for your support of the Script House website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Prototype learning guide in JavaScript_Basic knowledgeNext article：Prototype learning guide in JavaScript_Basic knowledge

See more

jQuery code realizes automatic + manual fade-in and fade-out switching effect of picture wall_jquery

Related articles