JavaScript原生切换效果

最新推荐文章于 2022-11-16 22:43:14 发布

乒乒乓乒乓

最新推荐文章于 2022-11-16 22:43:14 发布

阅读量180

点赞数

分类专栏： web学习文章标签： javascript js css html

本文链接：https://blog.csdn.net/qq_44017357/article/details/110244023

版权

web学习专栏收录该内容

31 篇文章 0 订阅

订阅专栏

此代码实现了js原生的切换功能

html

<div id="mingdiantu">
			<div class="mingnei_tab_nei left">
					<h5>名典腕表</h5>
					<p>36毫米石英腕表</p>
					<div class="mingnei_tab_b abutton">
							<span>详细信息</span>
					</div>
			</div>
			</div>
				<div class="mingdiantu_nei_bottom">
					<div id="qiehuajian">
						<a id="prev" class="arrow">&lt;</a>
						<a id="next" class="arrow">&gt;</a>	
						<span id="mdn_span"></span>
					</div>
				</div>

css

a{text-decoration: none;}
			.left{float: left;}
			.right{float: right;}
			.abutton{border: 1px solid #e2e2e2;color: #555;transition: 0.5s;}
			.abutton:hover{background: #C40D2E;transition: 0.5s;color: white;}
			#mingdiantu{height: 400px;width: 500px;margin: 0 auto;}
			.mingnei_tab_nei{width: 230px;height: 92px;margin-top: 120px;}
			.mingnei_tab_nei h5{margin: 0;color: #555;}
			.mingnei_tab_nei p{margin: 0;color: #555;}
			.mingnei_tab_b{width: 100px;height: 30px;text-align: center;
			font-size: 13px;color: #555;padding-top: 10px;}
			#qiehuajian{width: 20%;height: 100%;float: right;}
			.arrow{width:40px;height:40px;text-align:center;color:#555;font-size: 30px;
			background-color:rgba(0,0,0,0.02);display: inline-block;cursor:pointer;}
			#qiehuajian span{color:#555;}

JavaScript

function md_tab()
			{
				var qhlist=['img/minglist_01.jpg','img/minglist_02.jpg','img/minglist_03.jpg']
				var mingnei_tab=document.getElementById("mingdiantu");
				var mdtab_img=document.createElement('img');
				mingnei_tab.appendChild(mdtab_img);
				var prev=document.getElementById("prev");
				var next=document.getElementById("next");
				var mdn_span=document.getElementById("mdn_span");
				var mdns_txt;
				var mdn_span_t;
				function mdns_xiugai(a)
				{
					mdn_span.innerHTML='';
					mdns_txt=(a+1)+'/3'
					mdn_span_t=document.createTextNode(mdns_txt)
					mdn_span.appendChild(mdn_span_t)
					}
				mdns_xiugai(0);
				var mdtab_i=0
				mdtab_img.src=qhlist[0];
				prev.style.pointerEvents='none';
				prev.style.color='#e2e2e2';
				next.onclick=function()
				{
					mdtab_i++;
					if(mdtab_i>1)
					{
						next.style.pointerEvents='none';
						next.style.color='#e2e2e2';
					}
					mdns_xiugai(mdtab_i);
					mdtab_img.src=qhlist[mdtab_i];
					prev.style.pointerEvents='all';
					prev.style.cursor='pointer';
					prev.style.color='#555';
					console.log(mdtab_i);
				}
				prev.onclick=function()
				{
					mdtab_i--;
					if(mdtab_i<1)
					{
						prev.style.pointerEvents='none';
						prev.style.color='#e2e2e2';
					}
					mdns_xiugai(mdtab_i);
					mdtab_img.src=qhlist[mdtab_i];
					next.style.pointerEvents='all';
					next.style.cursor='pointer';
					next.style.color='#555';
					console.log(mdtab_i);
				}
			}
			md_tab();