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. 自动拆装箱（int，Integer）

    包装类型Java语言是一个面向对象的语言,但是Java中的基本数据类型却是不面向对象的,这在实际使用时存在很多的不便,为了解决这个不足,在设计类时为每个基本数据类型设计了一个对应的类进行代表,这样八个 ...

  2. nginx 轮询模式 nginx_upstream_jvm_route 插件安装

    使用nginx_upstream_jvm_route插件的目的是为了保证在轮询机制下的session的共享 前提:源码方式安装nginx.patch命令 1.下载nginx_upstream_jvm_ ...

  3. C++之MutexLock和MutexLockGuard封装

    noncopyable.h #ifndef __WD_NONCOPYABLE_H__ #define __WD_NONCOPYABLE_H__ namespace wd { class Noncopy ...

  4. mac下配置xampp的vhost

    1 先确定在httpd.conf文件(/Applications/XAMPP/xamppfiles/etc/httpd.conf)中,引入了vhosts.conf文件. 1.1 在httpd.conf ...

  5. BZOJ1758：[WC2010]重建计划

    浅谈树分治:https://www.cnblogs.com/AKMer/p/10014803.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem. ...

  6. java web路径分析

    绝对路径:以/开头的路径就叫做绝对路径,绝对路径在相对于的路径上直接拼接得到最终的路径 相对路径:不以/开头的路径就叫做相对路径,相对路径基于当前所在的路径计算的到最终的路径 硬盘路径:以盘符开头的路 ...

  7. web.xml中:<context-param>与<init-param>的区别与作用及获取方法

    <context-param>的作用: web.xml的配置中<context-param>配置作用1. 启动一个WEB项目的时候,容器(如:Tomcat)会去读它的配置文件w ...

  8. PHP正则表达式，看这一篇就够啦！

    前言 不知道你们有没有这个感觉,看正则表达式就像看天文数字一样,什么电话号码.邮箱的正则表达式,上网复制一下粘贴下来就搞定了.完全不知道这写的是什么玩意.后来我自己也想学一下,因为感觉用处还是挺大的. ...

  9. 由一次动态改变font-size的大小引申的一系列困惑补录

    以下结论如有错误,欢迎指正 在切入正题之前,先了解下window 和document这两个大对象 我们熟知 JavaScript的组成如下图所示: window对象和document对象分别属于哪个分 ...

  10. MySQL 5.7 INFORMATION_SCHEMA 详解

    refman mysql 5.7 INFORMATION_SCHEMA提供了对数据库元数据的访问,MySQL服务器信息,如数据库或表的名称,列的数据类型,访问权限等. 有时也把这些信息叫做数据字典或系 ...