文章分类 Classification
jQuery实现的图片轮播
稿件来源: 阳光企业网站管理系统 撰稿作者: 太阳光 发表日期: 2014-11-13 阅读次数: 78 查看权限: 游客查看
jQuery实现的图片轮播
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery实现的图片轮播</title>
<style type="text/css">
ul,li,h4,ol{margin: 0;padding: 0;list-style: none}
.index_focus{margin-top: 25px;}.index_focus_banner{width: 591px;height:220px;margin-left: 0;float: left;overflow: hidden;position: relative;}
.index_focus_banner a,.index_focus_banner img{width:100%;height:100%;display: block;border: none}.index_focus_banner a{position: absolute}
.index_focus_banner ol{position: absolute;top:150px;left:0;width:100%;text-align:center;z-index:3}
.index_focus_banner ol li{display:inline-block;*display:inline;*zoom:1;font-size:0;width: 20px;height: 7px;margin:10px 3px;background-color:#717171;opacity: 0.7;filter:alpha(opacity=70);cursor: pointer}
.index_focus_banner ol .on{background-color: #fff}
.index_focus_banner h4{background-color:rgba(0,0,0,0.5);background:transparent\9;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)\9;z-index:3;width:100%;height:42px;position:absolute;left:0;bottom:0;padding-left:10px;white-space:nowrap;overflow: hidden;text-overflow:ellipsis;font:20px/42px "Microsoft YaHei";color: #fff;}
</style>
<script type="text/javascript" src="http://down.scscms.com/scs/pic/jquery-1.6.4.min.js"></script>
</head>
<body>
<div class="index_focus_banner">
<a href="#"><img src="http://down.scscms.com/scs/pic/1.jpg" alt="标题1" /></a>
<a href="#"><img src="http://down.scscms.com/scs/pic/2.jpg" alt="标题2" /></a>
<a href="#"><img src="http://down.scscms.com/scs/pic/3.jpg" alt="标题3" /></a>
<a href="#"><img src="http://down.scscms.com/scs/pic/4.jpg" alt="标题4" /></a>
<a href="#"><img src="http://down.scscms.com/scs/pic/1.jpg" alt="标题5" /></a>
<a href="#"><img src="http://down.scscms.com/scs/pic/2.jpg" alt="标题6" /></a>
<a href="#"><img src="http://down.scscms.com/scs/pic/3.jpg" alt="标题7" /></a>
<a href="#"><img src="http://down.scscms.com/scs/pic/4.jpg" alt="标题8" /></a>
<a href="#"><img src="http://down.scscms.com/scs/pic/3.jpg" alt="标题9" /></a>
<a href="#"><img src="http://down.scscms.com/scs/pic/2.jpg" alt="标题10" /></a>
<h4></h4>
</div>
<div class="index_focus_banner">
<a href="#"><img src="http://down.scscms.com/scs/pic/1.jpg" alt="标题1" /></a>
<a href="#"><img src="http://down.scscms.com/scs/pic/2.jpg" alt="标题2" /></a>
<a href="#"><img src="http://down.scscms.com/scs/pic/3.jpg" alt="标题3" /></a>
<a href="#"><img src="http://down.scscms.com/scs/pic/4.jpg" alt="标题4" /></a>
<a href="#"><img src="http://down.scscms.com/scs/pic/1.jpg" alt="标题5" /></a>
<a href="#"><img src="http://down.scscms.com/scs/pic/2.jpg" alt="标题6" /></a>
<a href="#"><img src="http://down.scscms.com/scs/pic/3.jpg" alt="标题7" /></a>
<a href="#"><img src="http://down.scscms.com/scs/pic/4.jpg" alt="标题8" /></a>
<h4></h4>
</div>
<script type="text/javascript">
/*banner*/
var banner = $(".index_focus_banner").each(function(){
var _this = $(this),a = _this.find("a").hide(),l = a.size();
if(l){
a.first().show();
$('<ol><li class="on">'+ new Array(l).join("</li><li>")+'</li></ol>').appendTo(_this.data("a",a))
.hover(function(){_this.data("stop",1)},function(){_this.removeData("stop")}).delegate("li","click",function(){
!this.className && $(this).siblings().removeAttr("class").end().addClass("on").parent().prev()
.text(a.stop().hide().eq($(this).index()).show().find("img").attr("alt"));
});
}
});
setInterval(function(){
banner.each(function(){
var _this = $(this),a = _this.data("a");
if(a && !_this.data("stop")){
var o = a.filter(":visible"),i = a.index(o) + 1;
i >= a.size() && (i = 0);
$("h4",_this).text(a.eq(i).css({zIndex:1,display:"block",opacity:0}).animate({opacity:1},1000,function(){
$(this).css({zIndex:0});o.hide()}).find("img").attr("alt"));
$("ol li",_this).eq(i).addClass("on").siblings().removeAttr("class");
}
})
},4000);
</script>
</body>
</html>
关键词: jquery,图片轮播 编辑时间: 2015-01-04 21:27:27
0
高兴
0
支持
0
搞笑
0
不解
0
谎言
0
枪稿
0
震惊
0
无奈
0
无聊
0
反对
0
愤怒
0%(0)
0%(0)
中搜索：jQuery实现的图片轮播
中搜索：jQuery实现的图片轮播
- 暂无评论
文章图片 article Pictrue
网友评论