JavaScript-table+大图滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
width: 510px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.caktye{
width: 9999px;
overflow: hidden;
position: relative;
left: 0;
}
.main{
text-align: center;
position: absolute;
bottom: 10px;
/*border: 1px solid red;*/
left: 35%; }
.main button{
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
border-radius: 25px;
display: inline-block;
border: none;
}
.active{
background-color: yellow;
}
.caktye a{
float: left;
}
.caktye img {
display: block;
width:510px;
}
#prevBtn{
display: block;
position: absolute;
left: 5px;
bottom: 45%;
width: 15px;
height: 15px;
/*overflow: hidden;*/
border-left: 5px solid ;
border-top: 5px solid ;
border-color: rgba(255,255,255,0.5);
-webkit-transform: rotate(45deg);
transform: rotate(-45deg);
}
#nextBtn{
display: block;
position: absolute;
right: 5px;
bottom: 45%;
width: 15px;
height: 15px;
/*overflow: hidden;*/
border-right: 5px solid;
border-top: 5px solid;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: rgba(255,255,255,0.5);
/*background-color: rgba(255,255,255,0.8);*/
} </style>
</head>
<body> <div class="wrap">
<div class="caktye" id="inner">
<a href="###"><img src="img/1.jpg"></a>
<a href="###"><img src="img/2.jpg"></a>
<a href="###"><img src="img/3.jpg"></a>
<a href="###"><img src="img/4.jpg"></a>
<a href="###"><img src="img/5.jpg"></a>
<a href="###"><img src="img/1.jpg"></a>
</div>
<div class="main">
<button class="active">1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
<div>
<a href="###" id="prevBtn"></a>
<a href="###" id="nextBtn"></a> </div>
</div>
<script type="text/javascript">
var innerList = document.getElementById("inner");
var btnList = document.getElementsByTagName("button");
var perWidth = inner.children[0].offsetWidth;
var prevBtn = document.getElementById("prevBtn");
var nextBtn = document.getElementById("nextBtn");
// var imgList = inner.getElementsByTagName("img"); // var perWidth = imgList[0].offsetWidth;
var timer = 0;
var timer1 = 0;
var index =0;
var runFlag = true; //设置一个动画是否走完的标志位 for(var i = 0; i < btnList.length; i++) {
btnList[i].index = i;
btnList[i].onclick = function() {
index = this.index; tab();
}
}
function tab() {
var start = inner.offsetLeft;
var end = - perWidth * index;
var change = end - start;
var t = 0;
var maxT = 30; clearInterval(timer1);
timer1 = setInterval(function() {
t++;
if(t >= maxT) {
clearInterval(timer1);
// alert("停下来了");
runFlag = true;
}
inner.style.left = change/maxT * t + start + "px";
if(index == btnList.length && t >= maxT) {
inner.style.left = 0;
}
},30) // inner.style.left = - perWidth * index + "px";
for(var j = 0; j < btnList.length; j++) {
btnList[j].className = "";
}
if(index >= btnList.length) {
btnList[0].className = "active";
}else {
btnList[index].className = "active";
} }
function xunhuan(){
index++; if(index>btnList.length){
index=1;
}
// inner.style.left = - perWidth * index + "px";
tab();
} var timer =setInterval(xunhuan,5000); inner.onmouseover =function(){
clearInterval(timer);
}
inner.onmouseout =function(){
timer = setInterval(xunhuan,5000);
} function next() {
index++;
if(index > btnList.length) {
index = 1;
}
tab();
}
function prev() {
index--;
if(index < 0 ) {
index = btnList.length - 1;
inner.style.left = - btnList.length * perWidth + "px";
console.log(index);
}
tab();
}
//下一张
nextBtn.onclick = function() {
clearInterval(timer);
if(runFlag) {
next();
}
runFlag = false; }
//上一张
prevBtn.onclick = function() {
clearInterval(timer);
if(runFlag) {
prev();
}
runFlag = false; }
</script>
</body>
</html>
JavaScript-table+大图滚动的更多相关文章
- JavaScript Table行定位效果
作者:cloudgamer 时间: 2009-09-17 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript Table行定位效果 [1] 第 2 页 JavaScript Table行 ...
- jQ版大图滚动
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 一个jQ版大图滚动
难得周末能休息,也是越发的代码难受,手就想敲点东西,这不闲着无聊敲了一个Jq版的大图滚动,不足之处大家批评指正: 运作环境win7,代码编辑器是:sublime; 我把源码复制了一下, <!do ...
- JavaScript目录菜单滚动反显组件的实现
JavaScript目录菜单滚动反显组件,有以下两个特点 每个导航菜单项(nav)对应页面一个内容区域(content) 滚动页面到特定内容区域(content)时,对应的菜单会自动切换,一般会添加一 ...
- JavaScript实现页面滚动到div区域div以动画方式出现
用JavaScript实现页面滚动效果,以及用wow.js二种方式实现网页滚动效果 要实现效果是页面滚动到一块区域,该区域以动画方式出现. 这个效果需要二点: 一:我们要先写好一个css动画. 二:用 ...
- 使用JavaScript实现新闻滚动效果
最近要实现一个滚动新闻效果,在网上查了一些资料,发现基本的实现方法有两种: 使用Marquee标签.这个标签的使用我已经转载了一篇比较详细的文章,这个标签的优点是便于使用,缺点是人们已经逐渐不适用它了 ...
- Table上下滚动
<table> <tr> <td> <div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 --& ...
- ul 仿 table 循环滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript实现图片滚动
闲来无事捣鼓了一个原来的js图片滚动 首先看看 静态页的结构: <body> <a href="javascript: le()">向左</a> ...
- [转]JavaScript实现 页面滚动图片加载
本文转自:http://www.cnblogs.com/Darren_code/archive/2011/07/21/LoadImage.html 又到了这个月的博客时间了,原计划是打算在这个月做一个 ...
随机推荐
- Java表格的简单使用一
JTable组件使用的是模型/视图/控制器的设计方式,将可视化组件从其数据中分离出来,因此表格中的数据都封装在数据模型中.其中最重要的支持类就是TableModel类,这个类用来定义JTable类以及 ...
- PHP正则表达式详解（二）
前言: 在本文中讲述了正则表达式中的组与向后引用,先前向后查看,条件测试,单词边界,选择符等表达式及例子,并分析了正则引擎在执行匹配时的内部机理. 本文是Jan Goyvaerts为RegexBudd ...
- AJAX 请求区分 $_SERVER['HTTP_X_REQUESTED_WITH'] 小解
关于这个内容,很多人都有所了解.但从我搜索的内容来看,他们只是略微看一下,根本不知道里面到底是什么情况. 受到很多模版代码的影响,大家都以为PHP有这样一个自定义变量:$_SERVER['HTTP_X ...
- gulp使用技巧-删除node_modules文件夹，解决目录层次太深删除报错的问题
问题描述: 在使用gulp当中,自动生成的node_modules文件夹,因为文件目录层级太深,无法系统删除,用360粉碎工具也报错 解决方法: 使用npm中的插件rimraf,专门用于删除的模块插件 ...
- AJAX工作原理及其优缺点
1.什么是AJAX?AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它 ...
- 如何查找本地的ip
输入cmd调出指令框然后输入ipconfig指令用快捷键ctrl右侧的键+R
- AngularJS 模块
模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 你可以通过 AngularJS 的 angular.module 函数来创建模块: &l ...
- 使用Navicat 导入导出Mysql数据库
1 导出 另外一种方式 2 导入,新建数据名称 3 导入,运行sql文件(步骤1中的) 推荐使用SQLyog进行导入数据比较好
- webbench之编译安装（一）
1.编译安装: 1 2 3 4 [root@hexuweb102 ~]$wget http://blog.s135.com/soft/linux/webbench/webbench-1.5.tar ...
- springMVC含文件上传调用ajax无法连接后台
springMVC在使用ajax进行后台传值的时候发现找不到对应的requestMapping(""),无法进入后台,在多次试验后确定是 MultipartFile对象与ajax冲 ...