JS学习1——PC端轮播图

最新推荐文章于 2024-08-10 16:15:00 发布
最新推荐文章于 2024-08-10 16:15:00 发布
阅读量115 收藏
点赞数
分类专栏： JS学习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BaoFu99999/article/details/112966996
版权 
</!DOCTYPE html>
<html>
<head>
	<title>淘宝轮播图</title>
	<style type="text/css">
		/*清楚整体样式*/
		*{
		    margin:0;
		    padding:0;
		}
		a{
			text-decoration: none;
			color: #ccc;
		}
		li{
			list-style: none;
		}
		.lb{
			width: 533px;
			height: 300px;
			margin:100px auto;
			position: relative;
			overflow: hidden;
		}
		.lb .imgBox{
			position: absolute;
			width: 3000px;
			height: 300px;
		}
		.lb .imgBox li,img{
			position: absolute;
			width: 533px;
			height: 300px;
		}

		.lb .left{
			display: none;
			/* 子绝父相 */
			position: absolute;
			/* 非普通流盒子居中 */
			top:50%;
			left: 0;
			width: 18px;
			height: 30px;
			margin-top: -15px;
			background-color: rgba(0,0,0,.3);
			/* 文本居中 */
			padding-left: 1px;
			line-height: 30px;
			border-radius: 0 15px 15px 0;
			font-weight: bolder;
		}
		.lb .right{
			display: none;
			position: absolute;
			top:50%;
			right: 0;
			width: 18px;
			height: 30px;
			margin-top: -15px;
			background-color: rgba(0,0,0,.3);
			text-align: right;
			padding-right: 1px;
			line-height: 30px;
			border-radius: 15px 0 0 15px;
			font-weight: bolder;
		}
		.left:hover,.right:hover{
			background-color: rgba(0,0,0,.1);
		}
		.circleBox{
			position: absolute;
			left: 50%;
			margin-left: -47px;
			bottom: 20px;
			width: 82px;
			height: 13px;
			background-color: rgba(0,0,0,.1);
			border-radius: 10px;
			padding: 0 7px;
		}
		.circleBox li{
			float: left;
			width: 8px;
			height: 8px;
			border-radius: 4px;
			background-color: white;
			margin-left:7px;  /*外边距为3*/
			margin-top: 2px;
			cursor: pointer;
		}
		.circleBox .current{
			background-color: rgb(241, 71, 100);
		}
	</style>
	<script src="animate.js"></script>
</head>
<body>
	<div class="lb">
		<ul class="imgBox">
			<li><img src="1.jpg"></li>
			<li><img src="2.jpeg"></li>
			<li><img src="3.jpg"></li>
			<li><img src="4.jpeg"></li>
		</ul>
		<!-- <img src="5.jpg" title="5"> -->
		<a href="#" class="left">&lt</a>
		<a href="#" class="right">&gt</a>
		<ul class="circleBox">
		</ul>
	</div>
	<script>
		// num记录当前是第几张图片
		var num=0;
		// 1、图片li的样式
		var lis=document.querySelectorAll('.imgBox li');
		var liWidth=lis[0].offsetWidth;
		for(var i=0;i<lis.length;i++){
			lis[i].style.left=liWidth*i+'px';
		}

		//2、根据图片个数，创建小圆点
		var circleBox=document.querySelector('.circleBox');
		var imgBox=document.querySelector('.imgBox');
		for(var i=0;i<lis.length;i++){
			var li=document.createElement('li');
			// 设置索引号
			li.setAttribute('index',i);
			circleBox.appendChild(li);
			circleBox.style.width=lis.length*15+5+'px';
			circleBox.style.marginLeft=-circleBox.offsetWidth/2+'px';

			//2.1、小圆点的点击事件:排他思想，干掉所有人，留下我自己
			//2.2 点击小圆点，图片ul移动
			li.onclick=function(){
				for(var j=0;j<lis.length;j++){
					circleBox.children[j].className='';
				}
				this.className='current';
				var index=this.getAttribute('index');
				num=index;
				animate(imgBox,-index*liWidth);
			}
		}
		circleBox.children[0].className='current';
		// 2.3 克隆第一个图片，lis的长度依旧不变
		var first=imgBox.children[0].cloneNode(true);
		imgBox.appendChild(first);
		imgBox.children[imgBox.children.length-1].style.left=(imgBox.children.length-1)*liWidth+'px';


		// 3、鼠标经过left 和right显示，离开隐藏
		var lb=document.querySelector('.lb');
		var left=document.querySelector('.left');
		var right=document.querySelector('.right');
		lb.addEventListener('mouseenter',function(){
			left.style.display='block';
			right.style.display='block';
			// 鼠标经过，清除定时器
			clearInterval(timer);
			timer=null;  //清除定时器变量
		})
		lb.addEventListener('mouseleave',function(){
			left.style.display='none';
			right.style.display='none';
			// 鼠标离开，调用定时器自动播放
			timer=setInterval(function(){
				// 手动调用事件
				right.click();
			},2000);

		})

		//4、点击左右键移动图片
		var flag=true;  //节流阀,防止动画播放太快
		right.onclick=function(){
			if(flag){
				flag=false;
				//4.1 无缝隙滚动：在图片最后创建第一个图片的复制样本
				if(num==lis.length){
					imgBox.style.left=0;
					num=0;
				}
				num++;
				animate(imgBox,-num*liWidth,function(){
					flag=true;
				});
				//4.2 滚动同时，小圆点变化
				for(var i=0;i<lis.length;i++){
					circleBox.children[i].className='';
				}
				if(num==lis.length){
					circleBox.children[0].className='current';
				}else{
					circleBox.children[num].className='current';
				}
			}
		}
		left.onclick=function(){
			// 节流阀应用
			if(flag){
				flag=false;
				if(num==0){
					imgBox.style.left=-(lis.length)*liWidth+'px';
					num=lis.length;
				}
				num--;
				animate(imgBox,-num*liWidth,function(){
					flag=true;
				});
				//4.2 滚动同时，小圆点变化
				for(var i=0;i<lis.length;i++){
					circleBox.children[i].className='';
				}
				circleBox.children[num].className='current';
			}
		}

		// 5、自动播放
		// 5.1、刷新后自动播放
		// 5.2、鼠标经过，停止定时器
		// 5.3、鼠标移开，开启定时器
		var timer=setInterval(function(){
			// 手动调用事件
			right.click();
		},2000);
		
	</script>
</body>
</html>

animate.js文件如下：

// 左右移动
// obj为移动对象，target为距离页面左侧的距离
function animate(obj, target,callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
      var step = (target - obj.offsetLeft) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
        
      if (obj.offsetLeft == target) {
        clearInterval(obj.timer);
        // 如果回调函数存在，则在计时器结束后调用
        // if(callback){
        //     callback();
        // }
        callback && callback();
      }
      
      obj.style.left = obj.offsetLeft + step + "px";
    }, 15)
}

// 上下移动
// obj为移动对象，target为距离页面上方的距离
function animateY(obj, target,callback) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {
    var step = (target - window.pageYOffset)/ 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
      
    if (window.pageYOffset == target) {
      clearInterval(obj.timer);
      // 如果回调函数存在，则在计时器结束后调用
      // if(callback){
      //     callback();
      // }
      callback && callback();
    }
    
    window.scroll(0,window.pageYOffset + step);
  }, 15)
}```
肖芬芳
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现PC端横向轮播图
11-21
本文实例为大家分享了JavaScript实现PC端横向轮播图的具体代码，供大家参考，具体内容如下 步骤： 第一步：先实现右侧按钮点击图片动起来； 1.每次点击图片走的距离； 2.起始位置已知，计算定时器每走一小步的距离； 第二步：判断点击按钮一次图片移动的距离，停止定时器； 第三步：左边按钮逻辑和右侧按钮几乎一致； 1.因此封装函数move(flag),函数传参是Boolean则是左右按钮方向 第四步：无缝轮播：html结构修改，在当前结构分别加第一张图和最后一张图； 1.判断图片位置，设置相应位置； 第五步：小圆点逻辑：排他思想； 1.关键在于小圆点变色，用最终位置计算小圆点下标，设置
jQuery响应式手机端触屏滑动图片轮播插件
06-09
5. **js**：包含JavaScript代码，实现轮播的逻辑，如事件监听、动画效果和状态管理。 综上所述，实现"jQuery响应式手机端触屏滑动图片轮播插件"需要掌握HTML、CSS和JavaScript的基本知识，理解响应式设计原理，熟悉...
【js基础】pc端轮播图制作
weixin_53500514的博客
12-18 181
1.获取元素 2.鼠标经过离开focus显示隐藏左右按钮 3.动态生成小圆圈 4.小圆圈排他思想在生成的时候直接绑定点击事件 5.点击小圆圈，移动图片 6.克隆第一个小li到ul的最后 7.右侧按钮无缝滚动 8.点击左侧按钮，小圆点一起跟随变化 9.左侧按钮无缝滚动 10.点击左侧按钮，小圆点一起跟随变化 ...
PC端的轮播图——JavaScript实现
super码力的博客
12-28 1173
PC端轮播图，常用于网上商城商品展示自动播放图片...
案例效果：原生JS-实现pc端轮播图效果
一块小砖头的博客
08-09 511
案例效果：原生JS-实现pc端轮播图效果案例：轮播图需求实现效果： 案例：轮播图需求 布局：ul下有很多li标签；浮动在一行； 原理：切换图片的时候，把ul位置修改一下，给ul的父容器，设置一个 overflow:hidden； 功能需求： 序号轮播 左右按钮的轮播 自动轮播 鼠标在轮播图里面的时候，停止自动轮播，离开后继续自动轮播 实现效果： html部分 <div class...
原生js制作PC端轮播图
weixin_45135068的博客
07-30 298
功能分析 1.鼠标经过离开轮播图左右按钮显示隐藏 2.点击左侧按钮图片向左播放一张，右边同理 3.拖欠播放同时，下面的小圆圈也跟着变化 4.点击小圆圈，播放相应的图片 5.鼠标不经过轮播图，轮播图自动播放 6.鼠标经过轮播图，自动播放停止 HTML标签的结构及css样式 <div class="box"> <!-- 左侧按钮 --> <a href="javascript:;" class="arrow-l"> &
PC端的轮播图——JavaScript实现，醍醐灌顶
jiameih的博客
04-03 1033
left: 0;right: 0;width: 8px;js代码：//1、获取元素//2、鼠标经过显示左右按钮//清除定时器变量})//手动调用点击事件}, 2000)})//3、动态生成小圆圈i++) {//创建li// 记录当前圆圈的索引号，通过自定义属性来做//把li插入ol里面//圆圈的排他思想i++) {
javascript pc端特效——《轮播图》
最是人间留不住，朱颜辞镜花辞树。
12-25 280
js焦点轮播图的原理分析
适合手机端的轮播图，同界面可多次调用
09-18
"适合手机端的轮播图，同界面可多次调用"这个主题涉及到的是网页或应用中的一个重要组件——轮播图，它在移动端和PC端都有广泛的应用。轮播图是一种能够展示多张图片或内容的动态展示方式，通常用于首页、产品展示或...
（PC移动端通用）底部固定悬浮图片轮播代码.zip
07-22
4. `js`：这可能是JavaScript文件，用于实现轮播的动态效果和交互功能。JavaScript是网页动态效果的主要驱动力，它控制着图片的切换逻辑、动画效果以及用户交互反馈。 实现PC和移动端通用的关键在于响应式设计。...
Vue中使用better-scroll实现轮播图组件
01-19
better-scroll 是什么 better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景...今天我们利用它实现一个横向滚动——轮播图组件。演示如下： 首先来整理一下需求： 能够根据异步请求到的图片数据进行轮播图展
超级漂亮的jQuery焦点图广告轮播特效.pdf
11-10
《jQuery焦点图广告轮播特效——jCarousel深度解析》 在网页设计中，吸引用户注意力的一个重要元素就是动态展示的内容，而焦点图广告轮播特效则成为了一个不可或缺的设计手法。本文将详细介绍一款优秀的jQuery插件...
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 282
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
牛客JS题（三十四）监听对象
最新发布
不起眼小菜菜的博客
08-10 332
注释很详细，直接上代码……
【Vue3】图片未加载成功前占位
菜就多练
08-08 306
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 359
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
社交媒体分享预览图片和内容修改
wangweiscsdn的博客
08-06 226
社交媒体分享链接时的预览图片和内容
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 1092
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
适合PC端的轮播图样式
09-03
1. 高清大图：PC端显示屏较大，因此轮播图应该选用高清大图，以充分展示图片的细节和色彩，给用户带来更好的视觉体验。 2. 不占用过多页面空间：PC端页面设计通常需要考虑各种内容的布局，轮播图应尽量不占用过多的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值