Javascript Web Slider 焦点图示例源码


Posted in Javascript onOctober 10, 2013

HTML代码:

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style> 
*{padding:0;margin:0} 
ul{list-style:none} 
.slider-focus{width:670px;height:240px;overflow:hidden;position:relative;margin:100px auto} 
.slider-focus .slider{width:3500px; position:absolute; left:0px; top:0px; height:240px} 
.slider-focus .slider li{float:left;} 
.slider-focus .btns{position: absolute; right: 0px; bottom: 5px} 
.slider-focus .btns li{width:18px;height:18px; float:left; background:#fff; margin-right:5px; cursor:pointer} 
.slider-focus .btns li.cur{background:#f60} 
</style> 
</head> 
<body> 
<div class="slider-focus"> 
<ul class="slider"> 
<li><img src="http://img14.360buyimg.com/da/g13/M03/0D/0D/rBEhVFJCwIQIAAAAAADs5q4P0g8AADgxQMhvMIAAOz-234.jpg"></li> 
<li><img src="http://img11.360buyimg.com/da/g13/M05/0D/0A/rBEhUlJCfiYIAAAAAADqWhDpUVsAADfqgDwmw4AAOpy960.jpg"></li> 
<li><img src="http://img11.360buyimg.com/da/g14/M07/11/15/rBEhVVI_5zMIAAAAAADDgfSaKlQAADc8AFf20cAAMOZ670.jpg"></li> 
<li><img src="http://img11.360buyimg.com/da/g13/M03/0D/13/rBEhVFJD_HcIAAAAAADsfenKOe0AADjVwPmryQAAOyV341.jpg"></li> 
<li><img src="http://img14.360buyimg.com/da/g15/M00/0C/0E/rBEhWlJEHcwIAAAAAAEFI3XGv_YAADj-wC9W60AAQU7805.jpg"></li> 
</ul> 
<ul class="btns"> 
<li class="cur"></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
</ul> 
</div> 
<script src="jquery-1.9.1.js"></script> 
<script src="slider.js"></script> 
</body> 
</html>

Javasscript 代码:
function Sliderfocus(options){ 
this.focus = options.focus; 
this.slider = options.slider; 
this.btns = options.btns; 
this.width = options.width; 
this.speed = options.speed || 800; 
this.curIndex = options.curIndex || 0; 
this.size = this.btns.size(); 
this.init(); 
this.timeout = null; 
this.stopTemp = 1 ; 
} Sliderfocus.prototype = { 
init:function(){ 
this.auto(); 
this.bind(); 
}, 
play:function(){ 
this.slider.stop().animate({ 
left:-this.curIndex * this.width 
},this.speed); 
}, 
auto:function(){ 
var that = this; 
this.timeout = setTimeout(function(){ 
if(that.stopTemp == 0){ 
return; 
}else{ 
that.next(); 
that.auto(); 
} 
},4000); 
}, 
prev:function(){ 
this.curIndex = --this.curIndex<0? this.size-1 : this.curIndex; 
this.play(); 
}, 
next:function(){ 
this.curIndex = ++this.curIndex>this.size-1? 0 : this.curIndex; 
console.log(this.curIndex) 
this.play(); 
}, 
stop:function(){ 
this.stopTemp = 0; 
}, 
bind:function(){ 
var that = this; 
this.focus.bind("mouseover",function(){ 
that.stop(); 
}).bind("mouseout",function(){ 
that.stopTemp = 1; 
//that.auto(); 
}); 
this.letsgo(); 
}, 
letsgo:function(){ 
var that = this; 
this.btns.bind("click",function(){ 
var index = $(this).index(); 
that.curIndex = index; 
that.play(); 
}); 
} 
}; 
new Sliderfocus({ 
focus:$(".slider-focus"), 
slider:$(".slider-focus .slider"), 
btns:$(".btns li"), 
width:670 
});
Javascript 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
JavaScript效率调优经验
Jun 04 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
详解vue引入子组件方法
Feb 12 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 #Javascript
js切换光标示例代码
Oct 10 #Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 #Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 #Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 #Javascript
javascript中的document.open()方法使用介绍
Oct 09 #Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 #Javascript
You might like
PHP Pear 安装及使用
2009/03/19 PHP
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
django如何通过类视图使用装饰器
2019/07/24 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
python安装sklearn模块的方法详解
2020/11/28 Python
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
园长自我鉴定
2013/10/06 职场文书
货代行业个人求职简历的自我评价
2013/10/22 职场文书
临床医学应届生求职信
2013/11/06 职场文书
售后主管岗位职责
2013/12/08 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
Python 全局空间和局部空间
2022/04/06 Python
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技
SQL中的连接查询详解
2022/06/21 SQL Server