Javascript Web Slider 焦点图示例源码
<!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>
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
});
相关推荐
-
js实现非常简单的焦点图切换特效实例
本文实例讲述了js实现非常简单的焦点图切换特效的方法.分享给大家供大家参考.具体分析如下: 这是一个非常非常简单的焦点图(更像滑动门),可供初学者借鉴参考 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w
-
javascript实现3D切换焦点图
做了一个用鼠标拖拽配合 CSS3 的小尝试,截图如下: 熟悉拖拽效果的朋友应该不会陌生鼠标按住以后,左右拖动的实现方式. 这个小demo里尝试的是把CSS3中的相关知识点运用到图片展示中, 当拖动图片时,显示出立体的感觉-- 直接代码如下: #list{ width:400px; height:440px; margin:30px auto 30px; position:relative;z-index:500;} #list li{height:40px;width:400px; positi
-
JS焦点图切换，上下翻转
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
javascript 封装的一个实用的焦点图切换效果
所以在原来的基础上改了下,封装起来,并做了进一步的优化,这样同一个页面就可以使用多个这样的效果了,xhtm和css没有变化,感兴趣的朋友可以在js上面可以跟之前的代码做个对比,这样更容易理解和掌握.有什么问题和建议请回帖 @&@1.xhtml 复制代码 代码如下: <div class="jfocus"> <div id="jfocuspic"> <a href="#" style=&qu
-
纯JS焦点图特效实例(可一个页面多用)
实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co
-
实用的js 焦点图切换效果 结构行为相分离
焦点图切换效果,对前端来说,恐怕再熟悉不过了,实现它的方法应该有多种,工作当中常用的一种,叙述如下: 如何让当前的数字导航与图片的显示同步? 这里有两个区域,图片切换区和数字导航区:分别对应着两个循环函数:plays(value)和setBg(value): 当图片循环切换到第2张时,此时数字导航的当前状态也变换到第2的位置,以此达到一种同步的效果,这里的关键就是给他们传递相同的参数value:而这个任务就交给了函数Mea(value): 图片应该是自动切换的,当循环显示到最后一种图片后,返回到
-
js淡入淡出焦点图幻灯片效果代码分享
本文实例讲述了javascript淡入淡出焦点图幻灯片效果.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的淡入淡出焦点图幻灯片效果代码,可以自定义标题,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js淡入淡出焦点图幻灯片效果代码如下 <head> <meta http-equiv="Content-Ty
-
Javascript Web Slider 焦点图示例源码
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-focu
-
Mybatis-plus使用TableNameHandler分表详解(附完整示例源码)
为什么要分表 Mysql是当前互联网系统中使用非常广泛的关系数据库,具有ACID的特性. 但是mysql的单表性能会受到表中数据量的限制,主要原因是B+树索引过大导致查询时索引无法全部加载到内存.读取磁盘的次数变多,而磁盘的每次读取对性能都有很大的影响. 这时一个简单可行的方案就是分表(当然土豪也可以堆硬件),将一张数据量庞大的表的数据,拆分到多个表中,这同时也减少了B+树索引的大小,减少磁盘读取次数,提高性能. 两种基础分表逻辑 说完了为什么要分表,下面聊聊业务开发中常见的两种基础的分表逻辑.
-
go语言使用Chromedp实现二维码登陆教程示例源码
目录 1 Chromedp是什么 2 为什么不使用Selenium 3 文章解决了什么需求 4.如何使用chromedp进行二维码登陆 4.1 安装chromedp 4.2 尝试打开网站 4.3 获取二维码(点击过程) 5. 如何将二维码展示在无图形化的终端上 6. 如何保存Cookies实现短时间免登陆 源码点击下载 1 Chromedp是什么 chromedp是一个更快.更简单的Golang库用于调用支持Chrome DevTools协议的浏览器,同时不需要额外的依赖(例如Selenium和
-
javascript实现QQ空间相册展示源码
知识点:html/css布局思维,浮动/定位详解,大企业标准,代码性能优化,js鼠标事件,DOM操作等. 源码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="关键词一,关键词二"> <meta name="De
-
易语言地下城与勇士辅助顺图类源码
DNF辅助顺图类源码 仅供学习参考,禁止商业用途 .版本 2 .程序集 顺图 .子程序 顺图结构 .参数 方向ID, 整数型 .局部变量 一级偏移, 整数型 .局部变量 二级偏移, 整数型 .局部变量 临时数据, 整数型 .局部变量 坐标结构, 整数型 .局部变量 x, 整数型 .局部变量 y, 整数型 .局部变量 xF, 整数型 .局部变量 yF, 整数型 .局部变量 cx, 整数型 .局部变量 cy, 整数型 一级偏移 ＝ 汇编_读整数型 (#人物基址) 二级偏移 ＝ 汇编_读整数型 (一级
-
VUE+Element实现增删改查的示例源码
前言 &最近因为一些原因,没有更博客,昨天老师布置了一个作业,用vue实现增删改查功能,想想这也不难,就做一下试试吧. 因为自己写的样式没有别人做的好,因此我想用现成的UI框架,一直也没用过Element,就干脆趁机学一下吧. 实验步骤 首先引入一下element的css以及js <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chal
-
java编程Reference核心原理示例源码分析
带着问题,看源码针对性会更强一点.印象会更深刻.并且效果也会更好.所以我先卖个关子,提两个问题(没准下次跳槽时就被问到). 我们可以用ByteBuffer的allocateDirect方法,申请一块堆外内存创建一个DirectByteBuffer对象,然后利用它去操作堆外内存.这些申请完的堆外内存,我们可以回收吗?可以的话是通过什么样的机制回收的? 大家应该都知道WeakHashMap可以用来实现内存相对敏感的本地缓存,为什么WeakHashMap合适这种业务场景,其内部实现会做什么特殊处理呢?
-
通过示例源码解读React首次渲染流程
目录 说明 题目 首次渲染流程 render beginWork completeUnitOfWork commit 准备阶段 before mutation 阶段 mutation 阶段 切换 Fiber Tree layout 阶段 题目解析 总结 说明 本文结论均基于 React 16.13.1 得出,若有出入请参考对应版本源码.参考了 React 技术揭秘. 题目 在开始进行源码分析前,我们先来看几个题目: 题目一: 渲染下面的组件,打印顺序是什么? import React from
-
JavaScript实现简单图片滚动附源码下载
昨晚德国和葡萄牙的焦点之战你看了吗?北京时间凌晨的比赛中,C罗领衔的葡萄牙0-4德国被完灭--他是金球奖得主.欧洲金靴.欧冠冠军核心,在葡萄牙队--9张图 C罗告诉你什么叫欲哭无泪 复制代码 代码如下: <span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
-
JavaScript实现俄罗斯方块游戏过程分析及源码分享
观摩一下<编程之美>:"程序虽然很难写,却很美妙.要想把程序写好,需要写好一定的基础知识,包括编程语言.数据结构与算法.程序写得好,需要缜密的逻辑思维能力和良好的梳理基础,而且熟悉编程环境和编程工具." 学了几年的计算机,你有没有爱上编程.话说,没有尝试自己写过一个游戏,算不上热爱编程. 俄罗斯方块曾经造成的轰动与造成的经济价值可以说是游戏史上的一件大事,它看似简单但却变化无穷,令人上瘾.相信大多数同学,曾经为它痴迷得茶不思饭不想. 游戏规则 1.一个用于摆放小型正方形的平