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 前的按键判断代码
Mar 19 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
详解CocosCreator项目结构机制
Apr 14 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统计二维数组元素个数的方法
2013/11/12 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
php创建无限级树型菜单
2015/11/05 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
python找出完数的方法
2018/11/12 Python
python实现年会抽奖程序
2019/01/22 Python
PyTorch基本数据类型(一)
2019/05/22 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
通过实例学习Python Excel操作
2020/01/06 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
制衣厂各岗位职责
2013/12/02 职场文书
高一英语教学反思
2014/01/22 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers