js基础——图片切换实例
2014-11-07 11:26
330 查看
</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:清空上个,当前添加)
第四步:点击按钮切换图片(自定义属性的运用)
相关文章推荐
- js基础——图片切换实例(函数传参)
- Js基础--数组应用实例(图片切换)
- js基础——图片切换实例(函数传参)
- js基础自定义属性索引值之图片切换实例
- JS基础——图片切换的综合实例
- 自定义属性之图片切换实例——初始化、实现切换效果——JS学习笔记2015-5-29(第42天)
- js设置随机切换背景图片的简单实例
- js实现百度联盟中一款不错的图片切换效果完整实例
- JS实现图片高斯模糊切换效果的焦点图实例
- js实现百度联盟中一款不错的图片切换效果完整实例
- JS基础--简单图片切换
- js实现支持手机滑动切换的轮播图片效果实例
- JS图片切换,幻灯+缩略图的实例效果
- Web前端学习——JS基础二之图片切换
- 一个简单且丑陋的js切换背景图片基础示例
- 自定义属性之图片切换实例——初始化——JS学习笔记2015-5-28(第41天)
- 4.18 图片切换【js基础应用】
- [置顶] js中传参的实例 多组图片的指定切换与商品价格的计算
- 自定义属性之图片切换实例——代码简化、函数合并——JS学习笔记2015-5-30(第43天)
- js实现支持手机滑动切换的轮播图片效果实例