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焦点图动画
随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的 ...
随机推荐
- linux重要命令
echo echo命令用于在终端显示字符串或输出变量提取后的值,格式为:"echo [字符串 | $变量]". 将指定字符串输出到终端屏幕: [root@linuxprobe ~] ...
- Webkit浏览器点击控件时出现的边框消除
-webkit-tap-highlight-color:rgba(0,0,0,0); 其实是将边框颜色透明,让其不可见了而已
- 相机标定 matlab opencv ROS三种方法标定步骤（3）
三 , ROS 环境下 如何进行相机标定 刚开始做到的时候遇到一些问题没有记录下来,现在回头写的时候都是没有错误的结果了,首先使用ROS标定相机, 要知道如何查看节点之间的流程图 rosrun r ...
- 从后台调用前台js
引用: using System.Web.UI; ScriptManager.RegisterClientScriptBlock(this, GetType(), "Js", &q ...
- Metrics-Java版的指标度量工具
介绍 Metrics是一个给JAVA服务的各项指标提供度量工具的包,在JAVA代码中嵌入Metrics代码,可以方便的对业务代码的各个指标进行监控,同时,Metrics能够很好的跟Ganlia.Gra ...
- Vrui 增加自定义事件
#include <Vrui/Application.h> #include <GL/GLObject.h> #include <Vrui/Vrui.h> #inc ...
- java中equals方法和contentEquals方法区别
java中,String类里提供了两种字符串的比较方式(算上“==”应该是三种) String line1 = new String("0123456789"); String l ...
- HDU 4451 Dressing
HDU 4451 Dressing 题目链接http://acm.split.hdu.edu.cn/showproblem.php?pid=4451 Description Wangpeng has ...
- Learning from the CakePHP source code - Part I
最近开始痛定思痛,研究cakephp的源码. 成长的路上从来没有捷径,没有小聪明. 只有傻傻的努力,你才能听到到成长的声音. 下面这篇文章虽然过时了,但是还是可以看到作者的精神,仿佛与作者隔着时空的交 ...
- 根据ClassName获取元素节点
功能描述: 通过ClassName获取元素节点,并解决兼容性问题 实现效果: 编码思路: 利用getElementsByTagName选出所有元素,再根据ClassName条件进行筛选 代码示例: