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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
js自带函数备忘 数组
Dec 29 Javascript
jQuery Ajax 全解析
Feb 08 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
js 上传图片预览问题
Dec 06 Javascript
js替换字符串的所有示例代码
Jul 23 Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
JavaScript常用工具函数大全
May 06 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
php获取文章上一页与下一页的方法
2014/12/01 PHP
php简单实现快速排序的方法
2015/04/04 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
php事件驱动化设计详解
2016/11/10 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
div移动 输入框不能输入的问题
2009/11/19 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
Python对象的属性访问过程详解
2020/03/05 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
大学生党员自我批评
2014/02/14 职场文书
致共产党员倡议书
2014/04/16 职场文书
挂职个人工作总结
2015/03/05 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
golang为什么要统一错误处理
2022/04/03 Golang