图片轮播
经常会看到很多网站有动态地切换图片,大都是都是使用Flash实现的,其它jquery+css+div也是可以实现的。
原理:
1.除了第一张图片,其它都隐蒇。
2.获取第一张图片的alt属性给赋给 title ,并且增加点击事件。
3.增加相应的点击按钮,并且使用jquery的fadeOut()和fadeIn()方法。
4.设置定时器setInterval,定时切换图片。
原码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> jquery实现图片的轮播 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<script type="text/javascript" src="jquery-1.9.js"></script>
<script type="text/javascript">
$(document).ready(function(){
count = $(".list a").length-1;
//获取第一张图片中的alt内容赋给标题
$("#banner_title").html($(".list a:first-child").find("img").attr("alt"));
//点击图片右下角的 1,2,3,4 触发的事件
$("#banner li").click(function(){
var n = $(this).text();
$("#banner_title").html($(".list a").eq(n-1).find("img").attr("alt"));
$(".list a").filter(":visible").fadeOut(500).parent().children().eq(n-1).fadeIn(1000);
$("#banner").css("background","");
$(this).toggleClass("on");
$(this).siblings().removeAttr("class");
});
//设置自动播放
var n=0;
t = setInterval(showAuto,"2000");
//当鼠标经过时取消定时器,经过后再重新定时
$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval(showAuto,
"2000");});
function showAuto()
{
//动态赋值给n
n = n >=(count) ?0 : ++n;
$("#banner li").eq(n).trigger('click');
};
});
</script>
<style type="text/css">
#banner
{
position:relative;
width:400px;
height:336px;
overflow:hidden;
margin:0 auto;
}
#banner_title
{
position:absolute;
bottom:0;
background-color:white;
height:30px;
filter:Alpha(Opacity=50);
opacity:0.3;
z-index:1000;
}
#banner ul
{
margin-top:300px;
margin-left:250px;
position:absolute;
list-style-type:none;
filter: Alpha(Opacity=80);
opacity:0.8;
border:1px solid #fff;
z-index:1002;
}
#banner ul li
{
padding:0px 8px;
float:left;
display:block;
color:#FFF;
border:white 1px solid;
background:blue;
cursor:pointer;
}
#banner ul li.on
{
background:#ccc;
}
#banner .list a
{
position:absolute;
}
</style>
<body>
<div id="banner">
<div id="banner_title"></div>
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="list">
<a href="#" target="_blank"><img src="1(1).jpg" alt="Comexs1"/></a>
<a href="#" target="_blank"><img src="2(1).jpg" alt="Comexs2"/></a>
<a href="#" target="_blank"><img src="3(1).jpg" alt="Comexs3"/></a>
<a href="#" target="_blank"><img src="4(1).jpg" alt="Comexs4"/></a>
</div>
</div>
</body>
</html>
效果图::