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 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
vue之将echart封装为组件
Jun 02 Javascript
详解vue-cli3使用
Aug 14 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
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
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
JS 统计时间
2021/03/09 Javascript
javascript document.images实例
2008/05/27 Javascript
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
轮播图组件js代码
2016/08/08 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
全面理解Python中self的用法
2016/06/04 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
采购意向书范本
2014/03/31 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
python区块链实现简版工作量证明
2022/05/25 Python
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android