当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 页面添加滚动图片效果

页面添加滚动图片效果

2018年12月29日  | 移动技术网IT编程  | 我要评论

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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网