轮播有可能出现的问题
我们在日常生活中常常会看到各种各样的轮播,轮播运用的范围很广,所以我们要学会轮播。
而刚开始学轮播的时候大家都有可能碰到一个问题,那就是图片切换的不完整。比如我们点击按钮让第一张图片切换到第二张,但是第一张可能没切换完就停止切换了,所以我们要在代码运行之前就判断其他的代码是否正在运行。如图:
我们在JavaScript的开头加个判断,然后在运行代码之前再判断一下。
完整的JavaScript代码:
// JavaScript Document
var transfor=false;//记录轮播的运动状态
var index=1;
var timer=null;
window.onload=function(){var prev=document.getElementById("prev");var next=document.getElementById("next");var bottons=document.getElementById("bottons").getElementsByTagName("span");var container=document.getElementById("container");prev.onclick=function(){if(transfor==true){return;}if(index==1){index=5;}else{index--;}animate(800);showbottons();};next.onclick=function(){if(transfor==true){return;}if(index==5){index=1;}else{index++;}animate(-800);showbottons();};for(var i=0;i<bottons.length;i++){bottons[i].onclick=function(){var myindex=this.getAttribute("index");var offset=-800*(myindex-index);index=myindex;animate(offset);showbottons();};}function play(){timer=setInterval(function(){next.onclick();},2300);}function stopPlay(){clearInterval(timer);}play();container.onmousemove=stopPlay;container.onmouseout=play;
};
function animate(offset){transfor=true;var list=document.getElementById("list");var time=300;var interval=10;var speed=offset/(time/interval);var newleft=parseInt(list.style.left)+offset;
function go(){if((speed<0&&parseInt(list.style.left)>newleft)||(speed>0&&parseInt(list.style.left)<newleft)){list.style.left=parseInt(list.style.left)+speed+"px";setTimeout(go,interval);}else{list.style.left=newleft+"px";if(newleft>-800){list.style.left=-800*5+"px";}if(newleft<-4000){list.style.left=-800+"px";}transfor=false;}}go();}function showbottons(){var buttons=document.getElementById("bottons").getElementsByTagName("span");for(var i=0;i<buttons.length;i++){if(buttons[i].className==="on"){//buttons[i].className="";// 赋值break;}}buttons[index-1].className="on";
}
源代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/lb.css">
</head><body>
<div class="con wrap"><div class="con1"><div class="container wrap" id="container"><div class="list" id="list" style="left: -800px"><img src="./images/2.jpg" alt=""><img src="./images/1.png" alt=""><img src="./images/3.jpg" alt=""><img src="./images/4.jpg" alt=""><img src="./images/5.png" alt=""><img src="./images/2.jpg" alt=""><img src="./images/1.png" alt=""></div><div class="bottons" id="bottons"><span index="1" class="on">1</span><span index="2">2</span><span index="3">3</span><span index="4">4</span><span index="5">5</span></div><a href="javascript:void(0);" class="prev" id="prev"><</a><a href="javascript:;" class="next" id="next">></a></div></div>
</div>
<script src="js/js.js"></script>
</body>
</html>
效果图:
这样子写的话图片就可以正常切换了,你学会了吗!
轮播有可能出现的问题相关推荐
- 网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
- DEDECMS后台上传banner图控制图片轮播
将图片轮播做到后台控制,无论是dedecms还是其他的程序都是一样的重要,方便客户自己调试,不然动不动就拿FTP开刷,一个是操作不方便,增加了使用上的难度,另外也有一定的风险,很可能由于操作生疏,误操 ...
- 超级简单的jquery轮播图demo
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>轮播图 ...
- bootstrap 两个轮播图冲突_Bootstrap的轮播图样式
轮播效果是一个幻灯片效果,使用CSS 3D变形转换和一些JAvaScript构建一内容循环播放,它适用于一系列图像.文本或自定义标记,还包括对上一个/下一个图的浏览控制和指令支持. 轮播组件不支持互相 ...
- android首页图片轮播效果,Android_Android自动播放Banner图片轮播效果,先看一下效果图支持本地图 - phpStudy...
Android自动播放Banner图片轮播效果 先看一下效果图 支持本地图片以及网络图片or本地网络混合. 使用方式: android:id="@+id/banner" andro ...
- 轮播切换_javascript基础(一)——轮播图
javascript基础(一)--轮播图 1.轮播图的实现原理 轮播图的js实现原理其实十分的简单,首先将图片放入一个ul标签中,ul标签的大小要足够将所有图片放入其中.然后再将ul标签放进div中, ...
- 微信小程序自定义轮播图滚动样式 自定义组件轮播图的实现
效果图: 实现代码: wxml <view class="card card_b"><swiper autoplay="{{true}}" i ...
- 【iOS】快速集成轮播控件
自己写的一个轮播控件,初始化后只要实现两个数据源方法,几行代码就能快速集成,支持本地图片和网络图片,支持点击事件,可定制播放速度.指示器颜色/位置.默认加载图等,效果: 1.下载地址: GitHub ...
- bootstrap轮播如何支持移动端滑动手势
1.下载滑动手势 js 插件:hammer.js //cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js 2.写一个javascript命令调用hammer.j ...
最新文章
- NR 5G UE和5G网络功能之间的安全流程
- 安卓9.0刷linux,Ubuntu系统下编译Android 9.0系统
- VS2005中解决方案管理器中看不到解决方案节点的解决办法
- WPF如何给窗口设置透明png的图片背景
- 理光m2554进入维修_理光DX2432C,基士得耶6201供墨检测代码,看完马上解决代码故障...
- 实习技术员的基本功(十)
- 如何获取JVM的dump文件
- 建立 rsyslog 日志服务器
- IOS开发把汉字转换成拼音的两种方法和返回拼音首字母
- 查询江苏丹阳高考成绩2021,2020年江苏县级市各大高中高考成绩回顾
- python定积分1002无标题_python 求定积分和不定积分
- 如何对一个网页进行测试
- ae制作小球轨迹运动_AE教程AE特效:教你如何用AE创建一个弹跳运动的小球特效...
- 服务器被一堆系统登录_饥荒联机云服务器开档
- 国企计算机技术岗面试题目,国企历年经典面试试题+答案(二)
- 网上的普通话测试软件可信吗,普通话测试软件哪个好_普通话测试软件靠谱吗_不要钱的普通话测试软件...
- PIR热释电传感器使用笔记
- php 大数相加,吉首大学第九届"新星杯"大学生程序设计大赛(示例代码)
- 数据结构与算法(Python)【PKU MOOC】
- 4、安全理论与框架-企业架构模型(EA)-DoDAF国防部架构框架
热门文章
- cf1208E. Let Them Slide
- Acwing 1088.旅行问题
- [学习笔记] 如果你愿意学那么你是可以看的懂的 —— 群论与 burnside 引理和 polya 定理
- CodeForces:103(div1)104(div2)
- CF1325D:Ehab the Xorcist(位运算)
- AT2667-[AGC017D]Game on Tree【SG函数】
- [2020.11.4NOIP模拟赛]简单的打击【NTT】
- CF438D-The Child and Sequence【线段树】
- nssl1176-轨道【数论,Dp】
- 2021“MINIEYE杯”中国大学生算法设计超级联赛(2)I love exam(背包)