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焦点图动画
随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的 ...
随机推荐
- html基础及心得
html开始 <adress></adress>斜体(地址) <em><em>斜体(表示强调) <code></code>插入一 ...
- java实现线性表
/** * 线性表 * @author zyyt * */ public class LinkList {//框架级别的大师级 private int size;//链表的实际大小 private ...
- sqlserver 操作xml
1.xml.exist 输入为XQuery表达式,返回0,1或是Null.0表示不存在,1表示存在,Null表示输入为空 2.xml.value 输入为XQuery表达式,返回一个SQL ...
- springmvc集成aop记录操作日志
首先说明一下,这篇文章只做了记录日志相关事宜 具体springmvc如何集成配置aop对cotroller进行拦截,请看作者的另一篇文章 http://www.cnblogs.com/guokai87 ...
- com.google.common.collect.Lists#transform使用注意
/** * Returns a list that applies {@code function} to each element of {@code * fromList}. The return ...
- Quartz（任务调度）- Cron
参照:http://www.cnblogs.com/linjiqin/archive/2013/07/08/3178452.html 工具:在线生成Cron 语法规则: Seconds Minutes ...
- php浏览历史记录的方法
本文实例讲述了php浏览历史记录的方法.分享给大家供大家参考.具体实现方法如下: /** * 商品历史浏览记录 * $data 商品记录信息 */private function _history($ ...
- DNS服务架设 redhat linux
安装dns服务和管理工具 yum install bind bind-chroot bind-utils -y 服务名为named 在没有启动服务之前服务的主配置文件在/etc/named.con ...
- centos6.5安装python3
1.安装环境 #yum install gcc yum install zlib-devel yum install make 2.下载python版本 #wget http://www.python ...
- Oracle SQL Developer 设置自动提示(完成设置)