php 横杠箭头,为什么我的箭头下面有一横线?
*{ margin: 0; padding: 0; text-decoration: none;}
body { padding: 20px;}
#container { width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}
#list { width: 4200px; height: 400px; position: absolute; z-index: 1;}
#list img { float: left;}
#buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
#buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
#buttons .on { background: orangered;}
.arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
#container:hover .arrow { display: block;}
#prev { left: 20px;}
#next { right: 20px;}
window.onload = function () {
var container = document.getElementById('container');
var list = document.getElementById('list');
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = 1;
var len = 5;
var animated = false;
var interval = 3000;
var timer;
function animate (offset) {
if (offset == 0) {
return;
}
animated = true;
var time = 300;
var inteval = 10;
var speed = offset/(time/inteval);
var left = parseInt(list.style.left) + offset;
var go = function (){
if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {
list.style.left = parseInt(list.style.left) + speed + 'px';
setTimeout(go, inteval);
}
else {
list.style.left = left + 'px';
if(left>-200){
list.style.left = -600 * len + 'px';
}
if(left
list.style.left = '-600px';
}
animated = false;
}
}
go();
}
function showButton() {
for (var i = 0; i < buttons.length ; i++) {
if( buttons[i].className == 'on'){
buttons[i].className = '';
break;
}
}
buttons[index - 1].className = 'on';
}
function play() {
timer = setTimeout(function () {
next.onclick();
play();
}, interval);
}
function stop() {
clearTimeout(timer);
}
next.onclick = function () {
if (animated) {
return;
}
if (index == 5) {
index = 1;
}
else {
index += 1;
}
animate(-600);
showButton();
}
prev.onclick = function () {
if (animated) {
return;
}
if (index == 1) {
index = 5;
}
else {
index -= 1;
}
animate(600);
showButton();
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function () {
if (animated) {
return;
}
if(this.className == 'on') {
return;
}
var myIndex = parseInt(this.getAttribute('index'));
var offset = -600 * (myIndex - index);
animate(offset);
index = myIndex;
showButton();
}
}
container.onmouseover = stop;
container.onmouseout = play;
play();
}
<
>
php 横杠箭头,为什么我的箭头下面有一横线?相关推荐
- 数学等于号是=那三个横杠是什么符
数学等于号是=那三个横杠是什么符 答: 是的,一般表示"横等于",但在数论里,a三b(modm)表示a,b对模m的余数相同,如3三5(mod2)等
- Android开发:第五日番外——过时的函数和被横杠的函数
零.... 好吧,估计以后每篇都会来个零开头进行吐槽了.话说第五日正番依旧难产中,先把番外给写了.番外嘛都是一些小的知识点,未免遗忘,特此记录.今天发现关于设计模式,本人零概念啊,这是什么概念啊,虽然 ...
- bootstrap 空行不显示横杠_电脑开机有显示,但进不去系统
故障现象一:屏幕左上角有个白色横杠在闪(如图) 1.系统引导失败,需要用分区工具重新引导修复 2.有多块硬盘,引导顺序错误,进入BIOS修改顺序(后续文章会讲BIOS) 3.重新做系统故障现象二:开机 ...
- v-on绑定特性命名带小横杠 ‘-’与props属性中变量怎么对应
特性命名问题: 矛盾点一:html的特性不区分大小写 矛盾点二:Vue中除了模板命名,其他命名不允许出现小横杠 '-' 在js文件内,命名为驼峰式,camerCase,进入html文件,自动转换成短横 ...
- mysql中下杠怎么打_怎么打字母下方的短横杠?,下横杠怎么打
下横杠怎么打,怎么打字母下方的短横杠? 对于电脑操作,大多数成年人不及现在的孩子们.今天看到同事在编辑一篇文档,需要在字母下面打一条短横杠,如下图所示.但是同事怎么也打不出来,坐在旁边的他的孩子,看着 ...
- phpcmsV9 用seotitle后面的小横杠分隔符自定义
phpcmsV9页面title如何自定义分隔符" - "? 比如:将短线" - "改为下划线" _ " 注意: 对照文件路径,对应修改一下, ...
- 让sublime text显示空格,到底是点还是横杠TabError: inconsistent use of tabs and spaces in indentation
报错情况:TabError: inconsistent use of tabs and spaces in indentation 分析,因为前面点部分从网上复制的,后面横杠是自己写的,这种混合写法会 ...
- “≡”3个横杠的等号的意思
资料来源:https://zhidao.baidu.com/ 3个横杠等号的符号是"≡",该符号在数学中有以下几种意思: 1.全等于号 如果△ABC全等于△A'B'C',那么可表示 ...
- 台式机开机黑屏一直闪小横杠,键盘灯鼠标均正常,主板亮
事情的经过:一段时间没开过电脑,回来发现,怎么也开不了.想的离开时系统没啥毛病,会不会是硬件的问题,于是准备拆开来看看,也看了各种方法.特此记录一下 现象:开机屏幕亮,一直闪烁小横杠,键盘鼠标都正常, ...
- IDEA创建java项目src下没有办法创建包文件/MAVEN模块名变灰且模块多道横杠
1.IDEA中的java项目src下无法创建包文件 原因:这是因为该项目的src文件夹不是源文件夹 解决方法:需右键该文件夹,选择标记->源根 2.MAVEN模块名变灰且模块多道横杠 原因:ap ...
最新文章
- “TypeError: list indices must be integers or slices, not str”有关报错解决方案
- counter()函数和most_common()函数
- 左神算法:将单链表的每K个节点之间逆序(Java版)
- php function 输出,PHP中常用的输出函数总结
- PyOpenCL图像处理:Box模糊
- js php 数据类型判断,【js基础】变量类型判断
- HTML特殊字符显示
- 动易sitefactory 3.0 模板标签系统
- 【艾特淘】淘宝流量黄金标题的制作方法本
- 在线教育APP的功能和优势
- VMware虚拟机如何迁移到阿里云
- ssb的有效性最好_在AM、DSB、SSB、VSB四个通信系统中,有效性最好的通信系统()。...
- Python3网络爬虫:今日头条新闻App的广告数据抓取
- python研究背景和意义_一研究背景和意义
- ubuntu server 14.04 编译安装xen4.4.2配置vtpm(二)——Dom0内核编译
- 战地之王服务器维护启动失败,《战地之王》战地之王韩服官方各种问题攻略
- 一期项目实战:问卷调查—人事管理系统
- 终端界面 进程 I/O 控制函数
- QQ2006Beta1发布3D秀+新聊天窗口赚眼球(转)
- 支付宝员工因绩效3.25B被辞退,员工告上法院,结果来了
热门文章
- 【气温预测】基于matlab BP神经网络气温预测【含Matlab源码 714期】
- 【多目标优化求解】基于matlab粒子群算法求解智能微电网多目标优化问题【含Matlab源码 383期】
- 创建dqn的深度神经网络_深度Q网络(DQN)-II
- 航天有关的计算机知识,这些关于神舟十二上的电脑硬核小知识,你知道吗?
- 深度系统文件服务器,深度系统镜像文件
- CoType: Joint Extraction of Typed Entities and Relations with Knowledge Bases阅读笔记
- HashMap、LinkedHashMap、HashTable、HashSet笔记
- 【TeeChart .NET教程】(六)使用系列
- JVM垃圾收集器笔记整理
- CUDA编程优化(存储器访问优化,指令优化,参数优化,)