web前端学习之轮播图实现(原生js)

很久前接触过html css js 但自己在工作中用的少,简单的需求直接vue 走起,没有静下心好好写点js css 什么的,现在想要好好学习下 大前端的知识了,第一个小练习,做了个轮播图

网上有很多轮播图的实现过程,每个人都有自己不一样的思路,自己只要实现了就行。当然有些思路确实比我的要好,后续借鉴学习。

逻辑:将要展示的图片全部放在盒子里,超出部分隐藏,然后设置定时器,没两秒循环一次 img 标签,如果display 为block 就将 display 设置为none  那么后面的图片就到当前的div 区域内了,大体思路是这样 ,当然后面加入了js 时间 支持前后翻页,和提示功能

上代码如下:

<!DOCTYPE html>
<html>

<head>
	<title>caroucel</title>
</head>

<style>
	*{
		margin:0;
		padding:0
	}
	.box {
		width: 300px;
		height: 250px;
		border: 1px solid red;
		position: relative
	}

	img {
		width: 300px;
		height: 250px;
	}

	#prev {
		position: absolute;
		top: 50%;
		margin-top: -12px;
		height: 35px;
		width: 15px;
		background-color: rgba(255, 0, 0, .6);
		vertical-align: center;
		line-height: 35px;
		cursor:pointer;

	}

	#next {
		position: absolute;
		top: 50%;
		right: 0;
		margin-top: -12px;
		height: 35px;
		width: 15px;
		background-color: rgba(255, 0, 0, .6);
		vertical-align: center;
		line-height: 35px;
		cursor:pointer;

	}
</style>

<body>
	<div class=‘box‘ style=‘overflow: hidden‘>
		<img src="./1" >
		<img src="./2" >
		<img src="./3" >
		<img src="./4" >
		<img src="./5" >
		<span id=‘prev‘>
		< </span> <span id=‘next‘> >
		</span>

	</div><div id=‘dd‘></div>

	<script>
		// 修改样式为块
		function inintBlock() {
			const imgObjs = document.getElementsByTagName("img")
			for (let i = 0; i < imgObjs.length; i++) {
				imgObjs[i].style.display = ‘block‘
			}
		}
		inintBlock()
		function operate() {
			const imgObjs = document.getElementsByTagName("img")
			for (let i = 0; i < imgObjs.length; i++) {
				if (imgObjs[i].style.display === ‘block‘) {
					imgObjs[i].style.display = ‘none‘
					break;
				}
			}
			const state = Array.prototype.slice.call(imgObjs).map(function (item) { return item.style.display })
			const res = state.filter(function (i) { return i === ‘none‘ })
			if (res.length === 5) {
				inintBlock()
			}

		}

		let interval = window.setInterval(
			function () {
				operate()
			}, 2000
		)

		const el = document.getElementsByClassName(‘box‘)[0]

		el.addEventListener(‘mouseenter‘, function (event) {
			window.clearInterval(interval)
		})

		el.addEventListener(‘mouseleave‘, function (event) {
			interval = window.setInterval(function () { operate() }, 2000)
		})

		document.getElementById(‘prev‘).addEventListener(‘click‘,
			//获取当前images 的属性进行遍历,找block属性,修改前一个节点样式
			function () {
				const imgObjs = document.getElementsByTagName("img")
				for (let i = 0; i <imgObjs.length;i++){
					if(imgObjs[i].style.display === ‘block‘){
						if(i-1<0){
							document.getElementsByClassName(‘box‘)[0].nextSibling.innerText = ‘已经是首页了‘
							break;
						}
						imgObjs[i-1].style.display = ‘block‘
						break;
					}
				}
			})

		document.getElementById(‘next‘).addEventListener(‘click‘,function(){
			const imgObjs = document.getElementsByTagName("img")
				for (let i = 0; i <imgObjs.length;i++){
					if(imgObjs[i].style.display === ‘block‘){
						if(i+1>4){
							document.getElementsByClassName(‘box‘)[0].nextSibling.innerText = ‘已经是最后一页了‘
							break;
						}
						imgObjs[i].style.display = ‘none‘
						break;
					}
				}

		})

	</script>

</body>

</html>

  代码也是很简单的,主要联系下,js 遍历 dom 的操作,孰能生巧,多多练习

有个小问题,如果我想把图片做成动画,淡入淡出 ,应该怎么搞呢?目前我想到的方法是利用 trasition opacity 进行区域透明度的切换,但是我的轮播图的逻辑也得修改了,不用上面的(将图片全部叠加在一起通过 opacity 控制他们的隐藏显示)

做的过程中有发现个方法,通过定位把几张图片从左往右一次拼接起来,点击的时候向左或者向右触发事件,事件内容是修改各个图片的定位 left right 值 从而产生左右翻滚的效果。(z-index 也是个实现的方法)

刚开始感觉下手很难,但做着做着方法也就越来越多,根据需求选择最合适的最适合自己的就好。

原文地址:https://www.cnblogs.com/my-python-2019/p/12583853.html

时间: 2024-10-14 15:22:36

web前端学习之轮播图实现(原生js)的相关文章

JS学习笔记--轮播图效果

希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代码 <style> ul, ol { padding:0; margin:0; } li { list-style:none; } #box { width:600px; height:350px; border:10px solid #ccc; margin:0 auto; position:r

js学习总结----轮播图之渐隐渐现版

具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; -webkit-user-select:none; } ul,li{ list-style } im

ionic3-ng4学习见闻--(轮播图完美方案)

ionic上 轮播图是最坑的插件了吧,各种bug和 问题. 事件也不好用.. 于是,我终于搞出来了一个完美的方案, 适用于,动态获取轮播图数据,自动循环播放,跳转其他页面回来后自动播放,手指触摸后自动播放. 至于有什么问题,还要大家多去试试,话不多说,开搞. 1.在使用轮播图的 page页面 ts文件中 import { Slides } from 'ionic-angular'; import { ViewChild } from '@angular/core'; 在class下面添加 @Vi

带无缝滚动的轮播图(含JS运动框架)

今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框架的代码如下: 1 //获取样式 2 function getStyle(obj,attr){ 3 if(obj.currentStyle){ 4 return obj.currentStyle[attr]; 5 }else{ 6 return getComputedStyle(obj,false)

浅谈轮播图(原生JavaScript实现)

现在各种轮播图插件,玲琅满目,用起来也非常方便,通常只需要选择元素然后传入参数就可以了.但是,和授人以鱼不如授人以渔一样的道理,不管怎样最基本的轮播图原理还是应当掌握的.这样不仅有利于我们自己写出来满足自己要求的轮播图,同时也对我们更好的使用其他插件有帮助.当然,最重要的是扎实我们的JavaScript基本功! 切入正题. 轮播,顾名思义,就是图片的循环"播放".播放可以自动(定时器)也可以手动(按钮).轮播的精要其实是切换,切换可以是上下左右不同方向的移动来实现切换,移动可以匀速小步

web前端之图片轮播特效

这周用jquery来实现网页上常见的图片轮播效果,下边是效果图: 当我们用鼠标点击上图中的向左以及向右按钮时候,图片会发生相应的切换效果,代码如下: index.html源代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus

自动 点击切换 按钮切换 轮播无缝选项卡 ----原生js

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="author" content="智能社 - zhinengshe.com" /> 6 <meta name="copyright" content="智能社 - zhinengshe.com"

js学习总结----轮播图的插件化封装

具体代码如下: ~function(){ function AutoBanner(curEleId,ajaxURL,interval){ //把之前存储获取元素的变量都作为当前实例的私有属性 this.banner = document.getElementById(curEleId); this.bannerInner = utils.firstChild(this.banner); this.bannerTip = utils.children(this.banner,"ul")[

带无缝滚动的轮播图(含JS运动框架)-简洁版

昨天写的神逻辑,今天终于解决,经过大家的商讨,终于研究出来一套简单的代码!!! js代码如下: 1 <script> 2 window.onload = function() { 3 var oWrap = document.getElementById("wrap"); 4 var oBox = document.getElementById("box"); 5 var aBox = oBox.getElementsByTagName("li