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的下面有一个按钮条在鼠标触及到按钮的时候会改变那妞 ...
随机推荐
- liunx环境C、C++代码编译链接中间代码主要流程
一个比较小的问题,可以直接看帖子: http://blog.csdn.net/gengyichao/article/details/6544266
- ps -ef |grep 输出的具体含义
[root@localhost ~]# ps -ef | grep ApacheJetspeed root 18887 18828 0 08:09 pts/0 00:00:00 gre ...
- mvc前端样式自定义
1.别忘记加 htmlAttributes @Html.EditorFor(model => model.Quantity, new { htmlAttributes = new { @clas ...
- winform 制作圆形图片框
public partial class CirclePictureBox : PictureBox { public CirclePictureBox() { Circle = true; Init ...
- Idea1.5使用Maven搭建Apache Spark1.6源码阅读环境
1.插件安装,在Idea界面依次:File->settings->plugins,安装Maven 2.下载Spark1.6.2源码,这个在GitHub上下载,具体流程自己百度,很简单 3. ...
- ITest
渗透测试入门 我很简单,请不要欺负我 网站综合渗透实验: 真的很简单: 你是会员吗: 2015中国网络安全大赛 一.代码执行: 同DZ漏洞全家桶中的"又见DZ,我能那你怎么办". ...
- oracle 使用技巧
1.PL/SQL Developer记住登陆密码 在使用PL/SQL Developer时,为了工作方便希望PL/SQL Developer记住登录Oracle的用户名和密码: 设置方法:PL/SQ ...
- KMP算法的java实现
package com.trs.utils; public class KMPStr { /* * 在KMP算法中,最难求的就是next函数,如何理解next函数是一个难题,特别是k=next[k], ...
- 第一百一十节，JavaScript匿名函数和闭包
JavaScript匿名函数和闭包 学习要点: 1.匿名函数 2.闭包 匿名函数就是没有名字的函数,闭包是可访问一个函数作用域里变量的函数.声明:本节内容需要有面向对象和少量设计模式基础,否则无法听懂 ...
- 常用的HTTP状态码如下
成功的状态码: – 服务器成功返回网页 – 未修改 失败的状态码: – 请求的网页不存在 – 服务器暂时不可用 – 服务器内部错误 下面的不是很常用,记住上面那几个就ok了,有bug了再补充 其他的状 ...