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. 【Python】numpy 数组拼接、分割

    摘自https://docs.scipy.org 1.The Basics 1.1 numpy 数组基础 NumPy’s array class is called ndarray. ndarray. ...

  2. BOM——浏览器对象模型(Browser Object Model)

    什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...

  3. Spring boot 学习六 spring 继承 mybatis （基于注解）

    MyBatis提供了多个注解如:@InsertProvider,@UpdateProvider,@DeleteProvider和@SelectProvider,这些都是建立动态语言和让MyBatis执 ...

  4. C# 使用 MemoryStream 将数据写入内存

    转自:http://blog.csdn.net/andrew_wx/article/details/6629951 常用的MemoryStream构造函数有以下3种. 1:MemoryStream() ...

  5. Python 查看本机WiFi密码

    http://www.lijiejie.com/python-get-all-saved-wifi-passwords/ 很早以前我写过一个,丢了.  今天偶然看到这篇文章 , 也是很久以前写的,他用 ...

  6. algo: 冒泡排序（Java实现）

    package com.liuxian.algo; public class MySortClass implements Comparable<MySortClass> { public ...

  7. fastIO模板

    freadIO整理 namespace fastIO{ #define BUF_SIZE 100000 ; inline char nc() { static char buf[BUF_SIZE],* ...

  8. Hash表的实现

    #include "stdafx.h" #include <iostream> #include <exception> using namespace s ...

  9. 在MongoDB中修改数据类型

    引言 本文主要讲解Mongodb的类型转换.包括:string转double, string转int, string转Date. 0. 出现类型不一致的原因 ES导入数据到Mongo后,会出现类型统一 ...

  10. 编译出arm Android环境下的C++可执行文件

    要想编译出arm环境的C++可执行文件主要就是利用交叉编译器进行编译.编译过程本身都大同小异. 1.安装交叉编译器,交叉编译器的安装方法大致有下面几种: A.debian/ubuntu 系统可以直接输 ...