最简单的html轮播图制作适合新手
html代码
----------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>简单轮播图</title>
<link href="../css/StyleSheet1.css" rel="stylesheet" />
<script src="../jacascript/JavaScript1.js"></script>
</head>
<body>
<div id="main">
<a href="http://www.hao123.com"><img class="pic" style="display:block;" src="../images/t013499f22a7eba268c.jpg" /></a>
<a href="http://www.hao123.com"><img class="pic" src="../images/t010ca6934adea4b2dd.jpg" /></a>
<a href="http://www.hao123.com"><img class="pic" src="../images/t01567e928742297a81.jpg" /></a>
<a href="http://www.baidu.com"><img class="pic" src="../images/t019d2a27609e61b431.jpg" /></a>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------------------
css 代码
-------------------------------------------------------------------------------------------------------
*{
margin:0;
padding:0;
}
#main{
margin:50px auto;
width:514px;
height:240px;
background:#ff6a00;
overflow:hidden;
border:dashed #b4a8a8;
}
.pic{
width:514px;
height:240px;
}
-------------------------------------------------------------------------------------
javascript 代码
-----------------------------------------------------------------------------------------
window.onload = function () {
var div = document.getElementById('main');//通过id查找div
var img = div.getElementsByTagName('img');//通过div查找div下的所有img标签（获取所有的图片）
//通过getElementsByTagName 获取的标签是一个数组
var count = 0;//定义一个变量用来记录图片数组下标
var timer = null;//定义一个变量标识时器
timer=setInterval(change ,2000);//启动一个定时器2000毫秒调用一次change函数（切换一张图片）
function change() {//切换图片的函数
for (var i = 0; i < img.length; i++) {//遍历所有图片
img[i].style.display = 'none';//先让所有图片隐藏
}
img[count].style.display = 'block';//让当前下标的图片显示
count++;//每次加1
if (count == img.length) {
//当count==图片张数时让count=0；
count = 0;//使图片数组下标又回到0就形成了一个循环那么就可以让图片循环切换了
}
}
div.onmouseover = function () {
clearInterval(timer);//当鼠标移入Div时清除定时器，作用是当我们鼠标移入图片时
//图片就不再自动切换
}
div.onmouseout = function () {
timer = setInterval(change, 2000);//当鼠标移入Div时开启定时器，作用是当我们鼠标移
//出div时又让图片自动切换
}
}
最简单的html轮播图制作适合新手的更多相关文章
- 使用jQuery做简单的图片轮播效果
一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...
- 一步一步拆解一个简单的iOS轮播图（三图）
导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... ...
- viewPager+Handler+Timer简单实现广告轮播效果
基本思想是在Avtivity中放一个ViewPager,然后通过监听去实现联动效果,代码理由详细的解释,我就不说了. MainActivity.java package com.example.adm ...
- 前端（十七）—— jQuery基础：jQuery的基本使用、JQ功能概括、JS对象与JQ对象转换、Ajax简单应用、轮播图
jQuery的基本使用.JQ功能概括.JS对象与JQ对象转换.Ajax简单应用.轮播图 一.认识jQuery 1.什么是jQuery jQuery是对原生JavaScript二次封装的工具函数集合 j ...
- JQuery简单实现图片轮播效果
很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...
- 纯JS写最简单的图片轮播
非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...
- 分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
- 原生js实现简单移动端轮播图
最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...
- 简单的音乐轮播JS
首先说明一点,此篇文章只是为了回应一些博友的要求,本人并非专业搞js的,所以键盘侠和各路大神如果看到此文还请轻喷或者可以直接关掉页面~ 直接上代码: <div id="myboot&q ...
随机推荐
- .Net创建windows服务入门
本文主要记录学习.net 如何创建windows服务. 1.创建一个Windows服务程序 2.新建安装程序 3.修改service文件 代码如下 protected override void On ...
- JSP动作元素之include
采用include指令导入的页面输入静态导入,采用<jsp:include-/>指令属于动态导入. 语法格式如下: <jsp:include page="{relative ...
- [Search Engine] 搜索引擎技术之查询处理
我们之前从开发者的角度谈了一些有关搜索引擎的技术,其实对于用户来说,我们不需要知道网络爬虫到底是怎样爬取网页的,也不需要知道倒排索引是什么,我们只需要输入我们的查询词query,然后能够得到我们想要的 ...
- Shell入门教程：流程控制（4）case 条件判断
case的语法结构: case 待测项 in 样式串1] 命令区域1 ;; (样式串2) 命令区域2 ;; 样式串3) 命令区域3 ;; *) 命令区域 ;; esac 命令区域,可以是单一指令或多行 ...
- sql server 2008 数据的行转列
create table tb(id int, value varchar(10)) insert into tb values(1,'aa') insert into tb values(1,'bb ...
- firefox
ctrl l 定位到地址栏 f6 同ctrl l ctrl k 定位到搜索框 shift delete 删除地址 ...
- .NET程序员转Java不完全指南
首先要声明一点,“转”字并不包含那种语言牛B的意思. 然后要声明一点,“转”字仅限于企业应用开发的语言的转. 假设各种数据库切换无代沟, 假设各种WEB客户端技术无障碍. 1.搭建环境,IDE主流是e ...
- 用命令行来安装mac应用
今天看了下唐巧的博客,发现了这样一种宝贝呀,哈哈,分享一下 命令行工具,brew cask是一个用命令行管理Mac下应用的工具,它是基于homebrew的一个增强工具. brew cask insta ...
- a0=1、a1=1、a2=a1+a0、a3=a2+a1，以此类推，请写代码用递归算出a30？
public class Test { public static void main(String[] args) { System.out.println(recursive(30)); } pu ...
- NSURLSession总结
NSURLSession(会话)(ios7新增加) //英译 Session:会议,讲话 configuration:结构,配置 expect:预期 resume:取得 suspend:推迟 pro ...