原生 JavaScript 实现图片切换

原生 JavaScript 实现图片切换

JavaScript实现图片切换的介绍

使用原生JavaScript实现点击按钮图片切换
html css JavaScript
原理:使用原生JavaScript,获取点击事件,改变显示图片位置的路径

效果

原生 JavaScript 实现图片切换_第1张图片

html代码

<body>

	<div id="box">
	    
		<div id="left">div>
		 
		<ul id="ul">
		    <li>
			    <img id="oImg" src="img/1.jpg" style="width:420px; height:500px;" />
			li>
		ul>
		
		<div id="right">div>
		
	div>

body>

css代码


JavaScript代码

<script>
  
    var oBox=document.getElementById('box');

	var oLeft=document.getElementById('left');
    var oRight=document.getElementById('right');
	var oImg=document.getElementById('oImg');
	   
	var Smax=5,Smin=1,Sm=Smin;
	
	oBox.onmouseover=function(){
	    
		 oLeft.style.display='block';
		 oRight.style.display='block';
		 
	};
	
	oBox.onmouseout=function(){
	    
		 oLeft.style.display='none';
		 oRight.style.display='none';
		 
	};
	
	oLeft.onclick=function(){
	
		 if(Sm===Smin)
		 {
			 Sm=Smax;
		 }
		 else
		 {
			  Sm--;
		 }
	    
		 oImg.src='img/'+Sm+'.jpg';
		 //console.log(oImg.src);
		 
    };
	   
	oRight.onclick=function(){
	
		 if(Sm===Smax)
		 {
			 Sm=Smin;
		 }
		 else
		 {
			  Sm++;
		 }
	    
		 oImg.src='img/'+Sm+'.jpg';
		 console.log(oImg.src);
		 
    };
	


</script>

效果

原生 JavaScript 实现图片切换_第2张图片

原生 JavaScript 实现图片切换_第3张图片

总结

通过 JavaScript 点击事件,获取点击按钮,是左或是右,通过添加按钮的方向,判断图片切换的方向,点击一下,图片的路径随之切换一下。

你可能感兴趣的:(html,JavaScript,jQuery)