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焦点图动画
随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的 ...
随机推荐
- HTTP请求返回状态详解
当用户试图通过 HTTP 访问一台正在运行 Internet 信息服务 (IIS) 的服务器上的内容时,IIS 返回一个表示该请求的状态的数字代码.状态代码可以指明具体请求是否已成功,还可以揭示请求失 ...
- Android设置窗体Activity背景透明
背景透明 style.xml <item name="android:windowBackground">@color/transparent</item> ...
- CodeForces 671A Recycling Bottles
暴力. 每个人找到一个入口,也就是从回收站到这个入口走的路程由人的位置到入口的路程来替代. 因此,只要找两个人分别从哪里入口就可以了.注意:有可能只要一个人走,另一人不走. #pragma comme ...
- CodeForces 677D Vanya and Treasure
$dp$,树状数组. 很明显这是一个$DAG$上的$dp$,由于边太多,暴力$dp$会超时,需要优化. 例如计算$dp[x][y]$,可以将区域分成四块,$dp[x][y]$取四块中的最小值,每一块用 ...
- [HMLY]5.模仿喜马拉雅 FM
项目介绍: 文:HansRove(github)XiMaLaYa-by-HansRove- 仿做喜马拉雅, 对AVFoundation框架的一次尝试 软件环境: iOS9.1硬件环境: Mac O ...
- 回文质数 Prime Palindromes
题目描述 因为151既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 151 是回文质数. 写一个程序来找出范围[a,b](5 <= a < b <= 100,000 ...
- Linux下服务器环境的搭建和配置之一——Apache篇
最近一个多月(2016-06-20开始至今),一直在忙海外广告平台FAQ系统的开发,既要负责服务器环境的搭建,又要写前端,还要写后台和数据库,甚至还要考虑产品需求和设计.所以是一个很大的挑战,对自身也 ...
- chrome手动添加拓展
https://www.crx4chrome.com/crx/978/ Free Download Postman REST Client CRX 0.8.4.19 for ------------- ...
- 转 错误：ORA-28002： the password will expire within 7 days 解决方法
今天在使用sqlplus时出现 =============================================== ERROR:ORA-28002: the password will e ...
- wso2 CEP集成storm实验
1.三台机子:192.168.225.1(manager,nimbus), 192.168.225.2(worker,supervisor), 192.168.225.3(worker,supervi ...