最简单的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 ...
随机推荐
- iOS开发网络篇—数据缓存
iOS开发网络篇—数据缓存 一.关于同一个URL的多次请求 有时候,对同一个URL请求多次,返回的数据可能都是一样的,比如服务器上的某张图片,无论下载多少次,返回的数据都是一样的. 上面的情况会造 ...
- ThinkPHP真正疑难问题笔记
如何选择线程安全版本还是非线程安全版本: http://www.cnblogs.com/Alight/p/3389113.html(看webserver处理请求时, 使用的是多线程的方式还是 多进程的 ...
- PHP cookie
PHP Cookie cookie 常用于识别用户. Cookie 是什么? cookie 常用于识别用户.cookie 是一种服务器留在用户计算机上的小文件.每当同一台计算机通过浏览器请求页面时,这 ...
- Like与Instr模糊查询性能
项目中用到like模糊查询,但是总觉的太小家子气,有没有高逼格的呢? instr(title,'手册')>0 相当于 title like '%手册%' instr(title,'手册')=1 ...
- 模拟javascript中的sort排序
一.javascript中sort对数据进行排序的原理 sort() 方法对数组的元素做原地的排序,并返回这个数组. sort 可能不是稳定的.默认按照字符串的Unicode码位点排序; 语法:arr ...
- MySql连接数据库和操作(java)
package org.wxd.weixin.util; import java.sql.Connection;import java.sql.DriverManager;import java.sq ...
- sql select 综合运用
1 : 多个表联合查询 select j.id, jt.Name, j.ApproveType , j.ProductCode, j.Cu ...
- PROJ4初探(转并整理格式)
PROJ4初探(转并整理格式) Proj4是一个免费的GIS工具,软件还称不上. 它专注于地图投影的表达,以及转换.采用一种非常简单明了的投影表达--PROJ4,比其它的投影定义简单,但很明显.很容易 ...
- Newton's method 分析
大家都知道对于合理的函数和合理的值域牛顿迭代法是二次收敛(quadratic covergence)的(收敛速度定义见 https://en.wikipedia.org/wiki/Rate_of_co ...
- PDO和PDOStatement类常用方法
PDO — PDO 类 PDO::beginTransaction — 启动一个事务 PDO::commit — 提交一个事务 PDO::__construct — 创建一个表示数据库连接的 PDO ...