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. 【Flask】Flask学习笔记（一） 应用基本结构

    初始化 使用前必须创建一个应用实例 from flask import Flask app = Flask(__name__) 路由和视图函数 请求流程 客户端(web浏览器)-->  web服 ...

  2. .NET Core----七牛云图片上传

    在引用官方的qiniu.core的nuget是总是发生错误,错误如下,所以就在网上找到了一种解决方案,并稍微改进了一番, 以下是引用图: 方法一: 第一步:引用nuge 第二步:新建项目新建控制器视图 ...

  3. Maven Install报错：Perhaps you are running on a JRE rather than a JDK?

    我用的是idea,解决办法是:安装jdk,配置环境变量

  4. 非递归并查集——zoj4109

    卡常卡的我难受 非递归并查集好像写起来常数小一点 int F[maxn]; int Find(int x){ int r = x; while (F[r] != r)r = F[r]; int i = ...

  5. nginx代理 （带着请求头）

    当你获得云服务器之后, 你有这样一个需求:当你要访问一个url的时候,这个URL只能在人家的云服务器上访问(比如百度),所以你要买百度的BCC,你可能在想在BCC起服务,那样有点麻烦,直接使用ngin ...

  6. Linux安装Discuz

    安装lamp环境 安装参考 安装Discuz 1.进入官网 2.进入Discuz! 程序发布 3.选择最新版本 4.进入git地址 5.克隆下载 5. 确认Apache中的DocumentRoot配置 ...

  7. video作为背景全屏铺满问题

    项目中我打算使用一个MP4视频作为登录界面背景,首先在静态页面都没法显示出来,后来发现需要将视频的编码格式转换为H264的格式方能正常显示(使用格式工厂转换即可): 后又发现视频没办法铺满全屏,在不同 ...

  8. PHP如何处理emoji表情存入utf8的数据库

    一般Mysql表设计时,都是用UTF8字符集的.把带有emoji的昵称字段往里面insert一下就没了,整个字段变成了空字符串.这是怎么回事呢? 原来是因为Mysql的utf8字符集是3字节的,而em ...

  9. 课堂小记---JavaScript（3）

    操作DOM var newDOM=DOM元素.cloneNode(参数); 克隆(复制)当前节点,参数默认为false只复制当前节点元素.参数为true时复制当前元素及其后代和所有属性. day06 ...

  10. leetcode刷题第三天<无重复字符的最长子串>

    给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 : 输入: "abcabcbb" 输出: 解释: 因为无重复字符的最长子串是 . 示例 : 输入: &quo ...