最简单的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 ...
随机推荐
- C#中Trim()、TrimStart()、TrimEnd()的用法
string s = " from dual union all "; s = s.Trim().TrimEnd("union all".To ...
- Java与MySQL的连接
下载数据库驱动文件,解压并保存至任意位置 下载地址 新建Java项目,并将驱动文件添加到项目中 项目名右键-->构建路径-->配置构建路径-->添加外部Jar 在项目中新建类,编写代 ...
- cf723c Polycarp at the Radio
Polycarp is a music editor at the radio station. He received a playlist for tomorrow, that can be re ...
- ORACLE 触发器
•1.1 触发器类型 • DML触发器 • 替代触发器 • 系统触发器 •1.2 创建触发器 • 触发器触发次序 • 创建DML触发器 • 创建替代(INSTEAD OF)触发器 • 创建系统事件触发 ...
- 妈妈再也不用担心别人问我是否真正用过redis了
1. Memcache与Redis的区别 1.1. 存储方式不同 1.2. 数据支持类型 1.3. 使用底层模型不同 2. Redis支持的数据类型 3. Redis的回收策略 4. Redis小命令 ...
- Linux下vim 开发环境配置及配色（Ruby）
终端设置 字体:Monospace 10 粗体 内置方案M:黑底白字 内置方案S:Linux控制台 安装vundle git clone https://github.com/VundleVim/Vu ...
- PHP获取一年有几周以及每周开始日期和结束日期
最近接了一个项目,其中有一需求是用php获取一年有几周以及每周开始日期和接触日期.在网上找些资料没有合适的,于是自己做了一份,下面通过两种方式实现PHP获取一年有几周以及每周开始日期和结束日期 代码一 ...
- Func与Action
平时我们如果要用到委托一般都是先声明一个委托类型,比如: private delegate string Say(); string说明适用于这个委托的方法的返回类型是string类型,委托名Say后 ...
- iOS 4种开发者身份的官方说明
https://developer.apple.com/support/compare-memberships/cn/ 为了防止链接失效,截图如下:
- js实现四舍六入 奇进偶舍
function PointFloat(src, pos) { return Math.round(src * Math.pow(10, pos)) / Math.pow(10, pos); } // ...