js简易轮播图，二十行代码搞定

蔚落 2023-06-19 15:27 11阅读 0赞

今天给大家写一款简易轮播图，这个轮播图的实现方式很简单，通过切换图片的src  
就可以实现，话不多说开始干代码。  
首先我们在html中插入一张图片给它取一个id名称，在这里我就叫它focusImg：

图片插入好之后可以自己设置想要的css样式，这里就不为大家演示了，接下来是js的代码：

//首先获取图片的id名称
    var focusImg = document.getElementById('focusImg');
    //设置一个可以切换图片src的标识
    var sign = 0;

创建一个showPic（index）函数，在这里面传入一个参数：

function showPic(index){ 
    	
    	//在这里要给你的图片的src设置成类似pic1.jpg pic2.jpg这种形式 
    	var imgSrc = 'img/nr';
    	imgSrc = imgSrc + index + '.jpg';
    	//这里特别备注一下，如果你的图片用的名称是class而不是id
    	 //那么就不能使用focusImg.src这个方法，要使用focusImg.setAttribute('src'， imgSrc);方法
    	focusImg.src = imgSrc;   //获取img的src地址
    	
    	//这一块如果不需要轮播图下面的导航样式的话可以不写
    	var ulList = document.getElementById('ulList');
    	var links = ulList.getElementsByTagName('a');
    	
    	
    	for(var i = 0; i < links.length; i++){ 
    		links[i].className = '';
    		
    	}
    	links[index].className = 'current';  //放在循环里会导致有延迟
    }

这是我的图片src设置的名称。  
![在这里插入图片描述][20191207124000631.png]  
这样一个showPic函数就完成了，只有这一个函数是不行的，要让轮播图动起来那么就需要一个定时器setInterval（），还需要一个切换src数字的函数，在这里我给它取名为changePic（）：

function changePic(){ 
    	//在这里调用showPic()函数
    	showPic(sign);     //这两个顺序不能颠倒，顺序错误会出现什么样的情况大家自己可以试试
    	sign++;
    	if(sign == 5){ 
    		sign = 0;      //当图片轮播到第六张的时候让他变成第一张图片
    	}
    	
    }

window.onload = showPic(sign);

这行代码的意思是让浏览器加载的时候显示你设置的初始图片

//使用定时器循环这个轮播图
    //也可以直接把changePic()写在定时器里面
    setInterval('changePic()', 3000);

到这里一个简易的轮播图就完成了，如果想加上按钮点击切换轮播图的图片也很简单，在html中加上两个button按钮，一个左边一个右边移动到图片相应的位置，再给他们绑定上函数就可以：

//html中的代码
    <button id="lBtn"> < </button>
    <button id="rBtn"> > </button>
    
    //css中的代码
    #lBtn{ 
    	position: absolute;
    	width: 30px;
    	height: 50px;
    	background-color: grey;
    	left: 345px;
    	top: 420px;
    	outline: none;
    	border: 0px;
    	opacity: 0.5;
    }
    #rBtn{ 
    	position: absolute;
    	width: 30px;
    	height: 50px;
    	background-color: gray;
    	left: 1150px;
    	top: 420px;
    	outline: none;
    	border: 0px;
    	opacity: 0.5;
    }
    
    //js中的代码
    function add(){ 
    	
    	showPic(sign);
    	sign++;
    	if(sign == 5){ 
    		sign = 0;
    	}
    }
    function noAdd(){ 
    	
    	if(sign == 0){ 
    		sign = 5;
    	}
    	sign--;
    	showPic(sign);
    }
    
    var lBtn = document.getElementById('lBtn');
    var rBtn = document.getElementById('rBtn');
    
    lBtn.onclick = noAdd;
    rBtn.onclick = add;

两个按钮的效果如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTk3NTU0_size_16_color_FFFFFF_t_70]  
到这里轮播图的所有教程就完结了，希望大家都可以学会吧。

[20191207124000631.png]: https://img-blog.csdnimg.cn/20191207124000631.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTk3NTU0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191207124949907.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTk3NTU0,size_16,color_FFFFFF,t_70