1 实例1：轮播图

1）实质就是改变图片的src

2）把图片的路径用数组存起来

3） “下一张”的实现就是改变数组的下标，用一个变量i控制，每次点击下标加1。“上一张”的实现正好相反。注意“i的变化”与“if判断”与“src改变”的顺序。

4）自动播放的实现：添加一个定时器，自动调用“下一张”的方法

5）当鼠标移上时，清除定时器，移出时，再添加定时器

6）注意整体写法，首先定义全局变量，然后页面加载时调用方法，然后写每一个方法的定义

2 轮播图添加缩略图控制

1）给缩略图添加一个自定义属性

2）循环给缩略图添加点击事件，获取到自定义属性值，赋值给全局变量i，就是大图片数组的下标，就可以改变相应大图片的src了

3）缩略图可以用js循环出来，不直接写在html中

html代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>轮播</title>

<link rel="stylesheet" href="css/common.css"/>

<script src="js/common.js"></script>

</head>

<body>

	<div class="img-wrap" id="wrap">

		<div class="imgs"><img src="data:images/1.jpg" id="img_dom"/></div>

		<p>

			<button id="prev">上一张</button>

			<button id="next">下一张</button>

		</p>

		<!--<div class="nav">

			<img src="data:images/1.jpg" onclick="tab(0)"/>

			<img src="data:images/2.jpg" onclick="tab(1)"/>

			<img src="data:images/3.jpg" onclick="tab(2)"/>

		</div>-->

		<div class="nav"></div>

	</div>

</body>

</html>

css代码：

.img-wrap{width: 990px;margin: 20px auto 0;text-align: center;overflow: hidden;border: 1px solid #ccc;}

.imgs img{width: 100%;height: 340px;}

.nav{text-align: center;}

.nav img{width: 200px;margin: 0 10px;cursor: pointer;height: 70px;}

js代码：

var arr_img=['images/1.jpg','images/2.jpg','images/3.jpg'], //数组存储图片的路径

	i=0, //数组的下标

	timer=null, //定时器对象

	img_dom=null, //大图片

	img_box=null, //最外面的div

	t=2000, //自动播放时间，毫秒，数越大越慢

	nav=[],//缩略图

	prevBtn=null, //上一张按钮

	nextBtn=null; //下一张按钮

window.onload=function(){

	init(); //初始化变量

	addimg(); //添加缩略图

	addEvent(); //添加事件

}

//初始化变量

function init(){

	img_box=document.getElementsByClassName('img-wrap')[0]; //最外面的div

	prevBtn=document.getElementById('prev'); //上一张按钮

	nextBtn=document.getElementById('next'); //下一张按钮

	img_dom=document.getElementById('img_dom'); //大图片

	nav=document.getElementsByClassName('nav')[0].getElementsByTagName('img');	//缩略图

	timer=setInterval(next,t);	//自动调用下一张

}

//添加缩略图

function addimg(){

	var str='';

	var nav_wrap=document.getElementsByClassName('nav')[0];

	for(var q=0; q<arr_img.length; q++){

		str+='<img src="'+arr_img[q]+'" data-id="'+q+'"/>'

	}

	nav_wrap.innerHTML=str;

}

//添加事件

function addEvent(){

	prevBtn.onclick=prev; //上一张

	nextBtn.onclick=next; //下一张

	//鼠标移入清除定时器

	img_box.onmouseover=function(){

		clearInterval(timer);

	}

	//鼠标移出添加定时器

	img_box.onmouseout=function(){

		timer=setInterval(next,t);

	}

	//缩略图的事件

	for(var j=0; j<nav.length; j++){

		nav[j].onclick=function(){

			i=+this.getAttribute('data-id');

			img_change();

		}

	}

}

//改变大图src

function img_change(){

	img_dom.src=arr_img[i];

}

//上一张

function prev(){

	i--;

	if(i<0){

		i=arr_img.length-1;

	}

	img_change();

}

//下一张

function next(){

	i++;

	if(i>=arr_img.length){

		i=0;

	}

	img_change();

}

//直接点击缩略图，html中已注释

function tab(num){

	i=num;

	img_change();

}

　　

3 实例2：全选/全不选

1）给全选框添加点击事件，获取他的选中状态，再找到其他复选框（以下都称为子选框），把选中状态设为和全选框一样

2）注意使用this

3）反着选：循环给所有子选框添加点击事件，判断选中，只要有一个没被选中，则把全选框的选中状态置为假；全部子选框被选中了，全选框的选中状态置为真

html代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>全选/全不选</title>

<script src="js/select.js"></script>

</head>

<body>

<p>

	<label>

		<input type="checkbox" id="all"/>全选/全不选

	</label>

</p>

<p>

	<label>

		<input type="checkbox" class="child"/>选择

	</label>

</p>

<p>

	<label>

		<input type="checkbox" class="child"/>选择

	</label>

</p>

<p>

	<label>

		<input type="checkbox" class="child"/>选择

	</label>

</p>

<p>

	<label>

		<input type="checkbox" class="child"/>选择

	</label>

</p>

</body>

</html>

js代码：

var all=null; //全选框

var child=[]; //子选框

window.onload=function(){

	init(); //初始化变量

	all.onclick=select_all; //调用全选方法

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

		child[i].onclick=select_child; //给子选框添加点击事件

	}

}

//初始化变量

function init(){

	all=document.getElementById('all'); //全选框

	child=document.getElementsByClassName('child'); //子选框

}

//全选

function select_all(){

	var selects = this.checked; //全选框的选中状态

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

		child[i].checked=selects; //子选框的选中状态等于全选框的选中状态

	}

}

//子选框

function select_child(){

	var flag=1; //定一个用来判断的标识

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

		if(child[i].checked==false){

			flag=0; //如果有一个子选框没有被选中，则标识等于0

		}

	}

	if(flag==0){

		all.checked=false; //全选框不被选中

	} else{

		all.checked=true; //全选框被选中

	}

}

实例练习——轮播图 & 全选/全不选的更多相关文章

  1. Bootstrap实现轮播图

    第一步:设计轮播图容器:div.carousel,添加slide平滑切换,并定义id,方便后面采用data属性来触发 <div class='carousel slide' id="t ...

  2. 原生JS的轮播图

    学习前端也有一小段时间了,当初在学习javascript的时候,练手的一个轮播图实例,轮播图也是挺常见的了. 着是通过获取图片偏移量实现的.也实现了无缝切换.还有一点问题就是没有加上图片切换的时候的延 ...

  3. 【jQuery】全功能轮播图的实现（本文结尾也有javascript版）

    轮播图 图片自动切换(定时器): 鼠标悬停在图片上图片不切换(清除定时器) 鼠标悬停在按钮上时显示对应的图片(鼠标悬停事件) 鼠标悬停在图片上是现实左右箭头 点击左键切换到上一张图片,但图片为第一张时 ...

  4. 前端基础功能，原生js实现轮播图实例教程

    轮播图是前端最基本.最常见的功能,不论web端还是移动端,大平台还是小网站,大多在首页都会放一个轮播图效果.本教程讲解怎么实现一个简单的轮播图效果.学习本教程之前,读者需要具备html和css技能,同 ...

  5. JS应用实例2：轮播图

    在学习轮播图之前,要先会切换图片: 找三张图片,命名1.jpg,2.jpg,3.jpg 示例: <!DOCTYPE html> <html> <head> < ...

  6. jquery 轮播图实例

    实现效果:1.图片每2秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击右下角的小球时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应的变化. 4.当图片发生轮播切换时 ...

  7. 前端笔记之JavaScript面向对象（四）组件化开发&轮播图|俄罗斯方块实战

    一.组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. ...

  8. JQuery的使用案例（二级联动，隔行换色，轮播图，广告插入）

    JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...

  9. 前台主页搭建、后台主页轮播图接口设计、跨域问题详解、前后端互通、后端自定义配置、git软件的初步介绍

    今日内容概要 前台主页 后台主页轮播图接口 跨域问题详解 前后端打通 后端自定义配置 git介绍和安装 内容详细 1.前台主页 Homeviwe.vue <template> <di ...

随机推荐

  1. Happy Great BG-卡精度

    Happy Great BG Time Limit: 2000ms Case Time Limit: 2000ms Memory Limit: 65536KB   64-bit integer IO ...

  2. Linq 查询多张表，关系表

    项目中遇到一个问题, 有4张表, 然后相互之间有3张关系表关联, 一共七张表. 想要从顶层表查询最底层表的记录,不能写7层嵌套. 用Linq实现特别简单,  表:User,Role,Module,Fu ...

  3. Python之模块介绍

    模块介绍 模块,是用一些代码实现的某个功能的代码集合. 类似与函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用,提供了代码的重用性和代码间的耦合.对于一个复杂的功能,可能需要多个函 ...

  4. css3 翻起页脚

    html <div class="demo2"> <img src="images/1.jpg"> </div> css . ...

  5. Java关键字以及一些基础解释

    Java Se:Java Me 和Java Ee的基础,允许开发和部署在桌面,服务器,嵌入式环境和实时环境中使用的java程序,支持java web服务开发类 java ee:是目前java技术应用最 ...

  6. SQLServer中连接个数及超时问题

    超时时间已到.超时时间已到,但是尚未从池中获取连接.出现这种情况可能是因为所有池连接均在使用,并且达到了最大池大小. 解决办法1.在代码里面,把未关闭的连接关闭2.扩大共享池,方法如下:解决方法可以是 ...

  7. Unity3d笔记

    当变量重命名后,已序列化保存的值会丢失,如果希望继续保留其数值,可使用FormerlySerializedAs,如下代码所示: [UnityEngine.Serialization.FormerlyS ...

  8. SSM之全局异常处理器

    1. 异常处理思路 首先来看一下在springmvc中,异常处理的思路:   如上图所示,系统的dao.service.controller出现异常都通过throws Exception向上抛出,最后 ...

  9. vim跳转到文件的指定偏移位置

    :goto 偏移量 例如:偏移到文件的第100个字节处 :goto 100

  10. posix 正则库程序

    使用的是posix 正则库,参考: http://see.xidian.edu.cn/cpp/html/1428.html 执行匹配的时: gcc myreg.c ip.pat 内容: ip.*[0- ...