jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮


Posted in Javascript onOctober 11, 2013

jquery左右滚动焦点图banner图片,鼠标经过显示上下页
适合宽和高都比较大的页面使用
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮 
演示

<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>

@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); 
} 
});
Javascript 相关文章推荐
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
jQuery.extend 函数详解
Feb 03 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 #Javascript
Js base64 加密解密介绍
Oct 11 #Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 #Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 #Javascript
jQuery下的动画处理总结
Oct 10 #Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 #Javascript
JavaScript 垃圾回收机制分析
Oct 10 #Javascript
You might like
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
php 安全过滤函数代码
2011/05/07 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
JavaScript中的私有成员
2006/09/18 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
python中as用法实例分析
2015/04/30 Python
python实现人脸识别代码
2017/11/08 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
thinkphp5 路由分发原理
2021/03/18 PHP
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
学校联谊活动方案
2014/02/15 职场文书
《望洞庭》教学反思
2014/02/16 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
对讲机知识
2022/04/07 无线电