页面添加滚动图片效果

1、jsp核心代码如下：

<div id="bann" class="banner">

<div id="bann_bg" class="banner_bg"></div>
<div id="bann_info" class="banner_info"></div>
<div id="bann_list" class="banner_list">
<a href="#" target="_blank"><img src="1.jpg" alt="测试图片1" /></a>
<a href="#" target="_blank"><img src="2.jpg" alt="测试图片2" /></a>
<a href="#" target="_blank"><img src="3.jpg" alt="测试图片3" /></a>
<a href="#" target="_blank"><img src="4.jpg" alt="测试图片4" /></a>
</div>
</div>

2、css样式核心代码如下：

.banner {position:relative;float:left;margin-left:10px; width:450px; height:300px; overflow:hidden;}
.banner_list img{width:450px; height:300px;border:0}
.banner_bg {position:absolute; bottom:0;background-color:#000;height:28px;filter: Alpha(Opacity=50);opacity:0.5;z-index:1;cursor:pointer; width:400px; }
.banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:2;font-size:14px;cursor:pointer}
.banner_text {position:absolute;width:120px;z-index:3; right:3px; bottom:3px;}
.banner_ul {position:absolute;list-style-type:none;z-index:4;margin:0; padding:0; bottom:3px; right:3px;}
.banner_ul li { width:20px;line-height:20px;text-align:center;float:left;display:block;color:#ff6666;border:#e7f2fd 1px solid;background:#FFF;cursor:pointer}
.banner_ul .banner_on { background:#ff6666;color:#FFF}
.banner_list a{position:absolute;}

3、js核心代码如下：
<script type="text/javascript">

var Speed = 1; //速度(毫秒)
var Space = 12; //每次移动(px)
var PageWidth =220; //翻页宽度
var fill = 0; //整体移位
var MoveLock = false;
var MoveTimeObj;
var Comp = 0;
var AutoPlayObj = null;

$(document).ready(function(){
　　$("#bann").picture(5000);//5秒钟切换图片
});

jQuery.fn.extend({
picture:function(t){
return this.each(function(){
var id="#"+$(this).attr("id");
var n = -1, i_count,interval="<ul class='banner_ul'>";
i_count=$(id+"_list a").length;
for(var i=0;i<i_count;i++){
interval+="<li>"+(i+1)+"</li>";
}
$(id+"_info").after(interval+"<\/ul>");
$(id+" li").click(function(e) {
e.stopPropagation();
n=$(this).index();
$(id+"_info").html($(id+"_list a").eq(n).find("img").attr('alt'));
$(id+"_list a").filter(":visible").fadeOut(500).parent().children().eq(n).fadeIn(1000);
$(this).addClass("banner_on");
$(this).siblings().removeAttr("class");
});
interval = setInterval(showAuto, t);
$(this).hover(function(){clearInterval(interval)}, function(){interval = setInterval(showAuto, t)});
function showAuto(){
n = n >=(i_count-1) ? 0 : ++n;
$(id+" li").eq(n).click();
}
showAuto();
})
}
});

</script>

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有