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焦点图动画
随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的 ...
随机推荐
- 安装 zabbix 时遇到的一个问题
安装 zabbix 2.0.3,到最后阶段,遇到一个问题: PHP bcmath extension missing, php configuration parameter --enable-bc ...
- hdu 5945 Fxx and game(单调队列优化DP)
题目链接:hdu 5945 Fxx and game 题意: 让你从x走到1的位置,问你最小的步数,给你两种走的方式,1.如果k整除x,那么你可以从x走一步到k.2.你可以从x走到j,j+t<= ...
- iOS错误之-Presenting view controllers on detached view controllers is discouraged
遇到这个警告后找了一下网络资源,基本上只说通过 [self.view.window.rootViewController presentViewController:controller animat ...
- laravel创建定时任务
官方文档给出的教程已经很详细了,这里给出一些补充帮助大家理解. 英文文档:https://laravel.com/docs/5.2/scheduling 中文文档:https://laravel-ch ...
- python 基础学习3-函数
1. 函数参数-默认参数 python函数也可以跟C语言一样,在函数的形参中设定默认值. >>> def test(flag, port = 8080) ... print port ...
- google浏览器图标显示不正常怎么办
taskkill /f /im explorer.exe rem 清理系统图标缓存数据库 attrib -h -s -r "%userprofile%\AppData\Local\IconC ...
- sqlserver跨数据库与跨服务器使用
sqlserver跨数据库与跨服务器使用 日常数据库编程中经常会遇到需要跨数据库和跨服务器的情况,本文总结解决方法,具体如下: 工具/原料 SQLSERVER 数据库 方法/步骤 跨数据库使用比较 ...
- 编写第一个ROS(创建工作空间workspace和功能包package）
刚接触ROS,学着写了第一个程序,怕以后忘记,就将其步骤记录下来.. 首先你必须保证你电脑已安装配置好ROS. 1.创建工作空间(workspace) 我们所创建功能包package,应该全部放到一个 ...
- Xcode8注释有时会失效的解决方法
1.苹果开发解决了xcode ghost,而且Xcode8也取消了三方插件的功能,所以注释有时会失效,解决办法终端运行命令:sudo /usr/libexec/xpccachectl 回车 + 输 ...
- java 垃圾回收总结（可达性分析 引用分类
java 垃圾回收总结(1) 以前看过很多次关于垃圾回收相关的文章,都只是看过就忘记了,没有好好的整理一下,发现写文章可以强化自己的记忆. java与C,c++有很大的不同就是java语言开发者不 ...