现在的位置: 首页 -> 前端学习 -> JS前端 -> js全屏banner图片轮播插件

js全屏banner图片轮播插件

2014-06-09 22:23 ⁄ 评论数 0 ⁄ 被浏览 8202 views+

一个全屏的js轮播插件，非常好用，移植性好，今天用到的，收藏一下，以备使用。

js轮播插件

源码参考（以下范例代码，直接复制到本地运行就可以了，都是写的全路径[daixiaorui,com]，方便大家演示效果）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>js全屏banner图片轮播插件</title>

$(document).ready(function() {

/*首页幻灯*/

C_banner($("#banner"), $("#banner_dl"), 6000);

});

//banner

function C_banner(obj, obj1, t) {

var items = obj.find(".banner-item");

var bd_html = "", cfq = null, auto = null;

var items_length = items.length;

for (var i = 0; i < items_length; i++) {

var pic_src = items.find("img").eq(i).attr("src");

items.eq(i).css('background','url(' + pic_src + ') center center no-repeat');

bd_html += '<a href="javascript:void(0)"></a>';

}

/*daixiaorui.com*/

obj1.html(bd_html);

var tool_items = obj1.find("a");

show_item(0);

tool_items.mouseover(function() {

clearTimeout(cfq);

var _this = $(this);

cfq = setTimeout(function() {

clearTimeout(auto);

show_item(_this.prevAll().length);

}, 100);

});

tool_items.mouseout(function() {

clearTimeout(cfq);

});

function show_item(j) {

items.fadeOut("slow");

tool_items.removeClass("cur");

items.eq(j).fadeIn("slow");

tool_items.eq(j).addClass("cur");

auto_run();

};

function auto_run() {

auto = setTimeout(function() {

var x = obj1.find("a.cur").eq(0).prevAll().length;

if ((x + 1) < tool_items.length) {

show_item(x + 1);

} else {

show_item(0);

}

}, t);

};

</script>

<style>

/*banner*/

#banner{position:relative;height:400px;width:100%;border-top:1px solid #fff}

.banner-item{position:absolute;top:0;left:0;height:400px;width:100%;display:none}

.banner-item a{width:100%;height:400px;display:block;overflow:hidden}

.banner-item img{display:none}

.banner_dl_room{position:absolute;width:100%;height:20px;left:0;bottom:0;z-index:99}

#banner_dl{width:1000px;text-align:right;padding-right:35px;margin:0 auto}

#banner_dl a{width:27px;height:6px;background:#fff;display:inline-block;overflow:hidden;margin:0 0 0 5px}

#banner_dl a.cur{background:#0067d0}

</style>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

虽然网上也有很多js轮播的插件，但是这个更精简、更实用。

您可能还会对这些文章感兴趣！

目前有 0 条评论 @我要评论

您的每一个评论都是对我的一份支持

js全屏banner图片轮播插件

您可能还会对这些文章感兴趣！

目前有 0 条评论 @我要评论

您的每一个评论都是对我的一份支持

天气小助手

最新文章

最受欢迎

热门排行

最新评论

返回首页