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. 【转】Oracle之索引

    简介 1.说明 1)索引是数据库对象之一,用于加快数据的检索,类似于书籍的目录.在数据库中索引可以减少数据库程序查询结果时需要读取的数据量,类似于在书籍中我们利用目录可以不用翻阅整本书即可找到想要的信 ...

  2. AttributeError: 'module' object has no attribute 'enableTrace'

    Traceback (most recent call last): File "Long-lived-connection.py", line 29, in <module ...

  3. C# 断言 Assert

    重构-断言 现象:某一段代码需要对程序状态做出某种假设 做法:以断言明确表现这种假设 动机: 常常有这种一段代码:只有某个条件为真是,该改名才能正常运行. 通常假设这样的假设并没有代码中明确表现出来, ...

  4. web.xml中DispatcherServlet拦截器的配置详情

    <welcome-file-list>    <welcome-file>index.jsp</welcome-file>    <welcome-file& ...

  5. 以慕课网日志分析为例-进入大数据Spark SQL的世界

    下载地址.请联系群主 第1章 初探大数据 本章将介绍为什么要学习大数据.如何学好大数据.如何快速转型大数据岗位.本项目实战课程的内容安排.本项目实战课程的前置内容介绍.开发环境介绍.同时为大家介绍项目 ...

  6. VMware虚拟机扩充硬盘容量

  7. displaytag如何实现获取到每行的id字段的值。

    1.displaytag如何实现获取到每行的id字段的值. 使用封装好的框架,有时候,对于一个知识点不熟悉,可能会浪费你大把的时间,我使用displaytag主要是使用它的分页技术,但是客户提出的需求 ...

  8. .asmx支持post请求或者get请求调用(WebService "因 URL 意外地以 结束，请求格式无法识别" 的解决方法)

    使用Post调用以asmx形式提供的webservice时,在本机调试没有调用问题.一旦部署至服务器后会提示如下信息: <html> <head> <title>因 ...

  9. 洛谷p1106 删数问题 题解

    传送门 # 4.24一个重要的日子.我人生中第一道7个测试点下载了5个的题目被我发现了,第一次用光下载数据点机会,真心坑点重重. 这题是一道很经典的贪心题目,可能是因为我太蒻了,导致我一直以为最少普及 ...

  10. python3.X中try/except

    包含try...except...在3.x版本中与2.x版本中的用法差异. 1.先说差异: 在2.x的python中用法实例: try: ...... except Exception,e: rais ...