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 相关文章推荐
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
jQuery多个input求和的实现方法
Feb 12 Javascript
关于使用js算总价的问题
Jun 23 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
vue-test-utils初使用详解
May 23 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 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
用Socket发送电子邮件
2006/10/09 PHP
理解php原理的opcodes(操作码)
2010/10/26 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
PHP插入排序实现代码
2013/04/04 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
jquery提升性能最佳实践小结
2010/12/06 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
Python中的模块和包概念介绍
2015/04/13 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
销售竞赛活动方案
2014/08/23 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
创先争优宣传标语
2014/10/08 职场文书
开学典礼观后感
2015/06/15 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL