JavaScript学习——使用JS实现首页轮播图效果
1、相关技术
获取元素 document.getElementById(“id 名称”)
事件(onload) 只能写一次并且放到body标签中
定时操作：setInterval(“changeImg()”,3000);
2、步骤分析（此案例轮播图效果是基于HTML&CSS——使用DIV和CSS完成网站首页重构实现的）
事先准备三张一样大小的图片（img1、img2、img3）放在文件夹Img下。
第一步：确定事件(onload)并为其绑定一个函数
第二步：书写绑定的这个函数
第三步：书写定时任务(setInterval)
第四步：书写定时任务里面的函数
第五步：通过变量的方式，进行循环(获取轮播图的位置，并设置 src 属性，在循环的时候需要注意到了最后一 张图片的时候要重置）。
<script>
function init(){
//书写轮播图显示的定时操作
setInterval("changImg()",3000);
} //书写函数
var i=1;
function changImg(){
i++; //获取图片位置并设置src属性值
document.getElementById("img_1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
Html：
<body onload="init()">
在指定位置定义 id。
最终实现的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
#father{
border: 0px solid black;
width: 1300px;
height: 1600px;
margin: auto;
}
#logo{
border: 0px solid black;
width: 1300px;
height: 50px;
}
.top{
border: 0px solid blue;
width: 431px;
height: 50px;
float: left;
}
#top{
padding-top: 12px;
height: 38px;
} #menu{
border: 0px solid red;
width:1300px;
height: 50px;
background: black;
margin-bottom: 10px;
}
ul li{
display: inline;
color: white;
}
#product{
border: 0px solid goldenrod;
width: 1300px;
height: 550px;
}
#product_top{
border: 0px solid blue;
width: 100%;
height: 43px;
padding-top: 5px;
}
#product_bottom{
border: 0px solid green;
width: 100%;
height: 498px;
} #product_bottom_left{
border: 0px solid red;
width: 200px;
height: 498px;
float: left;
}
#product_bottom_right{
border: 0px solid saddlebrown;
width: 1094px;
height: 498px;
float: left;
}
#big{
border: 0px solid hotpink;
width: 545px;
height: 247px;
float: left;
}
.small{
border: 0px solid blue;
width: 180px;
height: 247px;
float: left;
/*让里面的内容居中*/
text-align: center;
}
#bottom{
text-align: center;
}
/*去掉超链接的下划线*/
a{
text-decoration: none;
}
</style> <script>
function init(){
//书写轮播图显示的定时操作
setInterval("changImg()",3000);
} //书写函数
var i=1;
function changImg(){
i++; //获取图片位置并设置src属性值
document.getElementById("img_1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
</head>
<body body onload="init()">
<div id="father">
<!--1.logo部分-->
<div id="logo">
<div class="top">
<img src="../img/logo2.png" height="46px" />
</div>
<div class="top">
<img src="../img/header.png" height="46px"/>
</div>
<div class="top" id="top">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div> <!--2.导航栏部分-->
<div id="menu">
<ul>
<a href="#"><li style="font-size: large;">首页</li></a>
<a href="#"><li>手机数码</li></a>
<a href="#"><li>家用电器</li></a>
<a href="#"><li>鞋靴箱包</li></a>
</ul>
</div> <!--3.轮播图部分-->
<div id="">
<img src="../img/1.jpg" width="100%" height="100%" id="img_1"/>
</div> <!--4.最新商品-->
<div id="product"> <div id="product_top">
<span style="font-size: 25px">最新商品</span>
<img src="../img/title2.jpg"/>
</div> <div id="product_bottom"> <div id="product_bottom_left">
<img src="../img/big01.jpg" width="100%" height="100%" />
</div> <div id="product_bottom_right">
<div id="big">
<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%" /></a>
</div> <div class="small">
<a href="#"><img src="../img/small01.jpg" ></a>
<a href="#"><p style="color: gray;">榨汁机</p></a>
<p style="color: red;">599</p>
</div>
<div class="small">
<a href="#"><img src="../img/small02.jpg" ></a>
<a href="#"><p style="color: gray;">电视机</p></a>
<p style="color: red;">1599</p>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg" ></a>
<a href="#"><p style="color: gray;">锅</p></a>
<p style="color: red;">399</p>
</div>
<div class="small">
<a href="#"><img src="../img/small04.jpg" ></a>
<a href="#"><p style="color: gray;">面包机</p></a>
<p style="color: red;">799</p>
</div>
<div class="small">
<a href="#"><img src="../img/small05.jpg" ></a>
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">899</p>
</div>
<div class="small">
<a href="#"><img src="../img/small06.jpg" ></a>
<a href="#"><p style="color: gray;">洗衣机</p></a>
<p style="color: red;">999</p>
</div>
<div class="small">
<a href="#"><img src="../img/small07.jpg" ></a>
<a href="#"><p style="color: gray;">扫地机器人</p></a>
<p style="color: red;">1599</p>
</div>
<div class="small">
<a href="#"><img src="../img/small09.jpg" ></a>
<a href="#"><p style="color: gray;">微波炉</p></a>
<p style="color: red;">1099</p>
</div>
<div class="small">
<a href="#"><img src="../img/small08.jpg" ></a>
<a href="#"><p style="color: gray;">压力锅</p></a>
<p style="color: red;">799</p>
</div>
</div>
</div>
</div> <!--5.广告图片-->
<div id="">
<img src="../img/ad.jpg" width="100%"/>
</div> <!--6.广告图片-->
<div id="">
<img src="../img/footer.jpg" width="100%"/>
</div> <!--7.友情链接和版权信息-->
<div id="bottom">
<a href="#"><font>关于我们</font></a>
<a href="#"><font>联系我们</font></a>
<a href="#"><font>招贤纳士</font></a>
<a href="#"><font>法律声明</font></a>
<a href="#"><font>友情链接</font></a>
<a href="#"><font>支付方式</font></a>
<a href="#"><font>配送方式</font></a>
<a href="#"><font>服务声明</font></a>
<a href="#"><font>广告声明</font></a>
<p>
Copyright © 2005-2016 hh商城 版权所有
</p>
</div>
</div>
</body>
</html>
在浏览器内运行，实现了轮播图的效果。
JavaScript学习——使用JS实现首页轮播图效果的更多相关文章
- 【JavaScript】案例二：使用JS完成首页轮播图效果——事件（onclick&onload)
1.切换图片例子: 事件(onclick) <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- 使用JS完成首页轮播图效果
获取document.getElementById("id名称"); 事件onload 定时操作setInterval("changeImg()",3000); ...
- 【VIP视频网站项目二】搭建爱奇艺优酷腾讯视频官网首页轮播图效果及实现原理分析
这个是实现的效果,基本上轮播效果和主流网站的一致,但是我也在上面优化了一些效果, 可以在线预览效果:https://vip.52tech.tech/ 目前项目代码已经全部开源:项目地址:https:/ ...
- celery介绍、架构、快速使用、包结构，celery执行异步、延迟、定时任务，django中使用celery，定时更新首页轮播图效果实现，数据加入redis缓存的坑及解决
今日内容概要 celery介绍,架构 celery 快速使用 celery包结构 celery执行异步任务 celery执行延迟任务 celery执行定时任务 django中使用celery 定时更新 ...
- 用jQuery实现优酷首页轮播图
▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解: ...
- 关于用jQuery知识来实现优酷首页轮播图！
▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解: ...
- web手工项目02-注册功能输入分析，处理，输出方法-测试用例及缺陷编写-首页轮播图和购物车
web手工项目第二天笔记 昨日回顾 搭建测试环境(WAMP,phpStudy,tpshop项目文件) 熟悉项目(四个步骤,三个来源) 项目测试流程(需求评审,测试计划与方案,测试用例设计与评审,测试执 ...
- 商城05——首页轮播图显示实现&Redis环境搭建&Redis实现缓存
1. 课程计划 1.首页轮播图的展示 2.首页大广告展示流程图 3.Redis的常用命令 4.Redis的服务器搭建 (集群的搭建) 5.向业务逻辑中添加缓存 6.Jedis的使用(redis的客 ...
- js原生实现轮播图效果（面向对象编程）
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
随机推荐
- 修改eclipse最近访问的工程的配置文件
此文件为:org.eclipse.ui.ide.prefs 配置项为:RECENT_WORKSPACES= 示例:RECENT_WORKSPACES=E\:\\Workspaces\\wokspace ...
- 在ubuntu下安装zookeeper
安装java环境,并配置好java相关的环境变量$JAVA_HOME. 1.下载并解压最新稳定的zookeeper文件 wget http://mirrors.cnnic.cn/apache/zook ...
- Windows 10 的功能更新，版本 1809 - 错误 0x80070002
一般是双硬盘导致的问题,请打开电脑拆掉系统盘以外的硬盘,一般为固态硬盘和物理硬盘同时使用的电脑会出现此错误.
- mysql学习 2
1.建立外键 create table <表名>( <字段> 字段类型 not null, <字段> 字段类型 not null, <字段> 字段类型 ...
- vue路由钩子拦截器beforeEach和afterEach及页面路由变化路由监听
在路由跳转的时候,我们需要一些权限判断或者其他操作.这个时候就需要使用路由的钩子函数. 定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数. 总体来讲vue里面提供了三大类钩子 ...
- indexOf实际试用方法
用于搜索和查找关键字个数或者位置 例如: package zifu; public class tianqi { public static void main (String args[]){ St ...
- 订购一套Arduino UNO r3入门套件
若需要arduino套件经济版请点击以下链接跳转: http://item.taobao.com/item.htm?id=36759198826 这就开始了吗?希望有所收获吧-!
- Unity Android发布“Bundle Identifier has not been set up correctly”
原文:http://answers.unity3d.com/questions/162141/android-bundle-identifier-has-not-been-setup.html
- ZBrush中设置背面遮罩的两种方法
背面遮罩是ZBrush软件实时遮罩的一种,它的出现能够解决我们在模型雕刻时的一些问题.我们在 ZBrush®中雕刻一个比较薄的物体时,经常会不经意的雕刻到背面的物体.那么遇到此类状况该如何设置ZBru ...
- tp框架引入第三方sdk的经验总结
tp框架开发常用到第三方的接口,这时候需要引入第三方的sdk.例如:微信扫码支付sdk,阿里大于的淘宝sdk等等 首先到官网上下载对应php的sdk文件,通常会有至少一个实例代码. 1 新建一个控制器 ...