javascript焦点图之缓冲滚动无缝切换
在用于实现无缝切换四张图，所以设置了6个图片就是 4，0，1，2，3，4，0
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
} #ptoDiv {
width: 400px;
height: 200px;
margin: 50px auto 0;
position: relative;
overflow: hidden;
} #ptoBox {
width: 2400px;
height: 200px;
position: absolute;
left: -400px;
} #pto {
list-style-type: none;
} .base {
width: 400px;
height: 200px;
float: left;
} .base1 {
background: red;
} .base2 {
background: blue;
} .base3 {
background: pink;
} .base4 {
background: green;
} #btn1 {
position: absolute;
width: 30px;
height: 30px;
background: yellow;
top: 85px;
left: 0;
opacity: 0.5;
filter: alpha(opacity=50);
cursor: pointer;
} #btn2 {
position: absolute;
width: 30px;
height: 30px;
background: yellow;
top: 85px;
right: 0;
opacity: 0.5;
filter: alpha(opacity=50);
cursor: pointer;
} #cirBox {
width: 80px;
height: 16px;
position: absolute;
top: 160px;
left: 160px;
}
/*16*4+4*4*/ #cir {
list-style-type: none;
position: relative;
} #cir li {
float: left;
width: 16px;
height: 16px;
margin: 0 2px;
background: white;
} #cir .on {
width: 16px;
height: 16px;
background: yellow;
}
</style> </head> <body>
<div id="ptoDiv">
<div id="ptoBox">
<ul id="pto">
<li class="base base4">four</li>
<li class="base base1">one</li>
<li class="base base2">two</li>
<li class="base base3">three</li>
<li class="base base4">four</li>
<li class="base base1">one</li>
</ul>
</div> <span id="btn1"></span>
<span id="btn2"></span> <div id="cirBox">
<ul id="cir">
<li class="on"></li>
<li></li>
<li></li>
<li></li> </ul>
</div>
</div>
</body> </html>
<script src="changfunction.js"></script>这个是已经写好的库，用于改变图片的切换
<script src="changfunction.js"></script>
<script>
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
}
window.onload = function() {
var btnLeft = $("btn1");
var btnRight = $("btn2");
var pto = $("pto").getElementsByTagName("li");
var ptoBox = $("ptoBox");
var cir = $("cir").getElementsByTagName("li");
var timer = null;
var Div = $("ptoDiv");
var index = 1;
var length = 400; /*for (var i = 0; i < cir.length; i++) {
cir[i].id = i;
cir[i].onmouseenter = function() {
clearOn();
showOn(this.id);
changeBtn(ptoBox, {
left: (-400 * this.id)
});
}
}*/ //两个btnLeft绑定事件，改变透明度
btnLeft.onmouseenter = function() {
changeBtn(btnLeft, {
opacity: 100
});
} btnLeft.onmouseleave = function() {
changeBtn(btnLeft, {
opacity: 50
});
}
//两个btnRight绑定事件，改变透明度
btnRight.onmouseenter = function() {
changeBtn(btnRight, {
opacity: 100
});
} btnRight.onmouseleave = function() {
changeBtn(btnRight, {
opacity: 50
});
} //btnRight鼠标点击绑定事件
btnRight.onclick = function() {
console.log(index);
//全局变量index为当前图片的序号
if (index < pto.length - 1) {
//index不大于4时，则自增1
index++;
} else {
//大于4，则index从第三张图片开始
index = 2;
ptoBox.style['left'] = -400 + 'px';
}
//调用函数(通过缓冲显示图片)
changeBtn(ptoBox, {
left: (-400 * index)
});
//清除函数
clearOn();
//显示图片函数
showOn(index);
} //鼠标左键绑定事件，同理
btnLeft.onclick = function() {
if (index == 0) {
index = pto.length - 3;
ptoBox.style['left'] = -1600 + 'px';
} else {
index--;
}
changeBtn(ptoBox, {
left: (-400 * index)
});
clearOn();
showOn(index); } //清楚已经显示的小框
function clearOn() {
for (var i = 0; i < cir.length; i++) {
cir[i].className = "";
}
} //显示当前的小框
function showOn(x) {
//因为框只有四个，所以需要做一个强制转换
//当x的值到达0和5的时候，重新给x赋值
if (x == 0) {
x = 4;
}
if (x == 5) {
x = 1;
}
for (var i = 0; i < cir.length; i++) {
if (i == (x - 1)) {
cir[i].className = "on";
} // index = x;
}
} //自动循环函数
function start() {
timer = setInterval(function() {
btnRight.onclick();
}, 3000); }
//停止函数
function stop() {
clearInterval(timer);
} //当鼠标移动至div则停止
Div.onmouseenter = stop;
//当鼠标移出则开始
Div.onmouseleave = start;
//进入页面，则开始自动循环
start();
}
</script>
javascript焦点图之缓冲滚动无缝切换的更多相关文章
- javascript焦点图自动缓冲滚动
html中调用的js库,之前的随笔中有写,就不细说了,不明白的可以留言给我 <!DOCTYPE html> <html> <head> <meta chars ...
- javascript焦点图（能够自己主动切换 ）
/* 思路总结: 1.实现图片滚动的function.鼠标经时候获取当前li的index.设置ndex自己主动递增的函数.实现淡入淡出效果的函数 2.整个实现效果一传递index为主线 3.我的编写代 ...
- javascript焦点图之垂直滚动
html代码布局,需要用到定位,不细说了 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- javascript焦点图自动播放
这次是完整版,网页点开就能自动播放 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- javascript焦点图左右按钮简单自动轮播
这里把css和html合在一块写了,这块代码只是布局和样式不是重点 <!DOCTYPE html> <html> <head> <meta charset=& ...
- javascript焦点图(根据图片下方的小框自动播放)
html和css就不详细说明了,也是简单布局,通过定位把跟随图片的小框,定位到图片下方 <!DOCTYPE html> <html> <head> <meta ...
- 使用 iscroll 实现焦点图无限循环
现在大家应该都看到过焦点图轮播的效果,这个效果是什么样我就不截图了.昨天做练习,练习要求是使用iscroll实现焦点图的无限循环滚动,并且当手指触摸焦点图后,停止焦点图的循环滚动.第一次接触iscro ...
- （转）轻量级JS焦点图/轮换图myFocus V2源码下载及安装教程
myFocus是一个专注于焦点图/轮换图制作的JS库,它小巧而且是完全独立的JS库,用它可以轻松的制作出网上绝大部分常见的焦点图(甚至包括flash焦点图),而且制作出的焦点图体积也非常的小(1KB左 ...
- 8款超绚丽的jQuery焦点图动画
随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的 ...
随机推荐
- jvm-监控指令-jps
解释:jps 列表展示java进程信息,以及java进程配置的jvm参数. 命令格式: jps [ options ] [ hostid ] 选项 -m 输出main method的参数 -l 输出 ...
- Ubantu安装mysql
在Linux下MySQL的安装,我一直觉得挺麻烦的,因为之前安装时就是由于复杂的配置导致有点晕.今天,需要在Linux下用Qt连接MySQL.遂安装配置了一把. 1)首先检查系统中是否已经安装了MyS ...
- date格式化
Linux: [ghsea@localhost ~]date +%Y:%m:%d [ghsea@localhost ~]date +%Y-%m%d [ghsea@localhost ~]date +% ...
- sqlserver2012评估期已过问题处理
于之前安装sqlserver2012忘记输入序列号,现在出现评估期已过的问题,网上忙活半天,才解决,发现网上叙述都很凌乱,而且只有大意,新手很难操作,所以把我操作的过程分享给大家 步骤阅读 百度经 ...
- Zookeeper实现分布式锁服务（Chubby）
在分布式系统中,如果不同的系统或是同一个系统的不同主机之间共享了一个或一组资源,那么访问这些资源的时候,往往需要互斥来防止彼此干扰,来保证一致性,在这种情况下,便需要使用到分布式锁例如有N台服务器同时 ...
- 转：apache 的mod-status
最近发现在apache的监控方面,apache 2开始自带的apache mod-status其实是个不错的工具,下面摘录并笔记之: 如果是linux的话,可以这样设置: 在httpd.conf中添加 ...
- SSH综合练习-第1天
SSH综合练习-仓库管理系统-第一天 综合练习的整体目的: 整合应用 Struts2 .Hibernate.Spring .Mysql . jQuery Ajax.java基础知识 熟悉企业SSH 基 ...
- 6、Spring+Struts2+MyBatis（mybatis有代理）整合增删改查
1.创建如下的oracle脚本 create table userinfo (id ), name ), password telephone ), isadmin )); --4.2 用户表序列 c ...
- 1.javaOOP_Part1_抽象和封装
javaOOP_Part1_抽象和封装 javaOOP_Part1_抽象和封装 1.1 面向对象 1.1.1 为什么使用面向对象 1.一切皆对象 2.现实世界就是"面向对象的" 3 ...
- IIS7部署MVC站点后，打开无法正常跳转到首页
产品拿到安装包后想在本地安装测试一下,但是管理工具里没有IIS. 后来在windows功能里添加iis服务. 添加后成功安装. 但是第一次打开时,页面提示要“启用目录浏览”. 启用后,打开的却是站点目 ...