js实现图片轮播(根据同事代码整理而得)

最新推荐文章于 2021-05-01 14:32:25 发布
最新推荐文章于 2021-05-01 14:32:25 发布
阅读量2.2w 收藏 2
点赞数
分类专栏： js

本文主要copy了同事的代码，不过给代码加载了大量注释从而使得代码清晰。我想这也算是翻译吧大笑。

先上图，看看本实例的具体轮播功能。

如图：

需要实现的功能点如下：

第一：上边一栏的翻屏功能，点击左按钮向左翻屏，点击右按钮向右翻屏。

第二：下边一栏的照片的左右切换，点击左按钮，显示的图片切换到左边的图片，点击右按钮，显示的图片切换到右边的图片。

第三：上下栏的联动功能，上边一栏点击某一个图片，下边一栏显示的图片就切换到该图片。

 

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link href="http://testing.s3.tradecv.com/styles/common/global.css?version=201208311640" type="text/css" rel="stylesheet" />
	<link href="http://testing.s3.tradecv.com/styles/default/default.css?version=201208311640" type="text/css" rel="stylesheet" />            
    <script type="text/javascript" src="http://testing.s3.tradecv.com/scripts/common/jquery.js?version=201208311640"></script>
</head>
<body>
	<article class="w">	        	        	    
   		<div class="mode-wrap clearfix">
			<section class="mode-main">		
				<div class="blue-box-mode mt10px">
			 		<div class="bd">
			 			<div class="thumb-s">
							<div class="btn-left-area">
								<a href="#" class="btn-s-left-disabled"></a>
							</div>
							<div class="btn-right-area">
								<a href="#" class="btn-s-right"></a>
							</div>
							<div class="thumb-s-wrap" id="te">
								<ul class="clearfix">
									<li><img style="cursor:pointer" currentNum="1" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a18a7f29ds.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="2" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a193cefa9s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="3" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a19d5eed7s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="4" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a1a8dd227s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="5" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a1b199f21s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="6" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a23270103s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="7" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a239ed504s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="8" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a241158d0s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="9" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a2480cfc4s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="10" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a24e29209s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="11" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a25e3d242s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="12" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a267f2c31s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="13" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a2e476b0ds.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="14" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a2f620656s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="15" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a406ca15bs.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="16" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a40d601d1s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="17" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a414a83efs.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="18" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a4214a5e6s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="19" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a67ee71bes.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="20" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a6860390es.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="21" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a68bc7dcas.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="22" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a6913e4ebs.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="23" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a6983123fs.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="24" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a69e3c053s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="25" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a6a672692s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="26" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a6add8824s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="27" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a6b43a315s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="28" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a6b43a315s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="29" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a6c21af52s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="30" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a6c8bc2b0s.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="31" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a6d02902bs.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="32" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a6d5c68dcs.jpg" /></li>
	    							<li><img style="cursor:pointer" currentNum="33" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a7b64f6d2s.jpg" /></li>
					    		</ul>
							</div>
						</div>
				
						<div class="thumb-l">
							<div class="btn-left-area">
								<a href="#" class="btn-s-left-disabled"></a>
							</div>
							<div class="btn-right-area">
								<a href="#" class="btn-s-right"></a>
							</div>
							<div class="thumb-l-wrap">
								<p class="ta-c"><strong>第 <span class="red">1</span> 张 共 <span class="red">33</span> 张</strong></p>
								<figure>
									<img id="big_image" src="http://testing.hr.tradecv.com/environment/1484/43/4fd9a18a7f29db.jpg"/>
									<figcaption>001</figcaption>
								</figure>
							</div>
						</div>
             		</div>
				</div>
			</section>
		</div>
	</article>
</body>
</html>
<script type="text/javascript">
/*
 * 定义一个图片轮播类，scrollImage类，类中包含一些参数及其方法。
 * 参数如下：
 * num -> 图片的数量
 */
var scrollImage = {
	 /*
	  *参数
	  */
	 //上边一栏所需参数
	 //图片的数量
	 num : parseInt('33'),	
	    	 
	 //图片src地址数组，对应图片num
	 url : ["http://testing.hr.tradecv.com/environment/1484/43/4fd9a18a7f29db.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a193cefa9b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a19d5eed7b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a1a8dd227b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a1b199f21b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a23270103b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a239ed504b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a241158d0b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a2480cfc4b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a24e29209b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a25e3d242b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a267f2c31b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a2e476b0db.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a2f620656b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a406ca15bb.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a40d601d1b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a414a83efb.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a4214a5e6b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a67ee71beb.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a6860390eb.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a68bc7dcab.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a6913e4ebb.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a6983123fb.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a69e3c053b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a6a672692b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a6add8824b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a6b43a315b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a6b43a315b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a6c21af52b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a6c8bc2b0b.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a6d02902bb.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a6d5c68dcb.jpg",
	        "http://testing.hr.tradecv.com/environment/1484/43/4fd9a7b64f6d2b.jpg"],
	 
	 //图片描述desc
     desc : ["001","002","003","004","005","006","007","008","009","010","011","012",
             "013","014","015","016","017","018","019","020","021","022","023","024",
             "025","026","027","028","029","030","031","032","033"],
	 
     //单张图片宽度
   	 singleWidth : function(){
   		 return $('#te ul li').width()+14;	//$('#te ul li').width()图片宽度  14是俩图片的间距
   	 },        
     
 	 //实际照片的总宽度,这里是33张照片的总宽度
	 totalWidth : function(){
		 return this.num * this.singleWidth();
	 },
	 
	 //上边一栏可现实区域的宽度（其实也就是一屏的宽度） boxWidth等同于pageWidth
	 boxWidth : function(){
	     return $('.thumb-s-wrap').width()+10;
	 },
	 
 	 //上边一栏一屏的宽度:屏宽度 	boxWidth等同于pageWidth
 	 pageWidth : function(){
 		 return this.singleWidth() * 6;
 	 },
 	 
 	 //下边一栏所需参数
 	 //当前图片
 	 //因为当前图片的num是会随着按钮点击而变化，点击向左的num-1，点击向右的num+1，n代表num
 	 currentNum : function(n){
 		 if(n>0){
 			 return $('.ta-c').find('.red').eq(0).text(n);
 		 }else{
 			return parseInt($('.ta-c').find('.red').eq(0).text());
 		 }		 
 	 },
	 
	 /*
	  *方法
	  */
	  
	 //上边一栏左右按钮的样式
	 moveClass : function(left, right){
		 var leftClass = left ? 'btn-s-left' : 'btn-s-left-disabled';
		 var rightClass = right ? 'btn-s-right' : 'btn-s-right-disabled';
		 $('.thumb-s .btn-left-area a').removeClass().addClass(leftClass);
		 $('.thumb-s .btn-right-area a').removeClass().addClass(rightClass);		 
	 },
	 
	 //上边一栏向左翻屏
	 thumbLeft : function(){
		 px = -1 * this.singleWidth() * 6 ;	 //偏移量,一屏的偏移量就是单张图片的宽度*图片数量,this.singleWidth() * 6;
		 this.move(px);
	 },
	 
	 //上边一栏向右翻屏
	 thumbRight : function(){
		 px = this.singleWidth() * 6; 	//解释通向左翻屏
		 return this.move(px);
	 },
	 
	 //thumbLeft与thumbRight方法可以合并
	 thumb	: function(direction){
		 if(direction == 'left'){
			 px = -1 * this.singleWidth() * 6 ;	 //偏移量,一屏的偏移量就是单张图片的宽度*图片数量,this.singleWidth() * 6;
			 this.move(px);
		 }else if(direction == 'right'){
			 px = this.singleWidth() * 6; 	//解释通向左翻屏
			 return this.move(px);
		 }		 
	 },
	 
	 //上边一栏滚动
	 move : function(px){
		 var willMove = document.getElementById('te').scrollLeft + px;	//willMove是要滚动到的x坐标， $('#te').scrollLeft当前的x坐标，px在当前坐标下在移动多少
		 //有两种极端情况，第一种是：最前一屏时向左移动。第二种是：最后一屏时向右移动。
		 if(willMove <= 0){
			 //重新设置对象的scrollLeft属性
			 document.getElementById('te').scrollLeft = 0; 
			 //上边一栏左按钮样式变灰
			 this.moveClass(0, 1);
		 }else if(willMove > (this.totalWidth() - this.singleWidth() * 6)){	//this.totalWidth() - this.singelWidth() * 6   最后一屏的位置
			 //重新设置对象的scrollLeft属性
			 document.getElementById('te').scrollLeft = this.totalWidth() - this.singleWidth() * 6;
		     //上边一栏右按钮样式变灰
		     this.moveClass(1, 0);
		 }else{
			 //重新设置对象的scrollLeft属性
			 document.getElementById('te').scrollLeft = willMove;
			 //上边一栏左右按钮都不变灰
			 this.moveClass(1, 1);
		 }
	 },
	 
	 
	 
	 //下边一栏左右按钮的样式,同上moveClass()类似
	 changeClass : function(pre, next){
		 var preClass = pre ? 'btn-s-left' : 'btn-s-left-disabled';
		 var nextClass = next ? 'btn-s-right' : 'btn-s-right-disabled';
		 $('.thumb-l .btn-left-area a').removeClass().addClass(preClass);
		 $('.thumb-l .btn-right-area a').removeClass().addClass(nextClass);
	 },
	 
	 //下边一栏左右按钮点击,这里左右按钮给和在一起了。通过direction来判断
	 //有两种极端情况，第一种是：第一张图片。第二种是：最后一张图片。
	 change : function(direction) {
		 if(direction == 'pre' && this.currentNum() > 1){
			 //获得当前之前的图片num
			 var willNum = this.currentNum() - 1;
			 //改变页面图片num数字及其src地址
			 this.changeNum(willNum);
		 }else if(direction == 'next' && this.currentNum() < this.num){
			 //获得当前之后的图片num
			 var willNum = this.currentNum() + 1;
			 //改变页面图片num数字及其src地址
			 this.changeNum(willNum);
		 }
	 },
	 
	 //改变图片src及其num数字
	 changeNum : function (willNum){
		 //改变图片数字
		 this.currentNum(willNum);
		 //改变图片src地址
		 $('#big_image').attr('src', this.url[willNum-1]);
		 //改变图片desc描述
		 $('#big_image').next().text(this.desc[willNum-1]);
		 
		 //判断左右按钮是否变灰
		 //两种极端状态,第一张和最后一张
		 //判断总的图片数量
		 if(willNum == 1){
			 if(this.num > 1){return this.changeClass(0, 1)}
		 }else if(willNum == this.num){
			 if(this.num > 1){return this.changeClass(1, 0)}
		 }else{
			 if(this.num > 1){return this.changeClass(1, 1)}
		 }
	 }
	 
	 
}
 
$(document).ready(function(){
	//判断图片数量是否大于0,只有大于0才能实现轮播的一些功能。
	if(scrollImage.num > 0){
		//默认上边一栏的图片列表的位置为0,也就是上边一栏的图片列表的scrollLeft为0,主要为以后翻屏,
		//翻屏是在当前图片列表的位置基础上加上偏移量来实现的
		//scrollLeft属性: scrollLeft是设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 html的一个属性 
		
		//注意！！！这里只能使用document.getElementById('te'),它获取的是 object HTMLDivElement
		//而 $('#te').scrollLeft获取的是 object Object。 scrollLeft是html的一个属性
		document.getElementById('te').scrollLeft = 0; 		
		
		//判断图片数量是否小于等于6,true时,上边一栏的左右按钮变灰不可用。
		if(scrollImage.num <= 6){
			scrollImage.moveClass(0, 0);		//这样左右按钮都变灰
		}
		//判断图片数量是否小于等于1,true时,下边一栏的左右按钮变灰不可用。
		if(scrollImage.num <= 1){
			scrollImage.changeClass(0, 0);	//这样左右按钮都变灰
		}
		//特殊条件的考虑完了，接着就是普通条件的
		
		//点击上边一栏的左按钮
		$('.thumb-s .btn-left-area a').click(function(){
			scrollImage.thumbLeft();	//向左翻屏
			//scrollImage.thumb('left');
			return false;
		});
		
		//点击上边一栏的右按钮
		$('.thumb-s .btn-right-area a').click(function(){
			scrollImage.thumbRight();
			//scrollImage.thumb('right');
			return false;
		}); 
		
		//下边一栏图片的改变：其实也就是图片的src地址改变而已，点击按钮改变src地址
		//假如点击按钮我们能获取这应该是第几张图片，这样我们就能把图片的src地址写入到一个数组
		//数组的键是当前图片的num，值是src，这样就能点击按钮，加载相应的图片了。
		//点击下边一栏的左按钮,点击时当前图片-1,就是前面的图片
		$('.thumb-l .btn-left-area a').click(function(){
			scrollImage.change('pre');	
		});
		
		//点击下边一栏的右按钮,点击时当前图片+1,就是后面的图片
		$('.thumb-l .btn-right-area a').click(function(){
			scrollImage.change('next');	
		});
		
		//点击上边一栏的图片  img[currentNum]表示上边一栏的img元素
		$('img[currentNum]').click(function(){
			//获得当前图片的num
			var willNum = parseInt($(this).attr('currentNum'));
			scrollImage.changeNum(willNum);
			
		})
	}
})
</script>

motian06
关注
专栏目录
【Web前端面试】葵花宝典(2022版本)——JS篇（下）
qq_49002903的博客
06-13 2790
你还在担心面试不过嘛？面试题找不到，小编特意整理了30+道高频前端面试题，送给大家，希望大家都能顺利通过面试，拿下高薪，也可持续关注本面试题专栏。本篇文章主要写的是面试题中的JS篇（下），之后会更新前端其他方面相关面试题。..................
切图仔面试宝典
Wscats
08-31 1355
Omi体验地址： http://wscats.github.io/CV/omi/build/index.html Vue体验地址： http://wscats.github.io/CV/vue/dist/index.html 项目地址： https://github.com/Wscats/CV 简历的本质 在写简历之前，我们必须清楚的了解一件事情，那就是简历是什么？ 它不是...
js实现图片轮播
11-30
js文件实现图片轮播
js实现图片轮播效果
m0_55980880的博客
05-01 545
js实现图片轮播效果 一、准备图片和轮播按钮（单击轮播按钮可切换到指定图片） html li标签用来设计轮播按钮，给图片和列表分别加上id和类名 （这里假设有三张图片） <div> <img id="focusImg" src="pic1.jpg"> <ul class="focusBox"> <li></li> <li></li>
JS实现图片轮播
小白的博客
09-13 228
&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 type="text/css"&gt; *{padding:
如何写一份好的前端面试简历?
Wscats
05-31 1万+
HBuilder 打包流程1.运行HBuilder百度搜索HBuilder，官网下载安装包，解压，运行HBuilder.exe。注册账号，并登陆 2.新建App在左边右键，选择新建APP，或者点击中间的新建app 3.填入信息在弹出的窗口，填应用名称，根据需求选择项目位置，以及模板内容，注意名字不要带有@等特殊字符，最后点击完成 4.真机调试创建好之后，选择刚刚创建好的项目，在顶部选择运行，根
互联网职业介绍
IT修真院：初学者转行到互联网的聚集地
10-17 1746
互联网行业的薪资水准相对较高，刚入行一个月，半年，或者一年超过其他行业薪资很正常。 那么，互联网行业究竟有哪些职位呢，又分别适合哪些传统行业转型呢？ 产品经理 UI CSS JS 后端（Java/php/python） DBA(mysql/oracle) 运维（OP） 测试（QA 算法（分类/聚类/关系抽取/实体识别） 搜索（Lucene/Solr/elasticSearch...
IT行业都有哪些职位，初学者如何选择才能够快速进入这个行业？
热门推荐
IT修真院：初学者转行到互联网的聚集地
05-14 2万+
【本人性格不好，被惹到了必然句句带脏字，所以评论中如果有不开眼的，请慎重。 另外，这篇回答从头到尾都是我自己的个人偏见，绝对不客观，也绝对不会为本答案负责。 所以，有自己正常思维的请不要再看下去了。】 互联网行业的薪资水准相对较高，刚入行一个月，半年，或者一年超过其他行业薪资很正常。 那么，互联网行业究竟有哪些职位呢，又分别适合哪些传统行业转型？ 1.产品 2.UI 3.CSS...
JS实现图片轮播效果(绝对可用）
03-30
绝对可用，利用javasScript实现图片轮播，具有1.自动播放（鼠标进入显示区域时停止播放） 2.左右焦点切换 3.底下小按钮切换 等功能
使用JS和html5实现图片轮播
06-13
点击顺序轮播按钮或倒序轮播按钮可实现每秒顺序轮播一张图片或每秒倒序轮播一张图片，点击停止轮播按钮可停止当前轮播形式。不可连续按两次顺序轮播按钮或倒序轮播按钮，但可以按完顺序轮播按钮，再按倒序轮播按钮，反过来亦可。
纯js代码实现轮播图
03-13
纯js代码实现轮播图
JS简单实现仿网页图片轮播
10-30
本资源是利用JS简单的仿照网站上常见的广告轮播实现图片的自动切换，来回切换，下标切换等。
原生js实现无限循环轮播图效果
10-20
本文主要介绍了原生js实现无限循环轮播图效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
用js简单实现图片轮播
maxiaoxin1314的博客
03-08 239
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; }...
js实现轮播图
hell_orld的博客
03-27 580
js实现轮播图实现效果大体思路实现代码参考视频链接 实现效果 左右箭头可以进行换图，圆点显示当前图片，也可以进行切换，当鼠标移到图片上时，图片停止轮播，移触图片外时，继续轮播。这个轮播图是通过图片的切换进行轮播，不是滑动轮播！ 大体思路 1、其中根据图片索引index来存放当前展示的照片，展示的照片属性为：将圆点dot的id名设为active和图片img的display设为block，其它没有展示的图片对应的圆点id为“”空，图片img的display:none； 2、左/右箭头切换图片，通过添加监听事件
利用javaScript实现图片轮播器
心有猛虎,细嗅蔷薇
11-05 1260
最近刚学js，就做了一个可以点击切换图片，和自动播放图片的小例子，献给需要的初学者 Document 图片轮播器小实例 1 2 @charset "utf-8"; #Pic{ width: 200px; height: 200px; } .page{ width: 200px; height: 20px; } .page
Vue自定义js实现图片碎片轮播效果及代码详解
在本文档中，我们探讨了如何在Vue应用中实现一个自定义的JavaScript图片碎片轮播图切换效果。首先，开发者定义了一个名为`FragmentBanner`的类，用于构建轮播组件。这个类接受一个`option`对象作为参数，其中包含了...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值