jquery左右滚动焦点图banner图片,鼠标经过显示上下页
适合宽和高都比较大的页面使用
XML/HTML Code
- <div class="bannerbox">
- <div id="focus">
- <ul>
- <li><a href="http://www.freejs.net/" target="_blank">
- <img src="../dandong.png" alt="" /></a></li>
- <li><a href="http://www.freejs.net/" 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 Code
- @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文件
JavaScript Code
- $(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左右滚动焦点图banner图片,鼠标经过显示上下页,适合宽和高都比较大的页面使用附演示,感兴趣的朋友可以参考下
jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) jquery仿苏宁易购商城产品图片全方位展示功能 jquery制作漂亮按钮示例打包 jQuery动态切换网页背景的大块图片的导航栏代码 jquery图文排行混合互相切换...
jquery图片特效制作一个全屏自动向左滚动轮播的banner焦点图幻灯片,带3个小图标导航,鼠标滑过图标提示详细文字信息,点击切换焦点图全屏滚动轮播。
jQuery左右滚动banner代码是一款乐视网首页jquery焦点图,自动播放,带缩略图,有左右箭头控制翻页,共10屏,点击缩略图切换大图,左右滑动切换,带文字描述和标题,鼠标滑入播放按钮会散开,如图所示的4个漂亮的按钮...
13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. ...
13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. ...
13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. ...
13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. ...
13.jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14.jquery仿苏宁易购商城产品图片全方位展示功能 15.jquery制作漂亮按钮示例打包 16.jQuery动态切换网页背景的大块图片的导航栏代码 17....
带数字按钮jQuery焦点图代码是一款带数字索引按钮,左右滚动切换效果,支持自动轮播,banner后面的背景图跟随鼠标滑动。