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 相关文章推荐
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 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
Terran兵种对照表
2020/03/14 星际争霸
PHP 读取文件内容代码(txt,js等)
2009/12/06 PHP
Cakephp 执行主要流程
2010/03/24 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
javascript json 新手入门文档
2009/12/03 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
儿童学习python的一些小技巧
2018/05/27 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
Python API len函数操作过程解析
2020/03/05 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
STP的判定过程
2012/10/01 面试题
大型营销活动计划书
2014/04/28 职场文书
企业培训简报范文
2015/07/20 职场文书
公司管理制度范本
2015/08/03 职场文书