cursor属性：改变鼠标中的属性 例如：

cursor：pointer（鼠标移动上去变小手）

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

	#d1{

		height: 200px;

		width: 200px;

		background-color: red;

	}

	#d1:hover{

		/*鼠标变小手*/

		cursor:pointer;

	}

</style>

</head>

<body>

	<div id="d1"></div>

</body>

</html>

　　有很多种类的属性值可以搜索使用

找元素的几种方式：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>找元素的几种方式</title>

<script type="text/javascript">

	window.onload=function(){

		    //通过ID属性找元素(得到一个元素对象)

		   var doc=document.getElementById("p");

			//通过class属性找到元素(得到一个数组)

			var arr = document.getElementsByClassName("p1");

			alert(arr.length);

		//通过元素名称找元素(得到一个数组)

		var arr2 = document.getElementsByTagName("p");

	}

</script>

</head>

<body>

	<p class="p1">a</p>

	<p class="p1">b</p>

	<p class="p1">c</p>

	<p class="p">d</p>

</body>

</html>

　　轮播图的效果：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>轮播图效果</title>

<script type="text/javascript">

	var arr=null;

	var tp = null;

	var index = 0;

	//当页面加载完成以后执行

	window.onload=function(){

		//定义一个一维数组用来存储图片

		 arr = ["images/d.jpg","images/q.jpg","images/c.jpg","images/b.jpg"];

		//获取img元素

		 tp = document.getElementById("tp");

		 start();

	}

	function change(obj){

        //获取用户点击的是哪个按钮

		index = obj.value;

		tp.src=arr[index];

	}

	//下一页

	function next(){

		//如果当前图片是最后一张

		if(index==arr.length-1){

			index=0;

		}else{

			index=index+1;

		}

		tp.src=arr[index];

	}

		//上一页

	function up(){

		//如果当前图片是最后一张

		if(index==0){

			index=arr.length-1;

		}else{

			index=index-1;

		}

		tp.src=arr[index];

	}

	//自动开始轮播

	function start(){

		var timer = setInterval("next()",3000);

	}

</script>

</head>

<body>

	<img src="data:images/d.jpg" alt="" id="tp">

	<input type="button" value="上一页" onClick="up()">

	<input type="button" value="0" onClick="change(this)">

	<input type="button" value="1" onClick="change(this)">

	<input type="button" value="2" onClick="change(this)">

	<input type="button" value="3" onClick="change(this)">

	<input type="button" value="下一页" onClick="next()">

</body>

</html>

　　

轮播效果/cursor的更多相关文章

  1. JQuery实现图片轮播效果源码

    ======================整体结构======================== <div class="banner"> <ul class ...

  2. html轮播效果的实现

    要实现如下图的效果 点击可以选择图片:不点击的时候自动轮播:并且点击完后再次自动轮播. 思路:如同在房子里透过窗子看路过的火车一样,窗子是不动的,但火车是陆续经过窗子的,所以透过窗子可以看到依次看完所 ...

  3. js实现淘宝首页图片轮播效果

    原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...

  4. 超实用的JavaScript代码段 Item3 --图片轮播效果

    图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...

  5. JQ 实现轮播图（3D旋转图片轮播效果）

    轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...

  6. JS、JQ实现焦点图轮播效果

    JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...

  7. JS实现焦点图轮播效果

    大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...

  8. jQuery实现轮播效果(一) - 基础

    前戏: XXXX年XX月XX日,经理交给我一个站点新闻资讯网页开发的活儿.我一个java程序猿,怎么完毕得了网页设计这样高端的活儿呢! 之前尽管有学过一点HTML.CSS的知识.可是在实际的使用中,把 ...

  9. 纯CSS焦点轮播效果-功能可扩展

    个人博客: http://mcchen.club 纯CSS3实现模拟焦点轮播效果,支持JQ等扩展各项功能.废话少说,直接贴代码. <!DOCTYPE html> <html> ...

随机推荐

  1. 解决SecureCRT中文版"数据库里没找到防火墙'无'"的错误提示

    问题描述: 最近从同事那拷贝到一个中文版的SecureCRT,但是每次打开都会有个防火墙的错误提示,“数据库里没找到防火墙“无”.此会话将尝试不通过防火墙进行连接. 出现这个错误的原因是在Secure ...

  2. 在ubuntu18 安装nginx过程，以及遇到的错误！

    1.下载 nginx下载的地址:https://nginx.org/en/download.html 2.解压 指定一个目录下面放置下载的文件,然后解压文件 命令:tar zxvf nginx-1.6 ...

  3. vertx的HttpServer模块

    Start HttpServer /** * 启动 HttpServer * multi instances 采用 synchronized防止线程安全问题 * addHandlers 方法是acto ...

  4. ConditionalOnBean 与 ConditionalOnMissingBean 的正确玩法

    之前看到这篇博客,写ConditionalOnClass的用法,自己实践了一下,感觉有点问题,原文如下: https://blog.csdn.net/lucyTheSlayer/article/det ...

  5. CyclicBarrier介绍

    应用场景 在某种需求中,比如一个大型的任务,常常需要分配好多子任务去执行,只有当所有子任务都执行完成时候,才能执行主任务,这时候,就可以选择CyclicBarrier了. 实例分析 我们需要统计全国的 ...

  6. git 相关学习

    1.Git 的一些快捷键 第一次创建本git 本地仓库 :: git  init  //在本地创建一个 Git仓库 :要在该目录下 第一次 要配置GitHub 的 账号和邮箱: git config ...

  7. redis与memacache的区别（转）

    redis和memecache的不同在于:1.存储方式:memecache 把数据全部存在内存之中,断电后会挂掉,数据不能超过内存大小redis有部份存在硬盘上,这样能保证数据的持久性.2.数据支持类 ...

  8. 微服务框架——SpringCloud（四）

    1.Spring Cloud Config 分布式配置 a.Config服务器 ①新建springboot项目,依赖选择Config Server ②pom文件关键依赖 <parent> ...

  9. ODM、JDM、OEM概念

    OEM (Original Equipment Manufacturer) - 原始设备制造商 委托生产,或者说“代工生产”,其含义是品牌厂商不直接制造产品,而是负责设计和开发新产品,控制销售“渠道” ...

  10. html2canvas在Vue项目踩坑-生成图片偏移不完整

    背景 最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...