JavaScript轮播图笔记

最新推荐文章于 2021-12-26 12:29:44 发布
最新推荐文章于 2021-12-26 12:29:44 发布
阅读量200 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45318105/article/details/106442491
版权

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>综合实例</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div class="main">
		<!--图片轮播-->
		<div class="banner">
			<a href="">
				<div class="banner-slide slide1"></div>
			</a>
			<a href="">
				<div class="banner-slide slide2"></div>
			</a>
			<a href="">
				<div class="banner-slide slide3"></div>
			</a>
		</div>
		
	</div>
</body>
</html>

css/style.css

*{
	margin:0;
	padding:0;
}

ul{
	list-style: none;
}

body{
	font-family: "微软雅黑";
	color:#14191e;
}

.main{
	width:1200px;
	height: 460px;
	margin:30px auto;
	overflow: hidden;
}

.banner{
	width:1200px;
	height: 460px;
    overflow: hidden;
}

.banner-slide{
	width: 1200px;
	height: 460px;
	background-repeat: no-repeat;
}

.slide1{
	background-image: url("../img/bg1.jpg");
}

.slide2{
	background-image: url("../img/bg2.jpg");
}

.slide3{
	background-image: url("../img/bg3.jpg");
}

定位并给baner-slide添加display属性

.banner{
	width:1200px;
	height: 460px;
	overflow: hidden;
	position: relative;

}

.banner-slide{
	width: 1200px;
	height: 460px;
	position: absolute;
	background-repeat: no-repeat;
	display: none;
}

给banner-slide添加slide-active类，并设置display:block

<a href="">
    <div class="banner-slide slide1 slide-active"></div>
</a>

.slide-active{
	display: block;
}

轮播图上的按钮样式

<div class="main">
	<!--图片轮播-->
	<div class="banner" id="banner">
		<a href="">
			<div class="banner-slide slide1 slide-active"></div>
		</a>
		<a href="">
			<div class="banner-slide slide2"></div>
		</a>
		<a href="">
			<div class="banner-slide slide3"></div>
		</a>
	</div>
	<!--上一张,下一张按钮-->
	<a href="javascript:void(0)" class="button prev"></a>
	<a href="javascript:void(0)" class="button next"></a>
</div>
.button{
	position: absolute;
	width: 40px;
	height:80px;
	left: 244px;
	top:50%;
	margin-top:-40px;
	background:url(../img/arrow.png) no-repeat center center;
}

.button:hover{
	background-color: #333;
	opacity: 0.8;
	filter:alpha(opacity=80);
}
.prev{
	transform: rotate(180deg);
}

.next{
	left:auto;
	right: 0;
}

轮播图上的圆点按钮

<!--圆点导航-->
<div class="dots">
    <span class="active"></span>
    <span></span>
    <span></span>
</div>
.dots{
	position: absolute;
	right: 20px;
	bottom: 24px;
	text-align: right;
}

.dots span{
	display: inline-block;
	width: 12px;
	height: 12px;
	line-height: 12px;
	border-radius: 50%;
	background: rgba(7,17,27,0.4);
	box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
	margin-left: 8px;
	cursor: pointer;

}

.dots span.active{
	box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
	background: #fff;
}

效果

新建js/script.js

// 封装一个代替getElementById()的方法
function byId(id){
	return typeof(id) === "string"?document.getElementById(id):id;
}

console.log(byId(123));

在index.html中引入放在body标签中

<script src="js/script.js"></script>

轮播图定时器设置，鼠标滑过图片后每隔3秒切换图片

// 封装一个代替getElementById()的方法
function byId(id){
	return typeof(id) === "string"?document.getElementById(id):id;
}

// 全局变量
var index = 0,
	timer = null,
	pics = byId("banner").getElementsByTagName("div"),
	len = pics.length;

function slideImg(){
	var main = byId("main");
	// 滑过清除定时器，离开继续
	main.onmouseover = function(){
		// 滑过清除定时器
	}
	main.onmouseout = function(){
		timer = setInterval(function(){
			index++;  //len = 3
			if(index >= 3){
				index = 0;
			}
			//切换图片
			changeImg();
		},3000);
	}
}

//切换图片
function changeImg(){
	// 遍历banner下所有的div,将其隐藏
	for(var i=0;i<len;i++){
		pics[i].style.display = "none";
	}
	// 根据index索引找到当前div，将其显示出来
	pics[index].style.display = 'block';
}

slideImg();

实现无需鼠标滑过也能自动轮播以及鼠标停留在图片上时停止轮播

function slideImg(){
	var main = byId("main");
	// 滑过清除定时器，离开继续
	main.onmouseover = function(){
		// 滑过清除定时器
		if(timer) clearInterval(timer);
	}
	main.onmouseout = function(){
		timer = setInterval(function(){
			index++;  //len = 3
			if(index >= 3){
				index = 0;
			}
			//切换图片
			changeImg();
		},3000);
	}
	// 自动在main上触发鼠标离开的事件
	main.onmouseout();
}

点击圆点切换图片

给dots添加id="dots"

<!--圆点导航-->
<div class="dots" id="dots">
    <span class="active"></span>
    <span></span>
    <span></span>
</div>

得到dots列表

// 全局变量
var index = 0,
	timer = null,
	pics = byId("banner").getElementsByTagName("div"),
	dots = byId("dots").getElementsByTagName("span"),
	len = pics.length;

在slideImg()中实现点击圆点切换图片的函数

function slideImg(){
	var main = byId("main");
	// 滑过清除定时器，离开继续
	main.onmouseover = function(){
		// 滑过清除定时器
		if(timer) clearInterval(timer);
	}
	main.onmouseout = function(){
		timer = setInterval(function(){
			index++;  //len = 3
			if(index >= 3){
				index = 0;
			}
			//切换图片
			changeImg();
		},3000);
	}
	// 自动在main上触发鼠标离开的事件
	main.onmouseout();
	// 遍历所有点击，且绑定点击事件，点击圆点切换图片
	for(var d=0;d<len;d++){
		// 给所有span添加一个id的属性，值为d，作为当前span的索引
		dots[d].id = d;
		dots[d].onclick = function(){
			// 改变index为当前span的id值
			index = this.id;
			// 调用changeImg，实现切换图片
			changeImg();		}
		}
	}
}

切换图片后，通过改变active类所在的span，圆点的样式也自动切换

changeImg()

//切换图片
function changeImg(){
	// 遍历banner下所有的div及dots下所有的span，将其隐藏，将span类清除
	for(var i=0;i<len;i++){
		pics[i].style.display = "none";
		dots[i].className = "";
	}
	// 根据index索引找到当前div和当前span，将其显示出来和设为当前
	pics[index].style.display = 'block';
	dots[index].className = "active";
}

上一张，下一张按钮功能实现

添加id属性

<!--上一张,下一张按钮-->
<a href="javascript:void(0)" class="button prev" id="prev"></a>
<a href="javascript:void(0)" class="button next" id="next"></a>

通过id获取对象


// 全局变量
var index = 0,
	timer = null,
	pics = byId("banner").getElementsByTagName("div"),
	dots = byId("dots").getElementsByTagName("span"),
	prev = byId("prev"),
	next = byId("next"),
	len = pics.length;

添加onclick事件，在slideImg()函数中添加

// 下一张
	next.onclick = function(){
		index++;
		if(index >= len) index = 0;
		changeImg();
	}
	// 上一张
	prev.onclick = function(){
		index--;
		if(index <= 0) index = len-1;
		changeImg();
	}

导航菜单的内容和样式

<div class="menu-box"></div>
<!-- 主菜单 -->
<div class="menu-content">
    <div class="menu-item">
	    <a href="">
			<span>手机 配件</span>
			<i>&#xe665;</i>
		</a>
	</div>
	<div class="menu-item">
		<a href="">
		    <span>电脑</span>
			<i>&#xe665;</i>
		</a>
	</div>
	<div class="menu-item">
		<a href="">
			<span>家用电器</span>
			<i>&#xe665;</i>
		</a>
	</div>
	<div class="menu-item">
		<a href="">
			<span>家具</span>
			<i>&#xe665;</i>
		</a>
	</div>
</div>

style.css

小箭头

@font-face{
	font-family: "iconfont";
	src:url("../img/font/iconfont.eot");
	src:url("../img/font/iconfont.eot") format("embedded-opentype"),
	url("../img/font/iconfont.woff") format("woff"),
	url("../img/font/iconfont.ttf") format("truetype"),
	url("../img/font/iconfont.svg#iconfog") format("svg");
}
/* 导航菜单 */
.menu-box{
	width: 244px;
	height: 460px;
	position: absolute;
	left: 0;
	top: 0;
	background:rgba(7,17,27,0.5);
	opacity: 0.5;
	z-index: 1;
}
.menu-content{
	width: 244px;
	height:454px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	padding-top: 6px;
}

.menu-item{
	height: 64px;
	line-height: 66px;
	font-size: 16px;
	padding: 0 24px;
	position: relative;
}

.menu-item a:link,.menu-item a:visited{
	color:#fff;
}

.menu-item a{
	display: block;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	padding: 0 8px;
	height: 63px;
}

.menu-item i{
	position: absolute;
	right: 32px;
	font-size: 24px;
	top: 2px;
	font-family: "iconfont";
	font-style: normal;
	font-weight: normal;
	color: rgba(255,255,255,0.5);
}

子菜单结构与样式

<!-- 子菜单 -->
<div class="sub-menu">
	<div class="inner-box">
		
	</div>
</div>

style.css

.sub-menu{
	width: 730px;
	height: 458px;
	border: 1px solid #d9dde1;
	background: #fff;
	position: absolute;
	left: 244px;
	top: 0;
	z-index: 999;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
}

.inner-box{
	width: 100%;
	height: 100%;
	background: url(../img/fe.png) no-repeat;
}

inner-box

            <!-- 手机 配件 -->
			<div class="inner-box">
				<div class="sub-inner-box">
					<div class="title">手机 配件</div>
					<div class="sub-row">
						<span class="bold mr10">手机通讯：</span>
						<a href="#">手机</a>
						<span class="mr10 ml10">/</span>
						<a href="#">手机维修</a>
						<span class="mr10 ml10">/</span>
						<a href="#">以旧换新</a>
					</div>
					<div class="sub-row">
						<span class="bold mr10">手机配件：</span>
						<a href="">手机壳</a>
						<span class="ml10 mr10">/</span>
						<a href="">手机存储卡</a>
						<span class="ml10 mr10">/</span>
						<a href="">数据线</a>
						<span class="ml10 mr10">/</span>
						<a href="">充电器</a>
						<span class="ml10 mr10">/</span>
						<a href="">电池</a>
					</div>
					<div class="sub-row">
						<span class="bold mr10">运营商：</span>
						<a href="">中国联通</a>
						<span class="ml10 mr10">/</span>
						<a href="">中国移动</a>
						<span class="ml10 mr10">/</span>
						<a href="">中国电信</a>
					</div>
					<div class="sub-row">
						<span class="bold mr10">智能设备：</span>
						<a href="">智能手环</a>
						<span class="ml10 mr10">/</span>
						<a href="">智能家居</a>
						<span class="ml10 mr10">/</span>
						<a href="">智能手表</a>
						<span class="ml10 mr10">/</span>
						<a href="">其他配件</a>
					</div>
					<div class="sub-row">
						<span class="bold mr10">娱乐：</span>
						<a href="">耳机</a>
						<span class="ml10 mr10">/</span>
						<a href="">音响</a>
						<span class="ml10 mr10">/</span>
						<a href="">收音机</a>
						<span class="ml10 mr10">/</span>
						<a href="">麦克风</a>
					</div>
				</div>
			</div>

子菜单添加hide类，并设置为隐藏

<div class="sub-menu hide">
.hide{
	display: none;
}

inner-box display属性设置为隐藏

.inner-box{
	width: 100%;
	height: 100%;
	background: url(../img/fe.png) no-repeat;
	display: none;
}

二级菜单展开效果，鼠标滑过一级菜单时显示对应的二级菜单

给menu-content设置id

<!-- 主菜单 -->
<div class="menu-content" id="menu-content">

通过byId()得到menu对象，再通过getElementsByClassName()得到menuItems

给sub-menu设置id

<div class="sub-menu hide" id="sub-menu">

通过byId()得到subMenu对象，再通过getElementsByClassName()得到innerBox

// 全局变量
var index = 0,
	timer = null,
	pics = byId("banner").getElementsByTagName("div"),
	dots = byId("dots").getElementsByTagName("span"),
	prev = byId("prev"),
	next = byId("next"),
	len = pics.length,
	menu = byId("menu-content"),
	subMenu = byId("sub-menu"),
	innerBox = subMenu.getElementsByClassName("inner-box"), 
	menuItems = menu.getElementsByClassName("menu-item");

绑定事件

// 导航菜单
	// 遍历主菜单，且绑定事件
	for(var m=0;m<menuItems.length;m++){
		// 给每一个menu-item定义data-index属性，作为索引
		menuItems[m].setAttribute("data-index",m);
		menuItems[m].onmouseover = function(){
			var idx = this.getAttribute("data-index");
			// 遍历所有子菜单，使每一个都隐藏
			for(var j=0;j<innerBox.length;j++){
				innerBox[j].style.display = 'none';
			}
			subMenu.className = "sub-menu";
			innerBox[idx].style.display = 'block';
		}
	}

二级菜单的收起

鼠标离开主菜单时子菜单收起

menu.onmouseout = function(){
	subMenu.className = "sub-menu hide";
}

鼠标从主菜单划到子菜单是子菜单显示

subMenu.onmouseover = function(){
	this.className = "sub-menu";
}

鼠标离开子菜单时子菜单收起

subMenu.onmouseout = function(){
	this.className = "sub-menu hide";
}

给当前显示的子菜单对应的主菜单添加阴影效果（通过修改background属性）

for(var m=0;m<menuItems.length;m++){
		// 给每一个menu-item定义data-index属性，作为索引
		menuItems[m].setAttribute("data-index",m);
		menuItems[m].onmouseover = function(){
			subMenu.className = "sub-menu";
			var idx = this.getAttribute("data-index");
			// 遍历所有子菜单，使每一个都隐藏
			for(var j=0;j<innerBox.length;j++){
				innerBox[j].style.display = 'none';
				menuItems[j].style.background = 'none';
			}
			menuItems[idx].style.background = 'rgba(0,0,0,0.1)';
			innerBox[idx].style.display = 'block';
		}
	}

实现效果

JavaScript

 

weixin_45318105
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
学习笔记----原生js轮播图
qq_42607483的博客
08-29 166
学习笔记----原生js轮播图 全部代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
JS原生实现轮播图
许失之的笔记
09-25 207
JS原生实现轮播图 前端新人的练习，希望能对同为小白的小伙伴有所帮助。 欢迎大佬们指正，欢迎大家讨论 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Rotation Chart</title> <!-- js原生实现轮播图 --> <!-- 整体思路： 1.全局设置一个总定时器，控制自动轮播，
js轮播图模板
02-14
内含js轮播图模板，用html相关的编辑器打开，可以自己研究。其中包括自动轮播和点击循环播放。
前端学习笔记：js 第四天--无缝滚动案例
weixin_44519518的博客
07-27 83
无缝滚动案例 CSS <style> *{ margin: 0px; padding:0px; list-style: none; } div{ width: 600px; height: 200px; margin:100p.
原生Js_简易图片轮播模板
weixin_30236595的博客
02-28 326
　　功能：图片自动循环轮播，通过点击“上一张”，“下一张”按钮来控制图片的切换 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Gary图片轮播</title> ...
12_JavaScript笔记.pdf
08-27
它的主要特点是运行在浏览器环境中，让网页不仅限于静态展示，还能实现如轮播图、表单验证等动态功能。JavaScript与Java虽然名字相似，但它们是完全不同的语言，没有直接关联。 JavaScript的核心标准由ECMAScript...
JavaScript 学习笔记
08-10
可以尝试制作计时器、轮播图、表单验证等常见Web功能，或者参与开源项目，通过解决实际问题提升技能。 总之，这份“JavaScript学习笔记”全面覆盖了JavaScript的基础和应用，结合HTML、CSS以及DOM操作，提供了丰富...
JavaScript笔记.doc
05-11
5. 自动换图：定时器（setTimeout或setInterval）配合图片数组实现。 6. DAViewerControl：IE的DirectAnimation控件，用于创建动画效果。 五、Document对象和Window对象 1. document对象：用于访问和操作HTML文档。...
JavaScript学习笔记-适合初学者
09-28
这些特效可能包括图片轮播、下拉菜单、弹出对话框、滚动动画等。通过学习这个部分，你可以了解到如何利用JavaScript改变HTML元素的样式、位置，以及如何处理用户事件，如点击、鼠标悬停等，从而创建动态效果。 ...
jQuery图片轮播切换.zip
最新发布
10-08
【jQuery图片轮播切换】是一种常见的网页动态效果，它通过使用JavaScript库jQuery实现图片的自动切换，为用户提供一种视觉上吸引人的展示方式。在网页设计中，图片轮播常用于展示产品、服务或者吸引用户的注意力。这...
JS功能齐全的轮播图
07-19
JS轮播图源码，带自动播图进度条，左右点击换图，底部按钮换图，功能齐全的轮播图
图片轮播模板-轮播图样式
10-11
页面显示图片轮播的效果，切换迅速，上手十分快速，有效展示图片。
四种 js 轮播效果
04-01
这是一个完整的js轮播效果演示代码，喜欢的朋友拿去吧
JS做轮播图
Alisa_Sheng的博客
12-26 2677
首先，我们得做出一个轮播时候样式的原型： 我们要做的呢就是这种，当到轮播主图的时候有一个放大的效果；选择第2,3,4张图片作为轮播的：左图，主图，右图； 怎么操作呢？这里先预讲一下方法： 1、建立一个数组 2、创建：一个ul标签，5个li标签，5个img标签； 设定各自的样式，把img放到li中，li放到ul中，再把li放到数组中； 3、用到数组的push(),pop(),unshift(),shift()方法实现，例：轮播时将5（第五张图片）删除，并到数组头部，以此循环 话不多...
无缝轮播滚动html模板,js轮播图无缝滚动效果
weixin_42297705的博客
06-07 252
在做轮播图时如果首尾不能连起来的话，效果会有点丑，下面介绍一种我常用的方法：先文字说明一下：如果要展示5张图，分别为1,2,3,4,5 那么在代码的引入中是这样的：1,2,3,4,5,1按顺序的轮播在此就不多说，重点说的是5>1和1>5的轮播i 表示当前图片的索引pre 表示上一张图片的按钮next 表示下一张图片的按钮ul 表示图片列表(1) 5>1>2... ...
JavaScript编写轮播图
cathei的博客
07-11 402
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; #wrap{ width: 500px; height: 300px; ov
JS滚动轮播图
hohocj的博客
10-27 312
效果图 自动滚动，以及点击滚动，还修复了多次点击出现图片位置混乱的bug <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小垃圾</title> <s...
无缝轮播滚动html模板,原生JS无缝滑动轮播图
weixin_32915107的博客
06-07 258
本文实例为大家分享了原生JS无缝滑动轮播图的具体实现代码，供大家参考，具体内容如下Documentul,div,img{margin: 0;padding: 0;list-style: none;vertical-align: top;}#banner{width: 400px;height: 300px;margin:50px auto;position: relative;overflow: ...
js实现简单的轮播图效果
seiEight的博客
05-24 2650
现在大多数网站都会在页面做一个轮播效果，看着舒服，同样的内容能展示更多的内容，很方便，我在今天接触到了这个无缝轮播图，在一番调试下总算是简单实现了效果，不多说，上代码 html： <div class="top" id="top"> <ul id="imgs"> <li><img sr...
学习JavaScript补充笔记，包含课程安排、移动端特效和插件使用等内容
Swiper插件是一款常用的轮播图插件，可以帮助我们实现一些常见的轮播图效果。在这部分内容中，作者介绍了如何使用Swiper插件，包括如何引入插件文件和如何按照规定的语法来使用插件。通过使用Swiper插件，我们可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值