JS基础——图片切换的综合实例

<pre name="code" class="html"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>10-图片切换综合实例</title>
<style>
p{ margin:0;}
.buttons{ text-align:center; margin-top:20px;}
#box{ width:400px; height:300px; border:10px solid #ccc; margin:15px auto; position:relative;}
#span1 ,#box a ,#p1 ,#strong1{ position:absolute;}
#box a{ width:40px; height:40px; border-radius:20px; text-align:center; line-height:40px; color:#000; background:rgba(255,255,255,.9); top:140px; font-weight:bold; font-family:Vernada; text-decoration:none;}
#box a:hover{  background:rgba(255,255,255,.8); -webkit-transition:.5s; -moz-transition:.5s; transition:.5s;}
#prev{ left:5px;}
#next{ right:5px;}
#p1 ,#strong1{ width:400px; height:30px; line-height:30px; text-align:center; background:rgba(0,0,0,.8); color:#fff; font-size:14px; left:0;}
#strong1{ top:0; font-weight:normal;}
#p1{ bottom:0;}
#img1{ width:400px; height:300px;}
</style>
<script>
window.onload = function(){var aBtn = document.getElementsByTagName('input');var oPrev = document.getElementById('prev');var oNext = document.getElementById('next');var oStrong = document.getElementById('strong1');var oP = document.getElementById('p1');var oImg = document.getElementById('img1');var arrUrl = ['http://www.w3cfuns.com/data/attachment/album/201408/19/004625t5du798d0fyskowc.jpg','http://www.w3cfuns.com/data/attachment/album/201408/19/004628ftrm6hxhzkl8v11l.jpg','http://www.w3cfuns.com/data/attachment/album/201408/19/004622g4oo68an688ostn4.jpg.thumb.jpg','http://www.w3cfuns.com/data/attachment/album/201408/19/004620ldgo2c49dda2h64a.jpg.thumb.jpg'];var arrText = ['图片一','图片二','图片三','图片四'];var num = 0;var onOff = true;//循环播放aBtn[0].onclick = function (){onOff = true;  };//顺序播放aBtn[1].onclick = function (){onOff = false;      }//初始化函数function initial(){oStrong.innerHTML = (num+1) + '/' + arrText.length; oP.innerHTML =  arrText[num];oImg.src = arrUrl[num]; };initial();//向左切换oPrev.onclick = function(){num--;if(num == -1){if(onOff){//循环播放num = arrText.length -1;   }else{//顺序播放alert('亲，已经是第一张了！');num = 0;   }}initial();    };//向右切换oNext.onclick = function(){num++;if(num == arrText.length){if(onOff){//循环播放num = 0;   }else{//顺序播放alert('亲，已经是最后一张了！');num = arrText.length-1;   }}initial();};};
</script>
</head><body>
<div class="buttons"><input id="btn1" type="button" value="循环播放"><input id="btn2" type="button" value="顺序播放">
</div><div id="box"><a id="prev" href="javascript:;"><</a><a id="next" href="javascript:;">></a><strong id="strong1">图片数量加载中...</strong><p id="p1">图片文字加载中...</p><img id="img1" />
</div>
</body>
</html>

思路：

1.获取元素

2.初始化

3.左右切换函数

4.通过onOff判断切换方式（循环/顺序）

JS基础——图片切换的综合实例相关推荐

如何用js实现图片切换的同时，文字也同时切换
如何用js实现图片切换的同时,文字也同时切换? 图片切换的实现我会代码如下: <!doctype html> <html> <head> <meta cha ...
摘自天极网的JS卡通图片切换代码
代码简介: 来自经典论坛的一款仿天极网图片切换特效,含有详细的设置说明,使用起来比较简单.请在开始时设置图片目录.标题长度.图片切换的时间等,还可以设置Ad跟踪条的颜色,更多的自定义选项让它更能适合你 ...
jquery仿凡客诚品图片切换的效果实例代码
清远大学城网(http://www.qydxc.com) 是一个不错的图片切换效果,就是可以图片带文字说明的折叠效果,下面我来给大家推荐两个版本的效果,有需要了解的朋友可参考. 图片版的效果代码如下复 ...
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仿魅族官网大图轮 ...
用CSS3制作令人印象深刻的产品展示图片切换效果
用CSS3制作令人印象深刻的产品展示图片切换效果产品页面是在您的网站上的任何页面展示产品.它必须描述产品的特点,给点截图展示.当然,这是你让访问者对你的产品感兴趣的地方,但它越来越难以抓住他们的注意 ...
php幻灯片切换,JavaScript_JS实现FLASH幻灯片图片切换效果的方法，本文实例讲述了JS实现FLASH幻灯 - phpStudy...
JS实现FLASH幻灯片图片切换效果的方法本文实例讲述了JS实现FLASH幻灯片图片切换效果的方法.分享给大家供大家参考.具体实现方法如下: JS模拟FLASH幻灯片图片切换效果 /* ul,li{ ...

JS基础——图片切换的综合实例

JS基础——图片切换的综合实例相关推荐

最新文章

热门文章