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

JQuery implements image carousel effect_jquery

WBOYOriginal: 2016-05-16 15:39:151387browse

[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>

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

[ <p>Hello</p>, <p>And Again</p> ]

[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>

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>

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>

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

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：JavaScript encapsulates a tab effect source code sharing_javascript skillsNext article：JavaScript encapsulates a tab effect source code sharing_javascript skills

See more

JQuery implements image carousel effect_jquery

Related articles