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的下面有一个按钮条在鼠标触及到按钮的时候会改变那妞 ...
随机推荐
- php注册数模式
在前两篇单例模式和工厂模式后,终于迎来了最后一个基础的设计模式--注册树模式. 什么是注册树模式? 注册树模式当然也叫注册模式,注册器模式.之所以我在这里矫情一下它的名称,是因为我感觉注册树这个名称更 ...
- openstack私有云布署实践【18 修改实例DHCP服务的DNS IP】
某天,由于Linux服务器默认没有DNS缓存功能,每次服务器每访问一个http域名链接时,都会触发一次DNS域名解析查询,降低了调用API接口的时延,所以我司后续启用的内网的dnsmasq DNS服务 ...
- Symfony官方视频教程
视频获取方式,添加Symfony学习群,在群文件中获取,QQ群182983780
- 转：iOS 屏幕适配，autoResizing autoLayout和sizeClass图文详解
1. autoResizing autoresizing是苹果早期的ui布局适配的解决办法,iOS6之前完全可以胜任了,因为苹果手机只有3.5寸的屏幕,在加上手机app很少支持横屏,所以iOS开发者基 ...
- java 生成二维码
package com.sun.erwei; import java.awt.Graphics2D;import java.awt.geom.AffineTransform;import java.a ...
- 《Intel汇编第5版》 汇编拷贝字符串
一.字符串定义 二.dup指令 三.调用Writestring过程 四.代码以及效果 TITLE String Copy INCLUDE Irvine32.inc includelib Irvine3 ...
- python 命名规范
参考Google开源项目风格指南:https://zh-google-styleguide.readthedocs.io/en/latest/google-python-styleguide/cont ...
- python socket服务器进行远程升级
# coding:utf-8from socket import *import binascii, linecache, time ServerUrl = "127.0.0.1:900&q ...
- php 问答
1,如何设置长生命期的session ? 将 session.cookie_lifetime ,session.gc_maxlifetime 的时间设置长一点. 2,为什么初始化session的时候报 ...
- 新建HomeController控制器 继承BaseController
CRC这个缩略词,在我看来可以有两种理解:一种是Cyclic Redundancy Check,即循环冗余检错技术:另一种则是Cyclic Redundance Code,即循环冗余校检码.在计算机网 ...