JS实现图片轮播2

最新推荐文章于 2024-06-17 15:29:34 发布
最新推荐文章于 2024-06-17 15:29:34 发布
阅读量290 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ink_s/article/details/103496827
版权

 

轮播1：https://github.com/inksnow/HtmlPictureWheel

https://blog.csdn.net/ink_s/article/details/103458515

 

 

* {
	margin: 0px;
	padding: 0px;
	-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

.rd_wheel_combination{
	width: 100%;
	height: auto;
	position: relative;	
	margin-top: 150px;
}

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

.rd_gallery{
	width: 100%;
	height: auto;
	position: relative;
}
.rd_gallery_img{
	width: 50%;
	height: auto;
	position: absolute;
	z-index: 0; 
	  
}
.rd_button_left_right{
		width: 50px;
	height: 50px;
		position: absolute;
	background: rgba(255,255,255,0.0);
	border: none;
outline: none;
		z-index: 4; 
}

.rd_button_left_right:active{
opacity:0.3;
}


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

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

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

<!-- 整个轮播控件，图片加小圆点加左右键加文字 -->
<div class = "rd_wheel_combination" id="rd_wheel_combination">  
    <!--     显示区域 -->
 	<div class = "rd_display_area" id="rd_display_area"> 
        <!--  	三张img水平画廊,宽度应该为三张图片的宽度 -->
 	     <div class = "rd_gallery" id= "rd_gallery"  >
 	      	<img class = "rd_gallery_img" style="left: 0px;" id= "rd_img0" src="../../images/bg1.jpg"/>
 	 		<img class = "rd_gallery_img" style="left: 0px;" id= "rd_img1" src="../../images/bg2.jpg"/>
 	 		<img class = "rd_gallery_img" style="left: 0px;"id= "rd_img2" src="../../images/bg3.jpg"/>
 	 			<img class = "rd_gallery_img" style="left: 0px;" id= "rd_img3" src="../../images/bg4.jpg"/>
 	 		<img class = "rd_gallery_img" style="left: 0px;"id= "rd_img4" src="../../images/bg5.jpg"/>
 	     </div>
 	</div>
 	<!--     显示区域end -->
 	
 	 	<button class="rd_button_left_right" onclick="leftClick()"  id="rd_button_left" style="left:20px"><img class = "rd_button_left_right_img" src="../../images/left_img.png"/></button>
 	    <button class="rd_button_left_right" onclick="rightClick()" id="rd_button_right" style="right:20px"><img class = "rd_button_left_right_img" src="../../images/right_img.png"/></button>
 	
</div>
<!-- 整个轮播控件end -->



</body>

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

</html>




 $(document).ready(function(){
	 rdInit()
	
 })


  var isRdAnimate = false;
  
 function rdInit(){
	 var imgArray = new Array("bg1.jpg","bg2.jpg","bg3.jpg","bg4.jpg","bg5.jpg");
	// alert("你好，我是一个警告框！init");
	 var imgNumber = 5;
		 //当前展示的图片
	 var imgIndex = 0;
	 var imgViewArray = new Array();	 
	 var combination= document.getElementById("rd_wheel_combination");
	 var gallery= document.getElementById("rd_gallery");
	 var o = document.getElementById("rd_display_area");
	 var img0 = document.getElementById("rd_img0");
	 var img1 = document.getElementById("rd_img1");
	 var img2 = document.getElementById("rd_img2");
	 var img3 = document.getElementById("rd_img3");
	 var img4 = document.getElementById("rd_img4");
	 imgViewArray[0] = img0;
	 imgViewArray[1] = img1;
	 imgViewArray[2] = img2;
	 imgViewArray[3] = img3;
	 imgViewArray[4] = img4;
	 //获取显示区域的高度，设置圆点，文字，及左右按键的位置
	 var viewHeight = img0.offsetHeight;
	 combination.style.height = viewHeight+"px";
	 
	 //设置左右按钮的位置
	 var buttonLeft = document.getElementById("rd_button_left");
	 var buttonRight = document.getElementById("rd_button_right");
	 
	
	 
	 buttonLeft.style.top = (viewHeight-parseFloat(buttonLeft.offsetHeight))/2+"px";
	 buttonRight.style.top = (viewHeight-parseFloat(buttonRight.offsetHeight))/2+"px";	

	 buttonLeft.onclick = function () { 
		 imgViewArray[1].style.zIndex="3";
		 imgViewArray[2].style.zIndex="2";
		 imgViewArray[3].style.zIndex="1";
		 animate(25);
	 }
	 buttonRight.onclick = function () { 
		 imgViewArray[1].style.zIndex="1";
		 imgViewArray[2].style.zIndex="2";
		 imgViewArray[3].style.zIndex="3";
		 animate(-25);
		 
	 }
	 
	
	 
	 var leftImgIndex = imgIndex-1;
	 if(leftImgIndex<0){
		 //当前显示的是第一张，则当前显示的左边显示最后一张
		 leftImgIndex = imgNumber-1;
	 }
	 var leftImgIndex2 = leftImgIndex-1;
	 if(leftImgIndex2<0){
		 //当前显示的是第一张，则当前显示的左边显示最后一张
		 leftImgIndex2 = imgNumber-1;
	 }
	 
	 var midImgIndex = imgIndex;
	 var rightImgIndex = imgIndex+1;
	 if(rightImgIndex>(imgNumber-1)){
		 //当前显示的是最后一张，则右边显示第一张
		 rightImgIndex = 0;
	 }
	 var rightImgIndex2 = rightImgIndex+1;
	 if(rightImgIndex2>(imgNumber-1)){
		 //当前显示的是最后一张，则右边显示第一张
		 rightImgIndex2 = 0;
	 }
	 
	 imgViewArray[0] .src="../../images/"+imgArray[leftImgIndex2];
	 imgViewArray[1] .src="../../images/"+imgArray[leftImgIndex];
	 imgViewArray[2] .src="../../images/"+imgArray[midImgIndex];
	 imgViewArray[3] .src="../../images/"+imgArray[rightImgIndex];
	 imgViewArray[4] .src="../../images/"+imgArray[rightImgIndex2];
	 
	 var oneWidth =  o.clientWidth||o.offsetWidth;
	 imgViewArray[0].style.left="-25%";
	 imgViewArray[1].style.left="0%";
	 imgViewArray[2].style.left="25%";
	 imgViewArray[3].style.left="50%";
	 imgViewArray[4].style.left="75%";
	 
	 
	 imgViewArray[0].style.zIndex="1";
	 imgViewArray[1].style.zIndex="2";
	 imgViewArray[2].style.zIndex="3";
	 imgViewArray[3].style.zIndex="2";
	 imgViewArray[4].style.zIndex="1";

	 
	 imgViewArray[0].style.transform = "scale(1)";
	 imgViewArray[1].style.transform = "scale(1 )";
	 imgViewArray[2].style.transform = "scale(1.4)";
	 imgViewArray[3].style.transform = "scale(1)";
	 imgViewArray[4].style.transform = "scale(1)";
	 
	 imgViewArray[0].style.MozTransform = "scale(1)";
	 imgViewArray[1].style.MozTransform = "scale(1 )";
	 imgViewArray[2].style.MozTransform = "scale(1.4)";
	 imgViewArray[3].style.MozTransform = "scale(1)";
	 imgViewArray[4].style.MozTransform = "scale(1)";
	 
	 imgViewArray[0].style.WebkitTransform = "scale(1)";
	 imgViewArray[1].style.WebkitTransform = "scale(1 )";
	 imgViewArray[2].style.WebkitTransform = "scale(1.4)";
	 imgViewArray[3].style.WebkitTransform = "scale(1)";
	 imgViewArray[4].style.WebkitTransform = "scale(1)";
//	 
	 imgViewArray[0].style.opacity = "0.6";
	 imgViewArray[1].style.opacity = "0.8";
	 imgViewArray[2].style.opacity = "1";
	 imgViewArray[3].style.opacity = "0.8";
	 imgViewArray[4].style.opacity = "0.6";
	 
	
	 //每次移动间隔
	 var interval=10;
	 //总时间
	 var times = 400;
	 //每次缩放值
	 var scaleFactor = 0.4/(400/10);
	 //每次透明度值
	 var opacityFactor = 0.2/(400/10);
	 
	 //移动动画    width左移或右移量-50 或50
	 function animate(width){
//		 alert("animate"+width);
		 if(!isRdAnimate){
			 isRdAnimate = true;
			 //每次移动距离
			 var speed=width/(times/interval);
			 //剩余需要移动的量
			 var offset = width;
			 
			 var offTimes = 1;
			 
			 go();
			 function go(){
				 if(offset!=0){
					 if(Math.abs(offset -speed)<Math.abs(speed)){
						 //最后一次移动
						 speed = offset;
					 }else{
						 speed=width/(times/interval); 
					 }
					 offTimes++;
					 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+"%";//每次位移的值
					 imgViewArray[3].style.left=parseFloat(imgViewArray[3].style.left)+speed+"%";//每次位移的值
					 imgViewArray[4].style.left=parseFloat(imgViewArray[4].style.left)+speed+"%";//每次位移的值
					 
					 if(width>0){
						 //右移
						 imgViewArray[1].style.transform = "scale("+(1.0+scaleFactor*offTimes)+")";
						 imgViewArray[2].style.transform = "scale("+(1.4-scaleFactor*offTimes)+")";
						 imgViewArray[1].style.MozTransform = "scale("+(1.0+scaleFactor*offTimes)+")";
						 imgViewArray[2].style.MozTransform = "scale("+(1.4-scaleFactor*offTimes)+")";
						 imgViewArray[1].style.WebkitTransform = "scale("+(1.0+scaleFactor*offTimes)+")";
						 imgViewArray[2].style.WebkitTransform = "scale("+(1.4-scaleFactor*offTimes)+")";
						 imgViewArray[1].style.opacity = ""+(0.8+opacityFactor*offTimes)+"";
						 imgViewArray[2].style.opacity = ""+( 1+opacityFactor*offTimes)+"";
						 
					 }else{
						//左移
						 imgViewArray[2].style.transform = "scale("+(1.4-scaleFactor*offTimes)+")";
						 imgViewArray[3].style.transform = "scale("+(1.0+scaleFactor*offTimes)+")";
						 imgViewArray[2].style.MozTransform = "scale("+(1.4-scaleFactor*offTimes)+")";
						 imgViewArray[3].style.MozTransform = "scale("+(1.0+scaleFactor*offTimes)+")";
						 imgViewArray[2].style.WebkitTransform = "scale("+(1.4-scaleFactor*offTimes)+")";
						 imgViewArray[3].style.WebkitTransform = "scale("+(1.0+scaleFactor*offTimes)+")";
						 imgViewArray[2].style.opacity =  ""+(1+opacityFactor*offTimes)+"";
						 imgViewArray[3].style.opacity = ""+(0.8+opacityFactor*offTimes)+"";
						 
					 }
					 
					
					 offset = offset -speed; 
					 setTimeout(go,interval);
				 }else{					 
					 //动画结束
				
					 if(width>0){
						 //右移
						 imgIndex--;
						 if(imgIndex<0){
							 imgIndex = imgNumber-1;
						 }
						 
						 var f = imgViewArray[4];
						 imgViewArray[4] = imgViewArray[3];
						 imgViewArray[3] = imgViewArray[2];
						 imgViewArray[2] = imgViewArray[1];
						 imgViewArray[1] = imgViewArray[0];
						 imgViewArray[0] = f;
	
					 }else{
						 //左移
						 imgIndex++;
						 if(imgIndex==imgNumber){
							 imgIndex = 0;
						 }
						 var f = imgViewArray[0];
						 imgViewArray[0] = imgViewArray[1];
						 imgViewArray[1] = imgViewArray[2];
						 imgViewArray[2] = imgViewArray[3];
						 imgViewArray[3] = imgViewArray[4];
						 imgViewArray[4] = f;
				
						
					 }
					 imgViewArray[0].style.left="-25%";
					 imgViewArray[1].style.left="0%";
					 imgViewArray[2].style.left="25%";
					 imgViewArray[3].style.left="50%";
					 imgViewArray[4].style.left="75%";					 
					 
					 imgViewArray[0].style.zIndex="1";
					 imgViewArray[1].style.zIndex="2";
					 imgViewArray[2].style.zIndex="3";
					 imgViewArray[3].style.zIndex="2";
					 imgViewArray[4].style.zIndex="1";

					 
					 imgViewArray[0].style.transform = "scale(1)";
					 imgViewArray[1].style.transform = "scale(1 )";
					 imgViewArray[2].style.transform = "scale(1.4)";
					 imgViewArray[3].style.transform = "scale(1)";
					 imgViewArray[4].style.transform = "scale(1)";
					 
					 imgViewArray[0].style.MozTransform = "scale(1)";
					 imgViewArray[1].style.MozTransform = "scale(1 )";
					 imgViewArray[2].style.MozTransform = "scale(1.4)";
					 imgViewArray[3].style.MozTransform = "scale(1)";
					 imgViewArray[4].style.MozTransform = "scale(1)";
					 
					 imgViewArray[0].style.WebkitTransform = "scale(1)";
					 imgViewArray[1].style.WebkitTransform = "scale(1 )";
					 imgViewArray[2].style.WebkitTransform = "scale(1.4)";
					 imgViewArray[3].style.WebkitTransform = "scale(1)";
					 imgViewArray[4].style.WebkitTransform = "scale(1)";
					 
					 imgViewArray[0].style.opacity = "0.6";
					 imgViewArray[1].style.opacity = "0.8";
					 imgViewArray[2].style.opacity = "1";
					 imgViewArray[3].style.opacity = "0.8";
					 imgViewArray[4].style.opacity = "0.6";
					 
					  leftImgIndex = imgIndex-1;
					 if(leftImgIndex<0){
						 //当前显示的是第一张，则当前显示的左边显示最后一张
						 leftImgIndex = imgNumber-1;
					 }
					  leftImgIndex2 = leftImgIndex-1;
					 if(leftImgIndex2<0){
						 //当前显示的是第一张，则当前显示的左边显示最后一张
						 leftImgIndex2 = imgNumber-1;
					 }
					 
					  midImgIndex = imgIndex;
					  rightImgIndex = imgIndex+1;
					 if(rightImgIndex>(imgNumber-1)){
						 //当前显示的是最后一张，则右边显示第一张
						 rightImgIndex = 0;
					 }
					  rightImgIndex2 = rightImgIndex+1;
					 if(rightImgIndex2>(imgNumber-1)){
						 //当前显示的是最后一张，则右边显示第一张
						 rightImgIndex2 = 0;
					 }
					 imgViewArray[0] .src="../../images/"+imgArray[leftImgIndex2];
					 imgViewArray[1] .src="../../images/"+imgArray[leftImgIndex];
					 //imgViewArray[2] .src="../../images/"+imgArray[midImgIndex];
					 imgViewArray[3] .src="../../images/"+imgArray[rightImgIndex];
					 imgViewArray[4] .src="../../images/"+imgArray[rightImgIndex2];
					 
					 
					 isRdAnimate = false;
			
				  }
			 }
		 }
		 
	 }


	 $(window).resize(function(){ 
		  var wHeight = $(window).height();
		  var wWidth = $(window).width();
		  //获取显示区域的高度，设置圆点，文字，及左右按键的位置
		var viewHeight = img0.offsetHeight;
		 buttonLeft.style.top = (viewHeight-parseFloat(buttonLeft.offsetHeight))/2+"px";
		 buttonRight.style.top = (viewHeight-parseFloat(buttonRight.offsetHeight))/2+"px";
		 combination.style.height = viewHeight+"px";
		})

 }

 

 

ink_s
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现轮播图
Andrew_SJ的博客
06-24 1万+
本文参考 浅墨若寒-js实现轮播图效果 大体思路： 先创建一个div，限定其宽度和高度，overflow：hidden，且设置其position为relative。然后创建一个装图片的div，宽度为所有图片的总宽度，且设置其position为absolute，并且使其中的内容浮动，这样所有的图片就处于一行中。然后为了实现无缝滚动，所以需要在首尾分别添加一张过渡图片。 先添加两个按钮， 使其可以手动轮播，然后只需要添加一个定时器使其朝一个方向自动轮播即可，因为用户有时需要查看详情，所以当鼠标进入时就clea
js轮播图实现
qq_53843555的博客
05-29 5303
使用js实现轮播图
原生js实现轮播图的两种方式
最新发布
h395910638的博客
06-17 426
element-ui组件库中，有一个Carousel走马灯组件，也就是我们平时说的轮播图，为了搞清它的实现原理，接下来我们使用原生js实现一个轮播图效果
使用JS来实现轮播图的效果
weixin_64965154的博客
05-25 7540
第一步我们先获取三个元素，toggle()是一个方法调用，我是把左边和右边的写在一个方法，显示更加美观，，然后呢我们执行右侧按钮业务，还是先获取右侧按钮，然后定义一个信息量i=0。3，最后讲一个功能，这里我们依旧是在定时器上面声明一个变量，因为我们定时器也是有一直在懂，所以我们来这块设定一个点击事件。但是当我们轮播图到了最后一个，需要往返第一个，这时候我们需要判断，如果到了素组下标为8的时候，我们就得返回第一个。第一个是鼠标经过停止事件，第二个是开始事件，这样呢我们一个完整的轮播图就做出来了。
javascript轮播图超详细
周百万的博客
07-06 1万+
鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止 鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始 动态创建下面的小圆点 无缝滚动效果 点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片 使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况...
JS轮播图详解
weixin_75154342的博客
09-17 3730
JS轮播图的实现核心是使用JavaScript来控制图片的切换和显示，配合HTML和CSS完成布局和样式设置。通过定时器实现图片的自动切换，并通过事件监听器实现对鼠标事件的响应。CSS样式：通过CSS样式对容器和列表进行布局和样式设置，例如设置容器的宽度、高度、背景色等，并设置列表项的宽度和高度，以及布局方式，使图片水平排列在一行。调整功能和样式：根据需求，可以进一步调整轮播图的功能和样式，例如添加左右切换按钮、指示器、淡入淡出效果等。HTML结构：首先，在HTML中创建一个包含轮播图的容器，通常使用。
原生JS实现图片轮播切换效果
10-20
主要为大家详细介绍了原生JS实现图片轮播切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript实现图片轮播组件代码示例
10-21
本篇文章主要介绍了JavaScript实现图片轮播组件代码示例，对图片轮播效果感兴趣的小伙伴们可以参考一下。
原生js实现点击轮播切换图片
11-21
【原生JS实现点击轮播切换图片】是一个常见的前端网页交互功能，主要目的是通过JavaScript代码实现在用户点击按钮时，图片能够按照指定顺序进行切换，形成一个动态的展示效果。以下将详细介绍实现这一功能的关键技术...
原生js实现图片层叠轮播切换效果
10-22
【原生JS实现图片层叠轮播切换效果详解】 在网页设计中，动态的图片展示效果常常能够吸引用户的注意力，其中图片层叠轮播切换是一种常见的交互方式。本篇文章将深入探讨如何使用原生JavaScript来实现这一效果，帮助...
JavaScript实现简单图片轮播效果
10-19
主要介绍了JavaScript实现简单图片轮播效果，点击下标切换到该图片上，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生JS实现轮播图(3种方法)
HaiJun_Aion的博客
01-26 4万+
最近在巩固JS基础知识，顺手敲了个轮播图，它有3种换图方法。 自动换图 (设置定时器每隔2s换一张图) 点击左右箭头换图 点击小圆点换图 代码如下 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport&
用js实现轮播图
谦谦的博客
10-19 120
<head> <title>轮播</title> <style> body{ background-color: rgba(119, 115, 110); } ul{ width: 800px; height: 200px; list-style: none; padding:
简单暴力的bilibili轮播图效果(js)
yasinawolaopo的博客
10-25 384
let imageLunBo = document.querySelectorAll(".image_li"); let i = 0; setInterval(function (){ i++; if(i % 3 == 2){ setTimeout(function (){ imageLunBo[0].style.transition = ".5s"; imageLunBo[0].style.transform = "trans
JS实现图片轮播效果（自动和手动）
热门推荐
呵呵到天亮的博客
05-30 21万+
本次轮播效果图如下：具有以下功能：1.自动播放（鼠标进入显示区域时停止播放） 2.左右焦点切换 3.底下小按钮切换以下为实现代码：首先是html代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;最简单的轮播效果&amp
JavaScript 实现图片轮播
丑小鸭
08-11 8万+
今天给大家介绍下怎么用 JS 实现图片轮播效果。 原理描述： 使用JS实现轮播的原理是这样的：  假设初始的情况，下图一个网格代表一个图，初始时，显示1 ： 当进行一次轮播后，显示变为下图 显示2： 依次类推。   代码实现： 1 JS 代码： &lt;script type="text/javascript"&gt;     window.onload=function...
JavaScript实现两组图片的轮播效果
weixin_44772522的博客
03-14 2167
JavaScript实现两组图片的轮播效果 前端新人 第一次写博客 多多指教 图片轮播功能： 点击图片上的左右箭头切换图片。 点击上一组或下一组的按钮同时控制图片的切换； 图片的循环切换； HTML代码 &lt;button&gt;上一组&lt;/button&gt; &lt;button&gt;下一组&lt;/button&gt; &lt;br&gt;&lt;...
jquery.vm-carousel.js实现展示多个图片的轮播效果
圆野的博客
09-12 2829
<script type="text/javascript" src="js/jquery.vm-carousel.js"></script> //html代码(假设共10个li但只显示5个！) <ul class="vmcarousel-normal" > <li> &l...
javascript实现图片轮播
06-07
可以通过以下代码实现Javascript图片轮播： HTML: ```html <img class="sliderImg" src="img2.jpg"> ``` CSS: ```css #slider { width: 500px; height: 300px; overflow: hidden; position: relative...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值