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. java程序员技术范围

    1 工具 开发工具.源代码管理.构建工具.测试工具(压力.安全等).接口测试工具.反编译工具.日志工具.第三方工具等 2 java jvm.多线程.socket.io(两种方式).集合(两大接口).异 ...

  2. html中去除ul,li标签的样式列表标签的点？

  3. 对于JavaBean+Servlet+SqlServer的代码总结和打包调用

    日期:2019.3.24 博客期:049 星期日 说起来我已经说过很多次前台的应用技术了呢!这一次我是要将这一部分打包,做成配套的制作工具: 当前我已经打包成功,想要下载的同学可以进入我的GitHub ...

  4. vue搭建app, M端项目流程

    思路:安装sass预处理嵌套css,flex布局,flexible手机淘宝适配和fastclick移动300s延迟 打开cmd,使用命令行 1.切换盘符:e: 2.使用vue建立一个项目,具体请看我的 ...

  5. 关于Integer比较问题

    public class Test { public static void main(String[] args) { Integer a=127; Integer b=127; System.ou ...

  6. Docker commit 命令保存的镜像文件太大的问题

    基础镜像: centos7.5 进入容器后, 先后安装了 jdk1.8, maven3.6.0, git, rocketmq4.3.2 安装完成后使用 docker commit 命令保存为镜像 结果 ...

  7. L1-049 天梯赛座位分配​​​​​​​

    L1-049 天梯赛座位分配 (20 分) 天梯赛每年有大量参赛队员,要保证同一所学校的所有队员都不能相邻,分配座位就成为一件比较麻烦的事情.为此我们制定如下策略:假设某赛场有 N 所学校参赛,第 i ...

  8. 《ServerSuperIO Designer IDE使用教程》-3.Modbus协议，读取多个寄存器，实现多种数据类型解析。发布：v4.2.2版本

    更新内容,v4.2.2版本:1.增加Modbus协议读取多个寄存器,并且按多种数据类型解析数据.2.Modbus Serial和Modbus TCP两个驱动合并成一个驱动.3.修改数据库结构,保存配置 ...

  9. 原生js添加博客点击鼠标出小心心效果~~

    昨天刚申请成功JS权限,心血来潮想添加点东西,记得之前看到别人家博客首页点击鼠标的时候会出现炫酷的 “小心心”,自己也来搞一个.没有用jquery啥的框架,原生js写起来麻烦了点,不过主要是怕博客首页 ...

  10. 南京邮电大学//bugkuCTF部分writeup

    WEB 1.签到题 nctf{flag_admiaanaaaaaaaaaaa} 右键查看源代码或按f12即可. 2.这题不是web nctf{photo_can_also_hid3_msg} 下载图片 ...