JS时实现图片无线轮播，支持响应式布局，动态调整坐标大小

最新推荐文章于 2022-10-20 20:54:46 发布
最新推荐文章于 2022-10-20 20:54:46 发布
阅读量324 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ink_s/article/details/103458515
版权

效果图：

 

 

 

 

CSS 

@CHARSET "UTF-8";

* {
	margin: 0px;
	padding: 0px;
}

.wheel_combination{
	width: 100%;
	height: auto;
	position: relative;	
}

.display_area{
	width: 100%;
	height: auto;
	position: absolute;	    
}

.gallery{
	width: 100%;
	height: auto;
	position: relative;
}
.gallery_img{
	width: 100%;
	height: auto;
	position: absolute; 
	
}

.cursors{
	width: auto;
	height: 20px;
	position: absolute;
	display: flex;
	right: 50px;
}

.cursors_on{
	width: 10px;
	height: 10px;
	border-radius:5px;
	background:rgba(247,92,10,1.0);
	margin-left: 10px;
}

.cursors_off{
	width: 10px;
	height: 10px;
	border-radius:5px;
	background:rgba(210,172,15,0.9);
	margin-left: 10px;
}

.button_left_right{
		width: 50px;
	height: 50px;
		position: absolute;
	background: rgba(255,255,255,0.0);
	border: none;
outline: none;
}

.button_left_right:active{
opacity:0.3;
}


.button_left_right_img{
	width: 50px;
	height: 50px;
}

.display_text{
	width: 100%;
	height: 100px;
	font-size: 46px;
	color:#ffffff;
	position: absolute;
	text-align:center;

}

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<link href="test.css" rel="stylesheet">
<link href="translate.css" rel="stylesheet">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<title>主页</title>
</head>
<!-- style="overflow-x:hidden " -->
<body style="overflow-x:hidden ">


<!-- 整个轮播控件，图片加小圆点加左右键加文字 -->
<div class = "wheel_combination">  
    <!--     显示区域 -->
 	<div class = "display_area" id="display_area"> 
        <!--  	三张img水平画廊,宽度应该为三张图片的宽度 -->
 	     <div class = "gallery" id= "gallery"  >
 	      	<img class = "gallery_img" style="left: 0px;" id= "img0" src="../testimages/bg1.jpg"/>
 	 		<img class = "gallery_img" style="left: 0px;" id= "img1" src="../testimages/bg2.jpg"/>
 	 		<img class = "gallery_img" style="left: 0px;"id= "img2" src="../testimages/bg3.jpg"/>
 	     </div>
 	</div>
 	<!--     显示区域end -->
        <!--小圆点指示器 -->
        <!--JS根据图片个数动态添加 -->
 		<div class = "cursors" id = "cursors"> </div>
 	    <!--小圆点指示器end -->
 	    
 	    <button class="button_left_right" onclick="leftClick()"  id="button_left" style="left:20px"><img class = "button_left_right_img" src="../testimages/left_img.png"/></button>
 	    <button class="button_left_right" onclick="rightClick()" id="button_right" style="right:20px"><img class = "button_left_right_img" src="../testimages/right_img.png"/></button>
 	
 		<div class="display_text" id="display_text">日出江花红似火</div>
</div>
<!-- 整个轮播控件end -->


</body>

<script type="text/javascript" src="./test.js"></script>

</html>

js

//页面加载完成后执行轮播等方法
//var isInit = false;
//var img0 = document.getElementById("img0");
//img0.onload=function(){
//	if(!isInit){
//		isInit = true;
//		 addloadEvent(init);
//	}
//	};
 //alert("你好，我是一个警告框！");

addloadEvent(init);
 function addloadEvent(func){

	 var oldonload=window.onload;
	 if(typeof window.onload !="function"){
	  window.onload=func;
	 }
	 else{
	  window.onload=function(){
	  if(oldonload){
	   oldonload(); 
	  }
	  func();
	  }
	 }
	 }

 function init(){
	 var imgArray = new Array("bg1.jpg","bg2.jpg","bg3.jpg","bg4.jpg","bg5.jpg");
	 var textArray  = new Array("日出江花红胜火","春来江水绿如蓝","窗含西岭千秋雪","门泊东吴万里船","天街小雨润如酥");
	 
	 
	 var cursorsArray = new Array();
	 var imgNumber = 5;
	 var clickTimer = null;
	 var autoPlayTime = 4000;
	 //当前展示的图片
	 var imgIndex = 0;
	 var imgViewArray = new Array();
	 var gallery= document.getElementById("gallery");
	 var o = document.getElementById("display_area");
	 var img0 = document.getElementById("img0");
	 var img1 = document.getElementById("img1");
	 var img2 = document.getElementById("img2");
	 imgViewArray[0] = img0;
	 imgViewArray[1] = img1;
	 imgViewArray[2] = img2;
	 //获取显示区域的高度，设置圆点，文字，及左右按键的位置
	 var viewHeight = img0.offsetHeight;
	 //设置小圆点位置
	 var cursors =  document.getElementById("cursors");
	 cursors.style.top = viewHeight-30+"px";
	 //设置左右按钮的位置
	 var buttonLeft = document.getElementById("button_left");
	 var buttonRight = document.getElementById("button_right");
	 var textView = document.getElementById("display_text");
	 buttonLeft.style.top = (viewHeight-parseFloat(buttonLeft.offsetHeight))/2+"px";
	 buttonRight.style.top = (viewHeight-parseFloat(buttonRight.offsetHeight))/2+"px";
	 textView.style.top = viewHeight-70+"px";
	 buttonLeft.onclick = function () { 
		 //停止自动播放，三秒后再开始播放
		 stop();
		 if(clickTimer!=null){
			 clearInterval(clickTimer);
		 }
		 clickTimer=setInterval(function(){
			 play();
		 },3000); 
		 animate(100);
	 }
	 buttonRight.onclick = function () { 
		 //停止自动播放，三秒后再开始播放
		 stop();
		 if(clickTimer!=null){
			 clearInterval(clickTimer);
		 }
		 clickTimer=setInterval(function(){
			 play();
		 },3000);
		 animate(-100);
	 }
	 for(var cs = 0;cs<imgNumber;cs++){
		 var div = document.createElement("div");
		 if(imgIndex==cs){
			 div.className="cursors_on"; 
		 }else{
			 div.className="cursors_off";
		 }
		 cursorsArray[cs] = div;
	 	 cursors.appendChild(div);  
	 }
	 var leftImgIndex = imgIndex-1;
	 if(leftImgIndex<0){
		 //当前显示的是第一张，则当前显示的左边显示最后一张
		 leftImgIndex = imgNumber-1;
	 }
	 var midImgIndex = imgIndex;
	 var rightImgIndex = imgIndex+1;
	 if(rightImgIndex>(imgNumber-1)){
		 //当前显示的是最后一张，则右边显示第一张
		 rightImgIndex = 0;
	 }
	 $("#display_text").html(textArray[imgIndex]);
	 imgViewArray[0] .src="../testimages/"+imgArray[leftImgIndex];
	 imgViewArray[1] .src="../testimages/"+imgArray[midImgIndex];
	 imgViewArray[2] .src="../testimages/"+imgArray[rightImgIndex];
	 var oneWidth =  o.clientWidth||o.offsetWidth;
	 imgViewArray[0].style.left="-100%";
	 imgViewArray[1].style.left="0%";
	 imgViewArray[2].style.left="100%";
	
	 //每次移动间隔
	 var interval=10;
	 //总时间
	 var times = 400;
	 var isAnimate = false;
	 //移动动画    width左移或右移量-100 或100
	 function animate(width){
		 if(!isAnimate){
			 isAnimate = true;
			 textView.style.left = "-100%";
			 //每次移动距离
			 var speed=width/(times/interval);
			 //剩余需要移动的量
			 var offset = width;
			 go();
			 function go(){
				 if(offset!=0){
					 if(Math.abs(offset -speed)<Math.abs(speed)){
						 //最后一次移动
						 speed = offset;
					 }else{
						 speed=width/(times/interval); 
					 }
					 imgViewArray[0].style.left=parseFloat(imgViewArray[0].style.left)+speed+"%";//每次位移的值
					 imgViewArray[1].style.left=parseFloat(imgViewArray[1].style.left)+speed+"%";//每次位移的值
					 imgViewArray[2].style.left=parseFloat(imgViewArray[2].style.left)+speed+"%";//每次位移的值
					
					 offset = offset -speed; 
					 setTimeout(go,interval);
				 }else{					 
					 //动画结束
				
					 if(width>0){
						 //右移
						 imgIndex--;
						 if(imgIndex<0){
							 imgIndex = imgNumber-1;
						 }
						 
						 var f = imgViewArray[2];
						 imgViewArray[2] = imgViewArray[1];
						 imgViewArray[1] = imgViewArray[0];
						 imgViewArray[0] = f;
						 imgViewArray[0].style.left="-100%";
						 imgViewArray[1].style.left="0%";
						 imgViewArray[2].style.left="100%";
						  leftImgIndex = imgIndex-1;
						 if(leftImgIndex<0){
							 //当前显示的是第一张，则当前显示的左边显示最后一张
							 leftImgIndex = imgNumber-1;
						 }
						  midImgIndex = imgIndex;
						  rightImgIndex = imgIndex+1;
						 if(rightImgIndex>(imgNumber-1)){
							 //当前显示的是最后一张，则右边显示第一张
							 rightImgIndex = 0;
						 }
						 
						 imgViewArray[0] .src="../testimages/"+imgArray[leftImgIndex];
						// imgViewArray[1] .src="../images/"+imgArray[midImgIndex];
						 imgViewArray[2] .src="../testimages/"+imgArray[rightImgIndex];
					 }else{
						 //左移
						 imgIndex++;
						 if(imgIndex==imgNumber){
							 imgIndex = 0;
						 }
						 var f = imgViewArray[0];
						 imgViewArray[0] = imgViewArray[1];
						 imgViewArray[1] = imgViewArray[2];
						 imgViewArray[2] = f;
						 imgViewArray[0].style.left="-100%";
						 imgViewArray[1].style.left="0%";
						 imgViewArray[2].style.left="100%";
						  leftImgIndex = imgIndex-1;
						 if(leftImgIndex<0){
							 //当前显示的是第一张，则当前显示的左边显示最后一张
							 leftImgIndex = imgNumber-1;
						 }
						  midImgIndex = imgIndex;
						  rightImgIndex = imgIndex+1;
						 if(rightImgIndex>(imgNumber-1)){
							 //当前显示的是最后一张，则右边显示第一张
							 rightImgIndex = 0;
						 }
						 
						 imgViewArray[0] .src="../testimages/"+imgArray[leftImgIndex];
						 //imgViewArray[1] .src="../images/"+imgArray[midImgIndex];
						 imgViewArray[2] .src="../testimages/"+imgArray[rightImgIndex];
					 }
					 
					 for(var cs = 0;cs<imgNumber;cs++){
						 if(imgIndex==cs){
							cursorsArray[cs].className="cursors_on";
						 }else{
							 cursorsArray[cs].className="cursors_off";
						 }
					 }
					 
					 //文本进入动画
					 //textView.style.left = "0%";
					 $("#display_text").html(textArray[imgIndex]);
					 var offsetText = 100;
					 var speedText =offsetText/40; 
					 intoText();
					 function intoText(){
						 //alert("文字left"+parseFloat(textView.style.left));
						 
						 if(offsetText!=0){
							 if(Math.abs(offsetText -speedText)<Math.abs(speedText)){
								 //最后一次移动
								 speedText = offsetText;
							 }else{
								 speedText=100/40; 
							 }
							 textView.style.left=parseFloat(textView.style.left)+speedText+"%";//每次位移的值
						
							 offsetText =offsetText -speedText; 
							 setTimeout(intoText,10);
						 }else{
							 //文字动画结束
							 isAnimate = false;
						 }
					 }
		
				 }
				}
		 }
		 
	 }
	 
	 play();
	 //自动播放
	 function play(){
		 if(clickTimer!=null){
			 clearInterval(clickTimer);
		 }
		 timer=setInterval(function(){
			 animate(-100); 
		 },autoPlayTime);
	}
	 //停止播放
	 function stop(){
	 clearInterval(timer);
	 }
	 
	 $(window).resize(function(){ 
		  var wHeight = $(window).height();
		  var wWidth = $(window).width();
		  //获取显示区域的高度，设置圆点，文字，及左右按键的位置
		var viewHeight = img0.offsetHeight;
		 //var cursors =  document.getElementById("cursors");
		 cursors.style.top = viewHeight-30+"px";
		 buttonLeft.style.top = (viewHeight-parseFloat(buttonLeft.offsetHeight))/2+"px";
		 buttonRight.style.top = (viewHeight-parseFloat(buttonRight.offsetHeight))/2+"px";
		 textView.style.top = viewHeight-70+"px";
		})

 }

 

 

ink_s
关注
html写一个轮播图响应式布局,响应式banner图片轮播布局代码
weixin_36325174的博客
06-16 1315
使用方法：1、head引入css文件2、head引入js文件3、body引入HTML代码//点击停止轮播$("#stop").click(function(){clearInterval(time);console.log("dsda");})//用于判断导航栏的状态var toggle = true;var time=null;var nexImg = 0;var bannerHeight = ...
响应式布局 图片上下轮播
12-30
响应式布局 图片上下轮播响应式布局 图片上下轮播响应式布局 图片上下轮播响应式布局 图片上下轮播
js 页面动态创建一个坐标（图标）
黄彪博客
01-02 1459
问题来源 在一个地图中，使用鼠标点击，添加一个mark(图标)，来标识摄像头所在的位置 解决思路 添加一个div 元素在body最后，然后使用绝对定位（absolute），并让div的定位坐标与鼠标保持一致 案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /&gt...
H5样式与布局 -- 响应式的轮播图布局
weixin_30359021的博客
06-12 481
本文直说布局，不提动画效果的实现。 移动端轮播图往往要做到自适应屏幕，一般布局如下： html 一般侧滑无缝式轮播图都是如此布局，3张轮播的要准备3+2张图，每个item外套一层有个特别大的width，外面再套一层有在屏幕范围内的固定宽度，设置overflow：hidden。 <!doctype html> <html lang="en"> <head...
轮播图片如何随着窗口的大小改变而改变
dianpi2993的博客
04-11 1176
调整窗口大小会触发一个onresize 事件，在该事件中写上关于调整轮播图片的js 如下例子： <html> <body onresize="alert('你已经改变了窗体的大小')"> <p>试着改变窗体的大小</p> </body> </html> 转载于:https://ww...
HTML循环轮播JS,原生JS响应式无限循环轮播图（原创）
weixin_28952633的博客
06-28 234
琉璃 02019/3/1 22:35:31html>视频练习#contain{width:1325px;height:1000px;background-color:#CCCCCC;}#slider{width:600px;height:400px;}>slideLlx("slider");请问有什么问题 ...
基于cssSlidy.js插件实现响应式手机图片轮播效果
10-21
响应式图片轮播在现代网页设计中扮演着重要的角色，特别是在手机移动端，它能提供吸引用户的视觉体验。本文将深入探讨如何使用cssSlidy.js插件来创建一个适应各种屏幕尺寸的图片轮播效果。 首先，cssSlidy.js是一款...
JS响应式图片幻灯片轮播切换特效.zip
07-11
总的来说，"JS响应式图片幻灯片轮播切换特效"是一个结合了JavaScript、CSS和HTML技术的网页组件，它通过JavaScript实现动态切换和响应式布局，通过CSS实现美化效果，而HTML则提供了基本的结构框架。在实际开发中，...
JavaScript实现简单图片轮播效果
10-19
JavaScript实现简单图片轮播效果的知识点主要包括以下方面： 1. 图片轮播基本原理：图片轮播是一种常见的网页交互效果，主要用于展示多张图片。一般通过定时器或手动触发事件来改变显示图片的位置，从而实现图片的...
前端Demo -- 轮播图
weixin_46240162的博客
04-22 501
前端Demo – 轮播图 源码在：https://gitee.com/jimmyxuexue/excellent_interface/tree/master/%E8%BD%AE%E6%92%AD%E5%9B%BE 思路：有几张图就放几个DIV，将所有的div的透明度都调整为0，在需要显示的div单独添加透明度为1的一个类，我们再使用JS动态的根据情况来动态的添加和删除这个类就可以实现轮播图的功能啦...
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
10-19
主要介绍了JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动),需要的朋友可以参考下
原生JS京东轮播图代码
10-20
主要为大家详细介绍了原生JS京东轮播图代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生JS+DIV模拟手机信号强度
03-28
原生JS+DIV模拟手机信号强度
web轮播图（{内涵js源码，支持动态更换图片大小，显示框大小）
最新发布
qq_55107504的博客
10-20 708
【代码】web轮播图（{内涵js源码，支持动态更换图片大小，显示框大小）
JavaScript>响应式布局与CSS样式和JS插件(轮播图)的使用方法
越努力，越幸福！
09-06 618
响应式布局： 同一套页面可以兼容不同分辨率的设备。 实现：依赖于栅格系统：将一行平均分为12个格子，可以指定元素占几个格子， 步骤： 1.定义容器。相当于之前的table 容器分类： 1.container：两边有留白 2.container-fluid：每一种设备都是100%宽度 2.定义行，相当于之前...
项目实战--响应式轮播图[2]
lql_h的博客
05-27 407
一．响应式轮播图 <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active">&...
写个js动态调整图片宽高 （原创）
diannianyong4129的博客
06-05 143
<body style="TEXT-ALIGN: center;"> <div id="testID" style="background:red;MARGIN-RIGHT: auto; MARGIN-LEFT: auto; width:173;height:184"> <img src="http://e.hiphotos.baid...
(十七)WebGIS中距离及面积测量的原理和实现以及坐标转换的简单介绍
weixin_34355715的博客
11-22 670
文章版权由作者李晓晖和博客园共有，若转载请于明显处标明出处：http://www.cnblogs.com/naaoveGIS/。 1.背景 在这一章里我们将讨论基础工具栏中另外两个常用工具：距离测量工具盒面积测量工具。 距离测量工具要求实现如下功能： a.通过鼠标点击，在地图上将每个点击点连成线段进行表示 b.每个线段处表示出此线段代表的实际距离 c.双击鼠标，停止此轮测量，表示出所有...
JavaScript实现图片点击轮播效果
本文提供的JavaScript图片轮播实现是一个基础但实用的解决方案，开发者可以根据自己的需求进行定制和扩展。通过理解并应用这些代码，可以创建一个功能完善的图片轮播组件，提升网站的用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值