javascript焦点图自动缓冲滚动
html中调用的js库，之前的随笔中有写，就不细说了，不明白的可以留言给我
<!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: 1600px;
height: 200px;
position: absolute;
left: 0;
} #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>
<script src="changfunction.js"></script>
//这里是引用之前写的js库,方便一些
</head> <body>
<div id="ptoDiv">
<div id="ptoBox">
<ul id="pto">
<li class="base base1">one</li>
<li class="base base2">two</li>
<li class="base base3">three</li>
<li class="base base4">four</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>
下面是js代码
<script>
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
}
window.onload = function() {
//定义两个按钮
var btnLeft = $("btn1");
var btnRight = $("btn2");
//pto为定义的图片集和
var pto = $("pto").getElementsByTagName("li");
//ptoBox为定义图片所在的div
var ptoBox = $("ptoBox");
//cir为小框对应的集合
var cir = $("cir").getElementsByTagName("li");
//定义一个定时器
var timer = null;
//Div为定义最外层的div
var Div = $("ptoDiv");
//设置一个全局变量用来控制图片和小框的移动
var index = 0; //这个for循环是为了控制当鼠标移动至小框后，显示和隐藏图片
for (var i = 0; i < cir.length; i++) {
//定义id为小框排序0~3
cir[i].id = i;
//鼠标移动至小框触发事件
cir[i].onmouseenter = function() {
//隐藏小框
clearOn();
//显示小框
showOn(this.id);
//滚动至小框对应的图片
changeBtn(ptoBox, {
left: (-400 * this.id)
});
}
} //这两队onmouseenter和onmouseleave为按钮的透明度变化
btnLeft.onmouseenter = function() {
changeBtn(btnLeft, {
opacity: 100
});
} btnLeft.onmouseleave = function() {
changeBtn(btnLeft, {
opacity: 50
});
} btnRight.onmouseenter = function() {
changeBtn(btnRight, {
opacity: 100
});
} btnRight.onmouseleave = function() {
changeBtn(btnRight, {
opacity: 50
});
} //右按钮绑定鼠标点击事件
btnRight.onclick = function() {
//设置图片右滚循环
//原理就不细说了，以前的随笔里有解释
if (index < pto.length - 1) {
index++;
} else {
index = 0;
}
//调用函数，用于每一张图片的滚动
changeBtn(ptoBox, {
left: (-400 * index)
});
//隐藏小框
clearOn();
//显示小框
showOn(index);
}
//左按钮绑定鼠标点击事件
btnLeft.onclick = function() {
//图片左移判定，原理不多说看以前的随笔
if (index == 0) {
index = pto.length - 1;
} 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) {
for (var i = 0; i < cir.length; i++) {
if (i == x) {
cir[i].className = "on";
}
index = x;
}
} //定义函数用于设置定时器
function start() {
timer = setInterval(function() {
btnRight.onclick();
}, 3000); } //定义函数用于清除定时器
function stop() {
clearInterval(timer);
} //当鼠标进入，则停止
Div.onmouseenter = stop;
//当鼠标离开，则开始
Div.onmouseleave = start; //当进入页面就开始执行循环
start();
}
</script>
javascript焦点图自动缓冲滚动的更多相关文章
- javascript焦点图之缓冲滚动无缝切换
在用于实现无缝切换四张图,所以设置了6个图片就是 4,0,1,2,3,4,0 <!DOCTYPE html> <html> <head> <meta char ...
- javascript焦点图自动播放
这次是完整版,网页点开就能自动播放 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- javascript焦点图之垂直滚动
html代码布局,需要用到定位,不细说了 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- ASP.NET中使用JavaScript实现图片自动水平滚动效果
参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...
- javascript焦点图(根据图片下方的小框自动播放)
html和css就不详细说明了,也是简单布局,通过定位把跟随图片的小框,定位到图片下方 <!DOCTYPE html> <html> <head> <meta ...
- javascript焦点图（能够自己主动切换 ）
/* 思路总结: 1.实现图片滚动的function.鼠标经时候获取当前li的index.设置ndex自己主动递增的函数.实现淡入淡出效果的函数 2.整个实现效果一传递index为主线 3.我的编写代 ...
- javascript焦点图左右按钮简单自动轮播
这里把css和html合在一块写了,这块代码只是布局和样式不是重点 <!DOCTYPE html> <html> <head> <meta charset=& ...
- 使用 iscroll 实现焦点图无限循环
现在大家应该都看到过焦点图轮播的效果,这个效果是什么样我就不截图了.昨天做练习,练习要求是使用iscroll实现焦点图的无限循环滚动,并且当手指触摸焦点图后,停止焦点图的循环滚动.第一次接触iscro ...
- 使用jQuery仿淘宝商城多格焦点图滚动切换效果
1.效果及功能说明 图片滚动切换特效,高仿2012淘宝商城首页多格子焦点图切换,鼠标滑过焦点图片各个格子区域聚光灯效果展示 2.实现原理 在显示div的下面有一个按钮条在鼠标触及到按钮的时候会改变那妞 ...
随机推荐
- CodeForces 712D Memory and Scores
$dp$,前缀和. 记$dp[i][j]$表示$i$轮结束之后,两人差值为$j$的方案数. 转移很容易想到,但是转移的复杂度是$O(2*k)$的,需要优化,观察一下可以发现可以用过前缀和来优化. 我把 ...
- vb.net 结束进程
Public Class Form1 Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click ...
- sulime text3
sublime text 3 详细说明--包括快捷键 sublime 插件安装 快捷键 sunlime (需要先安装package control,ctrl+shift+p,输入insall之后安装插 ...
- css3制作3d旋转相册
此处只是记录,解析可见原文:http://www.cnblogs.com/skyblue-li/p/6092799.html <!DOCTYPE html> <html xmlns= ...
- Layer 中自定义属性的动画
原文:http://objccn.io/issue-12-2/ Layer 中自定义属性的动画 默认情况下,CALayer 及其子类的绝大部分标准属性都可以执行动画,无论是添加一个 CAAni ...
- STL容器小结
1.空间分配器 std::alloc用于容器中内存空间的分配和释放,以及分配内存的管理.construct().destroy()等全局函数用于为对象的构造和析构. 2.迭代器和trains 迭代器 ...
- Java中获取当前日期
java.util.Date date = new Date();java.Text.SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd ...
- 变更mysql数据库文件目录 Linux
本次需要将mysql默认的数据库文件路径/var/lib/mysql 改为新挂载的目录/data/mysql上,需要做以下修改 1.停止mysql服务 service mysqld stop 2.复制 ...
- SQL 范式（转载）
装载于"http://www.cnblogs.com/KissKnife/ 理论性的东西,往往容易把人人都看得懂的东西写成连鬼都看不懂,近似于主任医生开的药方.从前学范式的时候,把书中得概念 ...
- Python查询MySQL进行远程采集图片实例
这是四五年以前做小说站采集图片时写过唯一一次 Python 代码 #!/usr/bin/python #-*-coding:utf-8-*- import MySQLdb, os, socket, t ...