jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮_jquery
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮_jquery，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2229字，纯文字阅读大概需要4分钟。
内容图文
jquery左右滚动焦点图banner图片,鼠标经过显示上下页 适合宽和高都比较大的页面使用
演示
代码如下:
代码如下:
@charset "utf-8";
img { border: 0px; }
.bannerbox { width: 320px; height: 150px; overflow: hidden; margin: 0px auto; }
#focus { width: 320px; height: 150px; clear: both; overflow: hidden; position: relative; float: left; }
#focus ul { width: 320px; height: 150px; float: left; position: absolute; clear: both; padding: 0px; margin: 0px; }
#focus ul li { float: left; width: 320px; height: 150px; overflow: hidden; position: relative; padding: 0px; margin: 0px; }
#focus .preNext { width: 250px; height: 150px; position: absolute; top: 0px; cursor: pointer; }
#focus .pre { left: 0; background: url(../images/sprite.png) no-repeat left center; }
#focus .next { rightright: 0; background: url(../images/sprite1.png) no-repeat rightright center; }
js文件
代码如下:
$(function () {
var sWidth = $("#focus").width();
var len = $("#focus ul li").length;
var index = 0;
var picTimer;
var btn = "
";
for (var i = 0; i < len; i++) {
btn += "";
}
btn += "
"; for (var i = 0; i < len; i++) {
btn += "";
}
btn += "
$("#focus").append(btn);
$("#focus .btnBg").css("opacity", 0);
$("#focus .btn span").css("opacity", 0.4).mouseenter(function () {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
$("#focus .preNext").css("opacity", 0.0).hover(function () {
$(this).stop(true, false).animate({ "opacity": "0.5" }, 300);
}, function () {
$(this).stop(true, false).animate({ "opacity": "0" }, 300);
});
$("#focus .pre").click(function () {
index -= 1;
if (index == -1) { index = len - 1; }
showPics(index);
});
$("#focus .next").click(function () {
index += 1;
if (index == len) { index = 0; }
showPics(index);
});
$("#focus ul").css("width", sWidth * (len));
$("#focus").hover(function () {
clearInterval(picTimer);
}, function () {
picTimer = setInterval(function () {
showPics(index);
index++;
if (index == len) { index = 0; }
}, 2800);
}).trigger("mouseleave");
function showPics(index) {
var nowLeft = -index * sWidth;
$("#focus ul").stop(true, false).animate({ "left": nowLeft }, 300);
$("#focus .btn span").stop(true, false).animate({ "opacity": "0.4" }, 300).eq(index).stop(true, false).animate({ "opacity": "1" }, 300);
}
});
内容总结
以上是互联网集市为您收集整理的jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮_jquery全部内容，希望文章能够帮你解决jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮_jquery所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】