轮播图效果学习

最新推荐文章于 2022-11-30 00:13:36 发布
最新推荐文章于 2022-11-30 00:13:36 发布
阅读量774 收藏 3
点赞数
文章标签： css js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ymj960722/article/details/107105323
版权
本文介绍了如何使用HTML、CSS3和JavaScript实现一个商城轮播图效果。从项目需求分析开始，详细讲解了HTML结构布局、CSS3样式设置以及JavaScript事件处理和自动轮播功能的实现。内容包括HTML事件、DOM0级和DOM2级事件绑定，并提供了相应的代码示例。
摘要由CSDN通过智能技术生成

这周要求做个商城的轮播图，老师说在拿到项目的时候不要急急忙忙写代码，先要想好要具体做那些内容，项目的整体页面是这样的在这里插入图片描述
从这个页面上来看，主要分为下面几点：

  1. 左侧为主菜单
  2. 中间为焦点图
  3. 左右箭头
  4. 右下角小圆点
  5. 二级菜单

在这里插入图片描述

从JavaScript角度来讲：

  1. 点击上图得左右箭头，分别跳转上一图和下一图
    点击上一张图其实就是让一个变量进行递增，点击下一张图就是让变量递减

  2. 点击右下角小圆点也可以进行图片得轮播
    通过索引让变量进行随意得修改

  3. 每间隔2s进行轮播图得自动切换
    定时器；

  4. Typeof id 或者 typeof(id)

补充知识点：

html事件：在标签里面写 绑定在页面里面的
DOM0级事件：只能给一个元素的某一个行为绑定一次方法 第二次绑定的话会将前面的覆盖
DOM2级事件：可以给某一个元素的同一个行为绑定多个不同的方法

DOM2级事件里有监听方法：
addEventListener()和removeEventListener() ——非ie浏览器(chrome firefox opera safari ie9+)
addEventListener()可以为元素添加多个事件处理程序，触发的时候按照添加顺序依次进行调用；
removeEventListener()移除事件处理程序，不能移除匿名添加的函数
参数：第一个参数是事件名 第二个参数是事件处理程序函数 第三个参数是布尔值(true表示在捕获阶段调用 从上往下 false表示在冒泡阶段调用 从下往上 )

ie6~8版本 监听方法：
attachEvent()和detachEvent()
attachEvent()可以为元素添加多个事件处理程序，触发的时候按照添加顺序依次执行
detachEvent()移除事件处理程序 不能移除匿名添加的函数
参数：第一个参数是事件名 第二个参数是事件处理程序函数

那么对于现在仅学的内容来说，要通过HTML,CSS3,JavaScript，来分别设置各自的内容。

HTML设置

  1. 用一个大的div去包裹菜单栏和轮播图片设置class属性和id属性均为main；
  2. 在这个大的div内插入一个菜单盒子div class属性为menu-box；
  3. 再插入一个二级菜单div与菜单盒子div同级（原因：为之后如果对其中一个进行修改不会改变另外一个），并定义class属性和id属性为sub-menu，再class属性中添加一个hide属性
    为了先将它设置隐藏，之后在js中通过自定义函数来显示每个对应的二级菜单；
  4. 在子菜单div内插入四个class属性为inner-box的div，在每个新插入的div内分别添加三类div：第一类div定义框架（用于css3设置整体框架样式），第二类div定义每个大标题（用于css3设置标题加粗红色样式），第三类定义大标题下的每个内容，有多少行设置多少个div（用于css3设置每行的样式）；
  5. 再插入一个一级菜单div，在div内添加超链接标签a（用于以后可以跳转对应商品的页面），添加span标签输入菜单栏的名字，再添加一个小箭头；
  6. 再插入一个div放置焦点图
    class属性和id属性均为banner，在这个div内插入一个超链接标签a（用于以后可以跳转对应商品的页面），在每个a标签内再插入一个div用于等会儿css内设置插入不同图片；
  7. 再插入两个超链接标签a（设置左右箭头）和一个div包裹三个span标签（设置小圆点）。

整个整个HTML里包含的内容已经笼统的都完成了。

附上代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>商城轮播图</title>
	<link rel="stylesheet"  type="text/css" href="css/demo1.css">
</head>
<body>
	<!-- 用一个大的div包裹菜单栏和轮播图片 -->
	<div class="main" id="main">
		<!-- 整体菜单盒子 -->
		<div class="menu-box"></div>
		<!-- 子菜单 -->
		<div class="sub-menu hide" id="sub-menu">
			<div class="inner-box">
				<!-- 定义一个sub的div框 -->
				<div class="sub-inner-box">
					<!-- 定义每个大标题 -->
					<div class="title">手机、配件</div>
					<!-- 定义大标题下每个内容 -->
					<div class="sub-row">
						<span class="jc mr">手机通讯：</span>
						<a href="#">手机</a>
						<span class="ml mr">/</span>
						<a href="#">手机维修</a>
						<span class="ml mr">/</span>
						<a href="#">以旧换新</a>
					</div>
					<div class="sub-row">
						<span class="jc mr">手机配件：</span>
						<a href="#">手机壳</a>
						<span class="ml mr">/</span>
						<a href="#">手机存储卡</a>
						<span class="ml mr">/</span>
						<a href="#">数据线</a>
						<span class="ml mr">/</span>
						<a href="#">充电器</a>
						<span class="ml mr">/</span>
						<a href="#">电池</a>
					</div>
					<div class="sub-row">
						<span class="jc mr">运营商：</span>
						<a href="#">中国联通</a>
						<span class="ml mr">/</span>
						<a href="#">中国移动</a>
						<span class="ml mr">/</span>
						<a href="#">中国电信</a>
					</div>
					<div class="sub-row">
						<span class="jc mr">智能设备：</span>
						<a href="#">智能手环</a>
						<span class="ml mr">/</span>
						<a href="#">智能家居</a>
						<span class="ml mr">/</span>
						<a href="#">智能手表</a>
						<span class="ml mr">/</span>
						<a href="#">其他配件</a>
					</div>
					<div class="sub-row">
						<span class="jc mr">娱乐：</span>
						<a href="#">耳机</a>
						<span class="ml mr">/</span>
						<a href="#">音响</a>
						<span class="ml mr">/</span>
						<a href="#">收音机</a>
						<span class="ml mr">/</span>
						<a href="#">麦克风</a>
					</div>
				</div>
			</div>
			<div class="inner-box">
				<!-- 定义一个sub的div框 -->
				<div class="sub-inner-box" id="sub2">
					<!-- 定义每个大标题 -->
					<div class="title">电脑</div>
					<!-- 定义大标题下每个内容 -->
					<div class="sub-row">
						<span class="jc mr">电脑：</span>
						<a href="#">笔记本</a>
						<span class="ml mr">/</span>
						<a href="#">平板</a>
						<span class="ml mr">/</span>
						<a href="#">一体机</a>
					</div>
					<div class="sub-row">
						<span class="jc mr">电脑配件：</span>
						<a href="#">显示器</a>
						<span class="ml mr">/</span>
						<a href="#">CPU</a>
						<span class="ml mr">/</span>
						<a href="#">主板</a>
						<span class="ml mr">/</span>
						<a href="#">硬盘</a>
						<span class="ml mr">/</span>
						<a href="#">电源</a>
						<span class="ml mr">/</span>
						<a href="#">显卡</a>
						<span class="ml mr">/</span>
						<a href="#">其他配件</a>
					</div>
					<div class="sub-row">
						<span class="jc mr">游戏设备：</span>
						<a href="#">游戏机</a>
						<span class="ml mr">/</span>
						<a href="#">耳机</a>
						<span class="ml mr">/</span>
						<a href="#">游戏软件</a>
					</div>
					<div class="sub-row">
						<span class="jc mr">网络产品：</span>
						<a href="#">路由器</a>
						<span class="ml mr">/</span>
						<a href="#">网络机顶盒</a>
						<span class="ml mr">/</span>
						<a href="#">交换机</a>
						<span class="ml mr">/</span>
						<a href="#">存储卡</a>
						<span class="ml mr">/</span>
						<a href="#">网卡</a>
					</div>
					<div class="sub-row">
						<span class="jc mr">外部产品：</span>
						<a href="#">鼠标</a>
						<span class="ml mr">/</span>
						<a href="#">键盘</a>
						<span class="ml mr">/</span>
						<a href="#">U盘</a>
						<span class="ml mr">/</span>
						<a href="#">移动硬盘</a>
						<span class="ml mr">/</span>
						<a href="#">鼠标垫</a>
						<span class="ml mr">/</span>
						<a href="#">电脑清洗</a>
					</div>
				</div>
			</div>
			<div class="inner-box">
				<!-- 定义一个sub的div框 -->
				<div class="sub-inner-box" id="sub3">
					<!-- 定义每个大标题 -->
					<div class="title">家用电器</div>
					<!-- 定义大标题下每个内容 -->
					<div class="sub-row">
						<span class="jc mr">电视：</span>
						<a href="#">国产品牌</a>
						<span class="ml mr">/</span>
						<a href="#">韩国品牌</a>
						<span class="ml mr">/</span>
						<a href="#">欧美品牌</a>
					</div>
					<div class="sub-row">
						<span class="jc mr">空调：</span>
						<a href="#">显示器</a>
						<span class="ml mr">/</span>
						<a href="#">柜式</a>
						<span class="ml mr">/</span>
						<a href="#">中央</a>
						<span class="ml mr">/</span>
						<a href="#">壁挂式</a>
					</div>
					<div class="sub-row">
						<span class="jc mr">冰箱：</span>
						<a href="#">多开门</a>
						<span class="ml mr">/</span>
						<a href="#">对开门</a>
						<span class
最低0.47元/天 解锁文章
ymj960722
关注
前端学习（1）-轮播图
wangli1281的博客
10-26 1736
1.背景   写过一段时间的后台代码，总感觉自己做的界面有些难看。想尝试着写一些好看的界面。于是我从基本的css+html+javacript复习起来。尝试着做一个轮播图。 2.第一部分   用HTML写一个主体的框架。首先用ul列表来存放图片和描述。接着写一个div用来标识页码，最后写一对按钮组，实现点击后，进入下一个图片。     &lt;div class="slideShow"...
轮播图效果
一笑的博客
10-19 587
比较复杂，好好看。。<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none;
轮播图（6个功能）
XL202108041100的博客
08-29 2019
1、点击数字，跳到对应页面、 2、点击按钮，左右移动 3、自动播放 4、鼠标移入停止自动播放，移出继续自动播放 5、根据图片自动添加按钮 6、根据输入的数字，跳到对应的页面 <style> * { margin: 0; padding: 0; box-sizing: content-box; } .content { position:.
jQuery轮播图学习
ArrowKang的博客
11-29 607
学习前端有了一段时间了，慢慢的有了一些自己的体会，于是想写个博客记录一下自己的学习，巩固自己知识的同时，还能拿来复习用。进入正题，今天学习jQuery的时候，正好看到了轮播图这一块，在这里记录一下。 废话不多说，先上代码。 html部分： <div class="slideShow"> <ul> <li><a href=""><img src="1F.jpg"></a></l
JavaScript轮播图基础学习
Always on the road
05-30 1015
（此为课堂学习笔记，记录下方便日后学习）效果展示：代码展示：&lt;!doctype html&gt; &lt;html&gt; &lt;!-- 学习功能：使用JavaScript实现图片轮播，左右翻转，图片切换显示等。 author: lisa于2018-5-30 --&gt; &lt;title&gt; &lt;meta charset="utf-8"&gt; &lt;/tit..
js实现图片轮播效果学习笔记
01-21
本文实例为大家分享了js实现图片轮播效果...三、定义图片切换函数 提示:  1.遍历所有放数字索引的li，将每个li上的类去掉。  2.根据传递过来的index值找到对应的li给它添加类设为当前高亮显示。  3. 根据传递过来
简单的jquery层叠图片滚动轮播切换效果代码,带按钮的滚动轮播图
06-13
总之，这个项目提供了一个基本的jQuery图片轮播解决方案，结合HTML和CSS，能够实现带按钮的图片切换效果。对于初学者来说，这是一个很好的实践项目，可以学习到如何使用jQuery操作DOM，处理事件，以及实现动态效果。...
12种炫酷CSS3图片切换过渡效果
12-29
在实际应用中，这些效果可以通过组合使用，或者与其他CSS3特性（如响应式设计、Flexbox或Grid布局）相结合，来创造出更多富有创意的图片切换效果。在提供的压缩包中，`index.html`应该是示例代码的入口，`compass`...
js实现支持手机滑动切换的轮播图片效果实例
10-24
回调函数可以用来处理图片切换时的额外逻辑，比如添加过渡效果、调整导航点的状态等。 总的来说，这个实例展示了如何利用 JavaScript（配合 Zepto.js）在移动设备上创建一个响应用户滑动操作的轮播图片组件。通过...
轮播图AndroidImageSlider 的学习
vily_luky的博客
12-01 162
1，参考网址：https://github.com/daimajia/AndroidImageSlider/wiki 依赖： compile 'com.squareup.picasso:picasso:2.3.2' compile 'com.nineoldandroids:library:2.4.0' compile 'com.daimajia.slider:lib
四种效果的轮播图
10-26
四种方法的轮播图切换方法，基本涵盖现在网站的所有样式的，有淡入淡出轮播图，划入划出轮播图，左右箭头轮播图，等效果！！！
页面实现多个图片轮播功能demo
01-03
用原生js改写，实现一个页面上显示多个图片轮播功能，调用同一函数，减少代码冗余
轮播图效果实现详解
LF_HYCZ的博客
03-10 793
关于轮播图的介绍有很多,但是在android里,可以实现这个功能的方法并不多.这篇文章,就是对这些方法做个总结,算是一个记录(有的方式,只介绍下思路,因为我最终并不会采用)。 方式一: 使用 ViewFlipper ViewFlipper ,作为一个 ViewGroup 它可以控制它的子view切换. 就自动播放来说,它比viewpager更加强大,也更简单: setAuto
廊坊金彩教育：轮播图有什么用
lfjcjy的博客
12-09 907
　　轮播图作为用户对商品的第一呈现效果，商品图需要包含运营策略、也要结合美观规范的视觉设计，就会给用户带来舒适畅快的购物体验，从而产生更多的转换。因此商家在使用轮播图时一定要好好的利用。 　　轮播图有什么特点呢?1、商品的第一呈现效果;2、商品的轮播图浏览占比高;3、轮播图的浏览完整度高。 　　那么轮播图该怎么使用? 　　1、轮播图当作详情页，展示足够的商品信息 　　轮播图要展示足够的商品信息，可以把轮播图比喻成一个小团队每个人都有自己的工作：比如首图要颜值高的负责拉流量，其余的负责商品的卖点，商品
【学习笔记】 初学JS写了个轮播图
BBoxone的博客
07-14 463
自己的学习笔记
【学习笔记63】轮播图 —— 面向对象
最新发布
yizhiyang
11-30 162
轮播图 —— 面向对象
轮播图 小实验
weixin_30635053的博客
04-28 232
var Scoll=(function(auto_load){ var util={ $:function(node){ return typeof node =="string" ? document.getElementById(node) : node; }, $$:function(node,name){ var elem=node.getElem...
《移动应用开发》实验报告——轮播图
无限迭代中......
05-10 1601
代码仓库：https://gitee.com/shentuzhigang/demo-project/tree/master/vue-photos Blog： 实验目标 1.掌握使用Vue-CLI脚手架工具在自己的电脑上建立项目，并会运行调试工具。 2.理解组件化开发思想。 3.图片轮播手机网页。 实验内容 1.要求使用Vue-CLI脚手架工具搭建一个Web项目vue-photo（本次实验必须用Vue-CLI脚手架搭建项目）。实验报告要求将项目文件结构截图，并简单介绍。 2.参照源码效果，实现一个图片轮播.
轮播图--初学者
wqc的博客
01-20 2760
轮播图，适合初学者 才疏学浅，大神勿入 前言：轮播图就是我们在逛一些购物页面时不停轮播广告的那个物件。 本次轮播效果图如下： 轮播图是什么？ 轮播图其实就是将照片水平放置，设置一个只有显示一张照片大小的窗口，然后将照片在背后水平拉扯，从而给我们一种重复播放的感觉。 轮播图的基本功能： 第一，能够左右切换。 第二，自动播放。 第三，按下面的按钮能够跳转到固定页面。 第四，当把鼠标放在图上时，轮播停...
Flutter实现轮播图效果：隐式动画控件详解
"这篇文章主要讲解了在Flutter中如何实现轮播图效果，通过实例代码提供了详细的步骤和指导，适合学习和工作中参考。" 在Flutter开发中，实现动态效果和动画是一项重要的任务，而轮播图作为常见的交互元素，自然也是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值