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. 百度之星2017初赛A

    雪崩,没晋级,补题 1001 分析:求n-1的约数个数 #include "iostream" #include "cstdio" #include " ...

  2. CodeForces - 204C Little Elephant and Furik and Rubik

    CodeForces - 204C Little Elephant and Furik and Rubik 个人感觉是很好的一道题 这道题乍一看我们无从下手,那我们就先想想怎么打暴力 暴力还不简单?枚 ...

  3. Out of resources when opening file ‘./xxx.MYD’ (Errcode: 24)解决方法

    今天朋友向我反映网站出现错误:Out of resources when opening file './xxx.MYD' (Errcode: 24)错误是因为打开的文件数超过了my.cnf的--op ...

  4. local_irq_save 与 local_irq_restore

    如果你要禁止所有的中断该怎么办? 在2.6内核中,可以通过下面两个函数中的其中任何一个关闭当前处理器上的所有中断处理,这两个函数定义在 <asm/system.h>中:     void  ...

  5. mongodb启动脚本

    #!/bin/sh # #chkconfig: #description: mongodb start() { /usr/local/yunshipei/enterplorer/mongodb/bin ...

  6. CF-816B

    B. Karen and Coffee time limit per test 2.5 seconds memory limit per test 512 megabytes input standa ...

  7. c# dll自动注册

    在网上看到一个c# dll自动注册的文章,我测试了一下,可用. 下面是具体代码 [DllImport("Ry4SCom.dll")] public static extern in ...

  8. 泛型(Generic)

    当集合中存储的对象类型不同时,那么会导致程序在运行的时候的转型异常 import java.util.ArrayList; import java.util.Iterator; public clas ...

  9. 在Elasticsearch6.X中如何实现去重

    1.前言 Elasticsearch有没有类似mysql的distinct的去重功能呢? 1)如何去重计数? 类似mysql: select distinct(count(1)) from my_ta ...

  10. LeetCode: 669 Trim a Binary Search Tree(easy)

    题目: Given a binary search tree and the lowest and highest boundaries as L and R, trim the tree so th ...