Home > Web Front-end > JS Tutorial > JQuery implements image carousel effect_jquery

JQuery implements image carousel effect_jquery

WBOY
Release: 2016-05-16 15:39:15
Original
1411 people have browsed it

[Brief description of principle]

Here is a brief description of the entire process:

1, hide all pictures except the first one,

2. Get the alt information of the first picture and display it in the information bar, and add a click event

3. Add click listening for the 4 buttons, click the corresponding button, and use the fadeOut and fadeIn methods to display the image

4. Set setInterval and execute the switching function regularly

[Code description]

filter(":visible") : Get all visible elements

unbind(): Removes the bound event from the matching element

siblings: Get an element set containing all unique sibling elements of each element in the matched element set

Example: Find elements with the class name selected among all sibling elements of each div.

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
Copy after login

Execute $("div").siblings(), the result

[ <p>Hello</p>, <p>And Again</p> ]
Copy after login

[Program source code]
HTML part:

<body>
<div id="banner"> 
<div id="banner_bg"></div><!--标题背景-->
<div id="banner_info"></div><!--标题-->
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="banner_list">
<a href="#" target="_blank"><img src="imgs/p1.jpg" title="JQuery implements image carousel effect_jquery" alt="JQuery implements image carousel effect_jquery"/></a>
<a href="#" target="_blank"><img src="imgs/p5.jpg" title="JQuery implements image carousel effect_jquery" alt="JQuery implements image carousel effect_jquery"/></a>
<a href="#" target="_blank"><img src="imgs/p3.jpg" title="JQuery implements image carousel effect_jquery" alt="JQuery implements image carousel effect_jquery"/></a>
<a href="#" target="_blank"><img src="imgs/p4.jpg" title="JQuery implements image carousel effect_jquery" alt="JQuery implements image carousel effect_jquery"/></a>
</div>
</div>
</body>
Copy after login

CSS part:

<style type="text/css">
#banner {position:relative; width:478px; height:286px; border:1px solid #666; overflow:hidden;}
#banner_list img {border:0px;}
#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;
cursor:pointer; width:478px;}
#banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;
margin:0; padding:0; bottom:3px; right:5px;}
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}
#banner ul li.on { background:#900}
#banner_list a{position:absolute;} <!-- 让四张图片都可以重叠在一起-->
</style>
Copy after login

JS part:

<script type="text/javascript">
var t = n =0, count;
$(document).ready(function(){ 
count=$("#banner_list a").length;
$("#banner_list a:not(:first-child)").hide();
$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
$("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
$("#banner li").click(function() {
var i = $(this).text() -1;//获取Li元素内的值,即1,2,3,4
n = i;
if (i >= count) return;
$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
$("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
document.getElementById("banner").style.background="";
$(this).toggleClass("on");
$(this).siblings().removeAttr("class");
});
t = setInterval("showAuto()", 4000);
$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
})

function showAuto()
{
n = n >=(count -1) &#63;0 : ++n;
$("#banner li").eq(n).trigger('click');
}
</script>
Copy after login

The above is the entire process of implementing image carousel with JQuery. I hope it will be helpful to everyone’s learning.

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template