jQuery实现企业网站横幅焦点图切换功能实例

首页

web前端

js教程

jQuery实现企业网站横幅焦点图切换功能实例_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:01 PM

jquery企业网站切换功能宽度焦点图

本文实例讲述了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 lazy"  src="/static/imghwm/default1.png"  data-src="11.jpg"     style="max-width:90%"  style="max-width:90%" / alt="jQuery实现企业网站横幅焦点图切换功能实例_jquery" ></a>
<div>
<img  class="bigImg lazy"  src="/static/imghwm/default1.png"  data-src="11.jpg"  uri="11.jpg" link="/"    style="max-width:90%"  style="max-width:90%"/ alt="jQuery实现企业网站横幅焦点图切换功能实例_jquery" >
<img  src="/static/imghwm/default1.png"  data-src="22.jpg"  class="lazy" uri="22.jpg" link="/"    style="max-width:90%"  style="max-width:90%"/ alt="jQuery实现企业网站横幅焦点图切换功能实例_jquery" >
<img  src="/static/imghwm/default1.png"  data-src="33.jpg"  class="lazy" uri="33.jpg" link="/"    style="max-width:90%"  style="max-width:90%"/ alt="jQuery实现企业网站横幅焦点图切换功能实例_jquery" >
<img  src="/static/imghwm/default1.png"  data-src="44.jpg"  class="lazy" uri="44.jpg" link="/"    style="max-width:90%"  style="max-width:90%"/ alt="jQuery实现企业网站横幅焦点图切换功能实例_jquery" >
<img  src="/static/imghwm/default1.png"  data-src="55.jpg"  class="lazy" uri="55.jpg" link="/"    style="max-width:90%"  style="max-width:90%"/ alt="jQuery实现企业网站横幅焦点图切换功能实例_jquery" >
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn