js基础——图片切换实例

最新推荐文章于 2021-06-04 23:05:37 发布

波克比520

最新推荐文章于 2021-06-04 23:05:37 发布

阅读量618

点赞数

分类专栏： javascript 文章标签： js

本文链接：https://blog.csdn.net/u011175410/article/details/40890315

版权

javascript 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

</pre><pre name="code" class="html"><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js基础——图片切换实例</title>
<style>
ul { padding:0; margin:0; }
li { list-style:none; }
body { background:#fff; }
#pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(images/loader_ico.gif) no-repeat center #fff; }
#pic img { width:400px; height:500px; }
#pic ul { width:40px; position:absolute; top:0; right:-50px; }
#pic li { width:40px; height:40px; margin-bottom:4px; background:#666; cursor:pointer; }
#pic .active { background:#FC3; }
#pic span { top:0; }
#pic p { bottom:0; margin:0; }
#pic p,#pic span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
</style>
<script>

window.onload = function(){
	
	var oDiv = document.getElementById('pic');
	var oImg = oDiv.getElementsByTagName('img')[0];
	var oSpan = oDiv.getElementsByTagName('span')[0];
	var oP = oDiv.getElementsByTagName('p')[0];
	var oUl = oDiv.getElementsByTagName('ul')[0];
	var aLi = oUl.getElementsByTagName('li');
	var arrUrl = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'];
	var arrText = ['图片一','图片二','图片三','图片四'];
	var num = 0;
	
	//遍历生成所有li
	for(var i =0; i<arrUrl.length; i++){
		oUl.innerHTML += '<li></li>';	
	}
	
	//初始化函数
	function init(){
		oImg.src = arrUrl[num];
		oSpan.innerHTML = 1+num + '/' + arrUrl.length;
		oP.innerHTML = arrText[num];
		for(var i=0; i<aLi.length; i++){
			aLi[i].className = '';	
		}
		aLi[num].className = 'active';	
	};
	init();
	
	//点击按钮切换图片
	for(var i=0; i<aLi.length; i++){
		aLi[i].index = i;
		aLi[i].onclick = function(){
			num = this.index;
			init();	
		};	
	}
	
};

</script>
</head>

<body>

<div id="pic">
	<img src="" />
  <span>数量正在加载中……</span>
  <p>文字说明正在加载中……</p>
  <ul></ul>
</div>

</body>
</html>

思路：

第一步：.获取相关元素

第二步：通过for循环遍历生成所有的li元素（按钮）

第三步：函数初始化（按钮状态：清空全部，当前添加，方法2：清空上个，当前添加）

第四步：点击按钮切换图片（自定义属性的运用）

波克比520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础——图片切换实例

js基础——图片切换实例ul { padding:0; margin:0; }li { list-style:none; }body { background:#fff; }#pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(images/loader_ico.gif) no-repe
复制链接

扫一扫