jquery左右滚动焦点图banner图片,鼠标经过显示上下页,适合宽和高都比较大的页面使用附演示,感兴趣的朋友可以参考下
jquery左右滚动焦点图banner图片,鼠标经过显示上下页
适合宽和高都比较大的页面使用。
<div class="bannerbox">
<div id="focus">
<ul>
<li><a href="http://www.jbxue.com/" target="_blank">
<img src="../dandong.png" alt="" /></a></li>
<li><a href="http://www.jbxue.com/" target="_blank">
<img src="../mohe.png" alt="" /></a></li>
<li><a href="http://www.freejs.net/" target="_blank">
<img src="../changbaishan.png" alt="" /></a></li>
<li><a href="http://www.freejs.net/" target="_blank">
<img src="../erlianhaote.png" alt="" /></a></li>
</ul>
</div>
</div>
css代码:
@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 = "<div class='btnBg'></div><div class='btn'>";
for (var i = 0; i < len; i++) {
btn += "<span></span>";
}
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$("#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左右滚动焦点图代码,放在网页当中让网页变的更加美观,php中文网推荐下载!
很好用的jQuery左右滚动焦点图,还有缩略图同时跟随滚动,附带样式文件
jQuery图片左右滚动效果代码是一款带左右箭头,自动轮播的jQuery图片切换特效。
jquery鼠标经过图片显示悬浮按钮图片特效
jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) jquery仿苏宁易购商城产品图片全方位展示功能 jquery制作漂亮按钮示例打包 jQuery动态切换网页背景的大块图片的导航栏代码 jquery图文排行混合互相切换...
jquery图片滚动制作一个带有选项卡切换滚动效果且带有左右按钮控制的图片左右滚动焦点图。
jquery图片左右滚动按钮控制图片左右滚动效果代码
jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效
jquery 图片滚动 xslider 插件制作图片自动左右滚动与上下滚动,这个图片滚动xslider插件不复制整个容器里面的内容,直接用按钮控制滚动,直到滚动图片内容到最后一个,适用在图片展示滚动和新
jquery图片滚动特效,制作单排列表图片左右滚动,鼠标滑过图片放大展示,图片左右滚动,图片滚动到最后一张,按钮失去焦点的jQuery图片滚动。jQuery下载。
html5 jQuery左右滚动焦点图切换,001 002 003文件夹分别是3个幻灯的图片包,注意图片名称不要改,若名称有1个不对,则当前幻灯图将无法点击控制。 文字若使用中文,默认宋体会不好看,但可以通过导入相应字体...
jQuery左右图片自动滚动特效,滚动图片数量不限,js已经做了自动判断,当低于滚动数量时,取消自动滚动。
jQuery背景和banner图片一起切换全屏焦点图切换代码
jQuery左右全屏图片倾斜切换焦点图banner
jQuery五屏上下滚动焦点图代码,内有运行界面,原始代码 修改说明
jQuery 图片特效,鼠标经过图标高亮显示
jQuery 插件辅助实现的一款带缩略图图片左右滚动切换焦点图,旋转风格的切换效果,当前图片在显示的同时,左右显示缩略图,点击小圆点的时候缩略图切换至当前大图片模式,代码完整,欢迎下载。
jQuery图片左右滚动banner代码下载
jQuery图片全屏滚动自适应浏览器分辨率宽度焦点图片滚动