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

最新推荐文章于 2020-07-15 15:56:32 发布

波克比520

最新推荐文章于 2020-07-15 15:56:32 发布

阅读量608

点赞数

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

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

版权

javascript 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

<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判断切换方式（循环/顺序）

波克比520

关注

0
点赞
踩
1

收藏

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

10-图片切换综合实例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{
复制链接

扫一扫