>  기사  >  웹 프론트엔드  >  기업 홈페이지 배너 포커스 이미지 전환 기능을 구현한 jQuery의 예_jquery

기업 홈페이지 배너 포커스 이미지 전환 기능을 구현한 jQuery의 예_jquery

WBOY
WBOY원래의
2016-05-16 16:01:30889검색

이 기사의 예에서는 jQuery가 기업 웹사이트 배너의 초점 이미지 전환 기능을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery淡出淡入带缩略图幻灯片</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style>
.flashBanner{width:782px;height:326px;
overflow:hidden;margin:0 auto;
}
.flashBanner{position:relative;}
.flashBanner .mask{height:32px;line-height:32px;
background-color:#000;width:100%;
text-align:right;position:absolute;left:0;
bottom:-32px;filter:alpha(opacity=70);
-moz-opacity:0.7;opacity:0.7;overflow:hidden;
}
.flashBanner .mask img{
vertical-align:middle;
margin-right:10px;
cursor:pointer;
}
.flashBanner .mask img.show{margin-bottom:3px;}
</style>
<script type="text/javascript">
$(function(){
$(".flashBanner").each(function(){
var timer;
$(".flashBanner .mask img").click(function(){
var index = $(".flashBanner .mask img").index($(this));

changeImg(index);
}).eq(0).click();
$(this).find(".mask").animate({
"bottom":"0" 
},700);
$(".flashBanner").hover(function(){
clearInterval(timer);

},function(){
timer = setInterval(function(){
var show = $(".flashBanner .mask img.show").index();
if (show >= $(".flashBanner .mask img").length-1)
show = 0;
else
show ++;
changeImg(show);
},3000);
});
function changeImg (index)
{
$(".flashBanner .mask img").removeClass("show").eq(index).addClass("show");
$(".flashBanner .bigImg").parents("a").attr("href",$(".flashBanner .mask img").eq(index).attr("link"));
$(".flashBanner .bigImg").hide().attr("src",$(".flashBanner .mask img").eq(index).attr("uri")).fadeIn("slow");
}
timer = setInterval(function(){
var show = $(".flashBanner .mask img.show").index();
if (show >= $(".flashBanner .mask img").length-1)
show = 0;
else
show ++;
changeImg(show);
},3000);
});
});
</script>
</head>
<body>
<div class="flashBanner">
<a href="/"><img class="bigImg" width="782" height="326" /></a>
<div class="mask">
<img src="11.jpg" uri="11.jpg" link="/" width="60" height="22"/>
<img src="22.jpg" uri="22.jpg" link="/" width="60" height="22"/>
<img src="33.jpg" uri="33.jpg" link="/" width="60" height="22"/>
<img src="44.jpg" uri="44.jpg" link="/" width="60" height="22"/>
<img src="55.jpg" uri="55.jpg" link="/" width="60" height="22"/>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.