当前位置:17727 > www.17727.com > 手把手原生js简单轮播图,写js时遇到的一些小问

手把手原生js简单轮播图,写js时遇到的一些小问

文章作者:www.17727.com 上传时间:2019-12-26

1、在写

进入前端将近一年了,js还是很弱,突发奇想写一个轮播图,就找到了这个博主的材料,和大家分享。

目前支持的是竖向与横向滚动 现在分析下无间缝实现的基本思路: HTML结构: 复制代码 代码如下:

的OnClientClick事件时,需要加上return;否则会出现OnClientClick返回false,但仍然执行OnClick事件的情况。 例如: 复制代码 代码如下:

轮播图的原理:

  • 01
  • 02
  • 03
  • 04
  • 05

2、window.showModalDialog()方式打开新窗口中,如果其中包含js编辑器或者其他第三方编辑器时,会出现不能编辑的情况,连选中都不行; 至今我还没找到比较好的解决办法,还是换成window.open()方式试试。 3、checkbox全选问题: html: 复制代码 代码如下: 全选 js: 复制代码 代码如下: function selectAll() { var obj = document.getElementById; var ckblist = document.getElementById; var chk = ckblist.getElementsByTagName; if { for(var i = 0; i < chk.length; i++) { chk[i].checked = true; } } else { for(var i = 0; i < chk.length; i++) { chk[i].checked = false; } } } 下面是一些js基础知识复制代码 代码如下:① //js获取Table并改变它的样式

一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片。

CSS: 复制代码 代码如下:

单元格1

图片 1

首先需要判断里面的内容高度ul结构是否高于外层div#marScrolll,则才进行无间缝滚动: 复制代码 代码如下: // 写在匿名函数里面,防止全局变量污染 { var target = document.getElementById, oUl = target.getElementsByTagName[0]; // 内容少,则直接退出此函数 if(oUl.offsetHeight复制代码 代码如下: target.innerHTML += target.innerHTML; /* 判断每次滚动的距离等于第一个ul的高度时,设置scrollTop为0,然后如此的循环操作就是无间滚动了 ---------------------------------------------------------------------------------------------*/ // 把功能函数抽离出来,方便调用 var fn = function(){ if(target.scrollTop == oUl_h){ target.scrollTop = 0; }else{ target.scrollTop++; } } // setInterval 循环 var timer = setInterval; },30); 鼠标经过此内容块时,就停止滚动 复制代码 代码如下: // hover target.onmouseover = function(){ clearTimeout; } target.onmouseout = function(){ timer = setInterval; },30); } 例子JS总代码: 复制代码 代码如下: // 写在匿名函数里面,防止全局变量污染 { var target = document.getElementById, oUl = target.getElementsByTagName[0], oUl_h = oUl.offsetHeight; // 内容少,则直接退出此函数 if(oUl_h复制代码 代码如下: function GyMarquee{ this.opt = opt; if(!document.getElementById return; this.target = document.getElementById; this.dir = this.opt.dir == 'crosswise'?'crosswise':'vertical'; this.effect = this.opt.effect == 'scroll'?'scroll':'marque'; this.scrollHeight = this.opt.scrollHeight; this.init(); } GyMarquee.prototype = { marquee:function(){ var _that = this, direction = 'scrollTop', judge = this.target.scrollHeight, timer = null; if(this.dir == 'crosswise'){ direction = 'scrollLeft'; judge = this.itemLen*this.opt.itemWidth; this.targetChild.style.width = this.itemLen*this.opt.itemWidth*2 + 'px'; } var doFn = function(){ if(_that.target[direction] == judge){ _that.target[direction] = 0; } _that.target[direction]++; } timer = setInterval; },38); this.target.onmouseover = function clearTimeout; } this.target.onmouseout = function(){ timer = setInterval; },38); } }, scrollDo:function(){ var can = true, _that = this; this.target.onmouseover=function(){can=false}; this.target.onmouseout=function(){can=true}; new function (){ var stop=_that.target.scrollTop%_that.scrollHeight==0&&!can; if_that.target.scrollTop==parseInt(_that.target.scrollHeight/2)?_that.target.scrollTop=0:_that.target.scrollTop++; setTimeout(arguments.callee,_that.target.scrollTop%_that.scrollHeight?20:2500); }; }, getByClassName:function{ var elem = [], node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName:document.getElementsByTagName, p = new RegExp"+className+"; for(var n=0,i=node.length;n'; this.targetChild = this.getByClassName('J_scrollInner',this.target)[0]; var attr = this.dir == 'vertical'?'offsetHeight':'offsetWidth'; if(val>this.target[attr]){ if(this.effect == 'scroll'){ this.scrollDo(); }else{ this.marquee(); } this.targetChild.innerHTML += this.targetChild.innerHTML; } } }

单元格2

Html布局

单元格3

首先父容器container存放所有内容,子容器list存在图片。子容器buttons存放按钮小圆点。

单元格4

图片 2

单元格5

优化,无缝滚动。

单元格6

当你从最后一张图切换回第一张图时,有很大空白,利用两张辅助图来填补这个空白。

② //js中的定时循环调用函数 setInterval 和对应的停止函数 var timer //首先要声明一个变量用来存储setInterval返回 的值. timer=setInterval; //用声明好的变量存储setInterval返回的值. clearInterval; //清除setInterval函数 如果确实要在setInterval方法中调用参数,并且该函数需要传递参数,那么可以通过通过如下方式:把要传的值声明为全局变量,然 后在方法中进行调用.例如:

这里补充下无缝滚动,直接看代码,复制最后一张图片放置第一张图片前,同时复制第一张图片放置最后一张图片的后面。并且,将第一张图片辅助图(实际上是实际显示的第5张图片隐藏起来,故设置style="left: -600px;")

③ //js获得本页网址 var Url = window.location.href; ④ //js控制保存本页面 document.execCommand("SaveAs","","C:\index.htm"); //1.要进行的操作名,2.默认保存到的地址和文件名和文件类型 function save{ document.execCommand; } ⑤ //打开,另存为,属性,打印"等14个JS代码 ■打开■

CSS修饰

■另存为■

1、对盒子模型,文档流的理解,绝对定位问题。

■属性■

2、注意list的overflow:hidden;只显示窗口的一张图片,把左右两边的都隐藏起来。

■打印■

3、确保buttons中每个span所在层置顶,将其设置为最顶端。(z-index:999)我这里设置为z-index:2

■页面设置■

* {margin: 0;padding: 0;text-decoration: none;}

■刷新■ ■导入收藏■ ■导出收藏■ ■加入收藏■ ■整理收藏夹■ ■查看原文件■ ■语言设置■ ■前进■ ■后退■ ⑥ //改变CSS样式 一、局部改变样式 改变className document.getElementById.className=”…” 改变classText document.getElementById.style.cssText=”…” 直接改变控件的CSS的样式 document.getElementById.style.backgroundColor=”#003366″ 二、全局改变样式 给现在使用的CSS样式加一个id,换肤的时候,更改引用的CSS样式的路径,例如: 点我改变样式 ⑦ //生成随机数,参数为 function GetRnd{ return parseInt*; } ⑧ //js中把字符串转化为数字 parseInt; //123

body {padding: 20px;}

#container {position: relative;width: 600px;height: 400px;border: 3px solid #333;overflow: hidden;}

#list {position: absolute;z-index: 1;width: 4200px;height: 400px;}

#list img {float: left;width: 600px;height: 400px;}

#buttons {position: absolute;left: 250px;bottom: 20px;z-index: 2;height: 10px;width: 100px;}

#buttons span {float: left;margin-right: 5px;width: 10px;height: 10px;border: 1px solid       #fff;border-radius: 50%;background: #333;cursor: pointer;}

#buttons .on {background: orangered;}

.arrow {position: absolute;top: 180px;z-index: 2;display: none;width: 40px;height: 40px;font-size: 36px;font-weight: bold;line-height: 39px;text-align: center;color: #fff;background-color: RGBA(0, 0, 0, .3);cursor: pointer;}

.arrow:hover {background-color: RGBA(0, 0, 0, .7);}

#container:hover .arrow {display: block;}

#prev {left: 20px;}

#next {right: 20px;}

Js

首先我们先实现出手动点击左右两个箭头切换图片的效果:


window.onload=function() {varlist = document.getElementById('list');varprev = document.getElementById('prev');varnext = document.getElementById('next');functionanimate(offset) {//获取的是style.left,是相对左边获取距离,所以第一张图后style.left都为负值,//且style.left获取的是字符串,需要用parseInt()取整转化为数字。varnewLeft = parseInt(list.style.left) +offset;

list.style.left= newLeft + 'px';

}

prev.onclick=function() {

animate(600);

}

next.onclick=function() {

animate(-600);

}

}


运行后我们会发现,一直点击右箭头 ,会出现空白,而且,不能回到第一张图片。要点击左箭头才能回到第一张图片。

图片 3

利用谷歌浏览器F12,原因是我们利用偏移量left来获取图片,当看到left值小于3600时,因为没有第8张图片就出现空白,所以这里我们需要对偏移量做一个判断。

在animate函数里加上这么一段:


if(newLeft<-3000){

list.style.left= -600 + 'px';

}if(newLeft>-600){

list.style.left= -3000 + 'px';

}


好,运行一下,没问题了。轮播图,顾名思义,是自己会动的图片,这个时候我们需要用到浏览器的内置对象定时器。

对于定时器,有必要说明一下setInterval()跟setTimeout的区别了。简单来说,setInterval()执行多次,setTimeout()只执行一次。

更具体的用法可以点击链接查看区别:window.setInterval  window.setTimeout 。

这里我们是用setInterval(),因为我们的图片需要循环滚动。插入下面


vartimer;functionplay() {

timer= setInterval(function() {

prev.onclick()

},1500)

}

play();


运行,ok!

图片 4

但是,当我们想仔细看某一张图片时候,要把图片停住,我们清楚定时器就可以了,这里用到window.clearInterval这个方法。

这里,我们需要对其DOM操作,需要获取整个轮播图区域;


;)

varcontainer = document.getElementById('container');functionstop() {

clearInterval(timer);

}

container.onmouseover=stop;

container.onmouseout= play;


;)

但这里,一个轮播图基本算完成了,有同学·会问,那么简单。看到图片下面的那一排小圆点没。我给你加功能了。


这里是升级版:


;)

varbuttons = document.getElementById('buttons').getElementsByTagName('span');varindex = 1;functionbuttonsShow() {//这里需要清除之前的样式for(vari = 0; i < buttons.length; i++) {if(buttons[i].className == 'on') {

buttons[i].className= '';

}

}//数组从0开始,故index需要-1buttons[index - 1].className = 'on';

}

prev.onclick=function() {

index-= 1;if(index < 1) {

index= 5;

}

buttonsShow();

animate(600);

}

next.onclick=function() {//由于上边定时器的作用,index会一直递增下去,我们只有5个小圆点,所以需要做出判断index += 1;if(index > 5) {

index= 1;

}

buttonsShow();

animate(-600);

}


;)

图片 5

现在看起来正常多了吧,但我们想实现通过鼠标任意点击其中一个小圆点,切换到相应的图片,原理同样,我们还是需要通过偏移量去找到对应的图片。


;)

for (var i = 0; i < buttons.length; i++) {

buttons[i].onclick = function () {

// 在浏览器的控制台打印一下,看看结果

console.log(i);

/* 偏移量获取:这里获得鼠标移动到小圆点的位置,用this把index绑定到对象buttons[i]上,去谷歌this的用法  */

/* 由于这里的index是自定义属性,需要用到getAttribute()这个DOM2级方法,去获取自定义index的属性*/

var clickIndex = parseInt(this.getAttribute('index'));

var offset = 600 * (index - clickIndex);

animate(offset); //存放鼠标点击后的位置,用于小圆点的正常显示

index = clickIndex;

buttonsShow();

}

}


到这一步时,以为大功告成?你在控制台会发现打印出来的永远的是i=5。

错误原因:没有正确获取i值,使用闭包就可以了。你在高级程序设计第三版中76页,会看到这么一句话:

“对javascript来说,由for语句创建的变量i即使在for循环执行结束后,也依旧会存在于循环外部的执行环境中。”

就是说,js没有块级作用域这东西,(可能我C写多了,混淆了)。在第一次循环(从 i=0 到 4 这一过程)结束后,最后的 i 获取到的为buttons.length的值被

保存在for循环之外,最后鼠标点击任何一个小圆点时,自然访问的一直是 i=5 了。

正确代码如下:


;)

for(vari = 0; i < buttons.length; i++) {//这里使用的是立即执行函数,(function(i) {

buttons[i].onclick=function() {varclickIndex = parseInt(this.getAttribute('index'));varoffset = 600 * (index -clickIndex);

animate(offset);

index=clickIndex;

buttonsShow();

}

})(i)

}


;)

有关闭包的知识我不展开来说,要说的又一大推,

大家可以参考下我很久之前的博客:头疼的闭包

图片 6

大家,可能发现了,这个轮播图有点奇怪,不中规中矩,它是向左切换的,改写一下:


functionplay() {//将轮播图换成向右切换图片timer = setInterval(function() {

next.onclick();

},2000)            }


这里结合评论,补充下:

就算是初学者也要特别注意代码规范问题,上面的CSS实在太不规范了,难怪我带的人都不怎样,哈哈哈。。。

Css的书写顺序

CSS里最好不用或直接不用id来改变样式(我这里是id为了方便DOM操作)

这里推荐css规范的技术文章

前端前辈的博客:http://www.cnblogs.com/hustskyking/p/css-spec.html

或者这位大神的Github:https://github.com/fex-team/styleguide/blob/master/css.md

以及KISSY v1.4 Documentation的css编码规范:http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/css-coding-style.html

over

原文转载:

图片 7

图片 8

本文由17727发布于www.17727.com,转载请注明出处:手把手原生js简单轮播图,写js时遇到的一些小问

关键词: