您的位置：首页 > Web前端 > JQuery

图片轮播(类似Flash)jquery

2013-06-10 21:46 246 查看

图片轮播

      经常会看到很多网站有动态地切换图片，大都是都是使用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>

效果图:：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery CSS

相关文章推荐

新的分享

章节导航