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. servlet九大内置对象和监听器

    对象名称 类型 描述 作用域 request javax.servlet.ServletRequest 表示一次用户请求 Request response javax.servlet.SrvletRe ...

  2. windows10环境下的RabbitMQ安装步骤（图文）

    https://blog.csdn.net/weixin_39735923/article/details/79288578 记录下本人在win10环境下安装RabbitMQ的步骤,以作备忘. 第一步 ...

  3. Qt之excel 操作使用说明

    学习背景: 适合熟悉些qt开发,但是不是深入了解的开发者学习.具体实现(qt 5.1版本),office2007 Excel做验证,Win 7(64位),如有讲解有误,欢迎斧正! 一.简单介绍 QAx ...

  4. 【玩转开源】制作Docker镜像

    做嵌入式方向经常会遇到的一个问题,就是编译环境安装,如果换电脑,再重新安装环境是一个比较费时的事情,这个时候可以自己制作一个Docker镜像,然后把编译环境在Docker镜像里面配置好,以后同步环境就 ...

  5. oracle ORA-00119, ORA-00132问题解决

    使用PL/SQL登录oracle报ORA-12154: TNS: 无法解析指定的连接标识符sqlplus /nologconnect /as sysdbastartup报如下错误:ORA-00119: ...

  6. eclipse集成testng插件

    一.TestNG简介 TestNG是一个开源自动化测试框架,它受到JUnit和NUnit的启发,而引入了许多新的创新功能,如依赖测试,分组概念,使测试更强大,更容易做到. 它旨在涵盖所有类别的测试:单 ...

  7. kityminder-editor + MongoDB 思维导图数据自动实时保存方案

    最近开始做自己的第一个开源项目:一个基于思维导图的测试用例管理系统MinderCase,在做了一周的技术调研后,决定采用kityminder-editor作为思维导图编辑器,为了支持实时存储,当思维导 ...

  8. Ionic2生成的main.js执行时间10s+

    写个随笔记录下. 经过一周多各种莫名其妙的研究与分析,然后在论坛中大神给一个命令完美解决之. ionic build android --prod --release

  9. C# Common Log function

    public int Log(string info) { info = "-----------------------------" + DateTime.Now.ToStri ...

  10. 基于 EntityFramework、Autofac 的 UnitOfWork 框架（一）

    之前公司项目参考 NopCommerce 开发了一套系统,但是不支持 UnitOfWork,最近想开发新的项目,所以就基于原有的基础上又添加 UnitOfWork 支持,由于目前正在逐步完善中,所以可 ...