【20190123】JavaScript-轮播图特效中出现的问题
var pic=document.getElementById("pic1");
var next=document.getElementById("next");
var pre=document.getElementById("pre");
var ad = document.getElementById("ad1");
var cirBtns=ad.getElementsByTagName("span"); var index=1;
var animated=false; pre.onclick=function () {
if (index===1){
index=3;
} else{
index-=1;
}
if (!animated){
animate(1000);
}
showBtns();
} next.onclick=function () {
if (index===3){
index=1;
} else{
index+=1;
}
if (!animated){
animate(-1000);
}
showBtns();
} function animate(offset) {
animated=true;
var newLeft=pic.offsetLeft+offset;
var time=300;
var interval=5;
var speed=offset/(time/interval); function go() {
if((speed<0 && pic.offsetLeft>newLeft)||(speed>0 && pic.offsetLeft<newLeft)){
pic.style.left=pic.offsetLeft+speed+"px";
setTimeout(go,interval);
} else {
animated=false;
pic.style.left=newLeft+"px";
if (newLeft <= -4000) {
pic.style.left = "-1000px";
} else if (newLeft >= 0) {
pic.style.left = "-3000px"
}
}
}
go();
} function showBtns() {
for(var i=0;i<cirBtns.length;i++){
var button=cirBtns[i];
if(button.className === "on"){
button.className="";
break;
}
}
cirBtns[index-1].className="on";
} for(var i=0;i<cirBtns.length;i++){
var button=cirBtns[i];
button.onclick=function () {
if(this.className==="on"){
return;
}
var myIndex=parseInt(this.getAttribute("index"));
var offset=-1000*(myIndex-index);
if(!animated){
animate(offset);
}
index=myIndex;
showBtns();
}
} var autoTimer;
function autoPlay() {
autoTimer=setInterval(function () { next.onclick(); },3000);
}
function autoStop() { clearInterval(autoTimer); }
ad.onmouseover=autoStop;
ad.onmouseout=autoPlay; autoPlay();
【20190123】JavaScript-轮播图特效中出现的问题的更多相关文章
- 【JavaScript】固定布局轮播图特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 2、原生js实现轮播图特效
很多很多网站经常会用到一个特效,那就是轮播图,对于日新月异的前端技术来说其实就是一个框架一个接口的事,但轮播的原理是什么?用最原始的javascript来写又是怎样的呢?本人是一枚菜鸟,这篇文章就当做 ...
- 练习:javascript轮播图效果
javascript轮播自动播放切换滑过停止,上一页/下一页 <!DOCTYPE html> <html lang="en"> <head> & ...
- 【jQuery】百分比自适应屏幕轮播图特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript 轮播图
这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊 布局什么的你们自己搞定吧 <div class="slider" id="circl ...
- JavaScript轮播图
需求: 鼠标移动到下标页码时,也转换到相对应的图片: 多张图片可以自动轮播: 鼠标移动至图片时,停止自动轮播: 可以手动左右调节: <!DOCTYPE html> <html lan ...
- JS实现轮播图特效(带二级导航)
按照国际惯例先放效果图 index.html <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 超详细的原生JavaScript轮播图(幻灯片)的制作
本次轮播图的制作主要分为3个部分,分别是:设置定时器自动轮播:点击左右切换按钮轮播:下方点击按钮轮播.具体实现步骤如下: (效果图) html部分代码如下: <div class="s ...
- jQuery插件slides实现无缝轮播图特效
初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...
随机推荐
- 方向导数,梯度和梯度下降之BGD,SGD
方向导数和梯度的直观理解,from知乎-马同学: https://www.zhihu.com/question/36301367 BGD,SGD: https://www.cnblogs.com/gu ...
- Android ------------------ 带边框的圆角矩形
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http:/ ...
- Jira/Confluence的备份、恢复和迁移
之前的文章已经分别详细介绍了Jira.Confluence的安装及二者账号对接的操作方法,下面简单说下二者的备份.恢复和迁移: 一.Jira.Confluence的备份.恢复1)Confluence的 ...
- GitHub 轻松提速教程
通过修改hosts文件来提速,获取github的IP地址 访问:https://www.ipaddress.com/ 网址 依次获取以下三个网址的IP github.com github.global ...
- 如何在 SCSS 使用 JavaScript 变量/scss全局变量
Update2019/3/6:发现一个更好的方法,预处理器加载一个全局设置文件 官方github给出了详细的配置. 在 SCSS 中使用变量很方便,创建一个 variables.scss 文件,里面声 ...
- css 设计规范
外部 div 设置 margin 和 padding: 内部每个元素只设计跟自己相关的属性,这样方便复用:
- 人脸检测----Adaboost学习方法
有了haar特征,有了提升性能的积分图,是不是已经可以很好的解决人脸检测问题了?答案是:no. 因为,计算每一个特征值的时候速度都大幅提升了,但是,一个小小的24*24是人脸图像根据不同的位置, 以及 ...
- DefaultServlet
在web访问任何资源都是在访问Servlet 当你启动Tomcat,你在网址上输入http://localhost:8080.为什么会出现Tomcat小猫的页面? 这是由缺省Servlet为你服务的! ...
- 1 认识Jquery
一 代码风格和变量风格 1 链式操作风格 : (1)对同一对象不超三个操作的可以写在一行 (2)对于同一个对象的较多操作,建议每行写一个操作 (3)对于多个对象的少量操作,可以每个对象写一行,涉及子元 ...
- nohup后台执行
由于使用nohup时,会自动将输出写入nohup.out文件中,如果文件很大的话,nohup.out就会不停的增大,这是我们不希望看到的,因此,可以利用/dev/null来解决这个问题. nohup ...