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的下面有一个按钮条在鼠标触及到按钮的时候会改变那妞 ...
随机推荐
- Android对px和dip进行尺寸转换的方法
px 转换为 dip /** * PX 转换为 DP * * @param context * @param px * @return */ public static int px2dp(Cont ...
- Pelican搭建静态博客
前言 一直以来都希望拥有属于自己的个人博客,随性发点信息,写点技术感想,记录自己的生活,重要的是不受广告的影响.不被河蟹.不会担心有一天被莫名其妙地消失. 之前看过一篇文章:"像黑客一样写博 ...
- php 问答
1,如何设置长生命期的session ? 将 session.cookie_lifetime ,session.gc_maxlifetime 的时间设置长一点. 2,为什么初始化session的时候报 ...
- Java基础之异常
1.异常的概念 异常:程序在运行时出现的不正常情况,也可以说是出现的问题: Java中的异常:出现的不正常的问题也是一类事物,这类事物有一些共性的东西,比如有名称,有产生的原因等,将这些共性的部分抽取 ...
- centos7 crontab笔记
1.crontab相关命令 语法:crontab [-u <用户名称>][配置文件] 或 crontab [-u <用户名称>][-elr] 参数: -e 编辑该用户的计时器设 ...
- Python笔记5（字符串）-20160921
一.字符串常用方法 1.title():返回字符串的标题版本,即单词首字母大写其余字母小写 2.upper():返回字符串全部大写版本,lower()则返回字符串全部小写版本 >>> ...
- postgreSQL-如何查数据库表、字段以及字段类型、注释等信息？
之前从网上也搜索了一些关于postgreSQL的系统表含义以及如何查表相关信息,但是都没有一个完整的内容,所以自己将找到的一些内容作了下整合,大家可以根据自己需要再对sql进行调整. --1.查询对象 ...
- django 安装记录
1. 下载django安装包,下载个最新的安装包即可. https://www.djangoproject.com/download/ 2. 在本地解压 tar -xvf 安装包名称 3. 安装 ...
- C#语言之“String.Split”的使用【转】
String.Split 方法有6个重载函数: 1) public string[] Split(params char[] separator) 2) public string[] Split(c ...
- Mybatis（一）
jdbc开发 1)优点:简单易学,上手快,非常灵活构建SQL,效率高 2)缺点:代码繁琐,难以写出高质量的代码(例如:资源的释放,SQL注入安全性等) 开发者既要写业务逻辑,又要写对象的创建和销毁, ...