js基础——图片切换实例

</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;//遍历生成所有lifor(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实现图片切换的同时,文字也同时切换? 图片切换的实现我会代码如下: <!doctype html> <html> <head> <meta cha ...
摘自天极网的JS卡通图片切换代码
代码简介: 来自经典论坛的一款仿天极网图片切换特效,含有详细的设置说明,使用起来比较简单.请在开始时设置图片目录.标题长度.图片切换的时间等,还可以设置Ad跟踪条的颜色,更多的自定义选项让它更能适合你 ...
html图片切换动画,js实现图片切换（动画版）
学习了妙味课堂的图片切换(动画版) 这个小效果相对简单一点. 知识预备: [1]background-position-x background-position属性设置背景原图像(由 backgro ...
用JS实现图片切换、定时器、轮播图
一. 图片切换实现功能: 当点击"下一页"时,跳转到下一张图片: 当点击"上一页"时,跳转到上一张照片: 显示当前页数/总页数,如:2/6. <!DOC ...
jQuery.nivo.slider.js 幻灯片图片切换
号称最好的JQUERY幻灯片,虽然夸夸其谈,但也算简单易用使用步骤 1.引入以下的js和css文件 <link rel="stylesheet" href="ni ...
html图片渐隐渐显,js实现图片切换效果渐隐渐显
图片渐隐渐显的切换效果 window.onload = function() { var testDiv = document.getElementById('test'); testDiv.styl ...
10款js图片代码_图片滚动代码_图片切换代码_图片特效代码_图片轮播代码（一）
实现图片墙时光穿梭特效 swiper图文卡片滑块切换特效网页放大镜图片预览插件图片瀑布流tab分类切换特效 js窗帘式图片切换特效全屏带视频banner轮播图片特效 Swiper仿魅族官网大图轮 ...
Vue-图片切换实例
Vue-图片切换实例核心代码实例比较简单,对左箭头与右箭头绑定点击事件,实现img数组遍历.注意的是:首张图片与最后一张图片进行判断隐藏显示. 核心代码 <div id="mask ...
用CSS3制作令人印象深刻的产品展示图片切换效果
用CSS3制作令人印象深刻的产品展示图片切换效果产品页面是在您的网站上的任何页面展示产品.它必须描述产品的特点,给点截图展示.当然,这是你让访问者对你的产品感兴趣的地方,但它越来越难以抓住他们的注意 ...
php幻灯片切换,JavaScript_JS实现FLASH幻灯片图片切换效果的方法，本文实例讲述了JS实现FLASH幻灯 - phpStudy...
JS实现FLASH幻灯片图片切换效果的方法本文实例讲述了JS实现FLASH幻灯片图片切换效果的方法.分享给大家供大家参考.具体实现方法如下: JS模拟FLASH幻灯片图片切换效果 /* ul,li{ ...

js基础——图片切换实例

js基础——图片切换实例相关推荐

最新文章

热门文章