8.13、8.14 图片展示

最新推荐文章于 2023-08-10 20:40:46 发布

RookieRocket

最新推荐文章于 2023-08-10 20:40:46 发布

阅读量632

点赞数 1

本文链接：https://blog.csdn.net/rookierocket/article/details/38560001

版权

这两天用js模拟了一下类似网站上图片展示效果，主要功能有

1、实现图片的显示与隐藏；

2、多张图片切换，用一个数组储存图片的地址，方便切换操作；

3、快速切换到首张或末张；

4、提示图片总数，和当前张数；

5、图片幻灯片自动播放。

还做了一些优化，

1、添加了按钮失效机制，防止误操作；

2、优化了图片路径设置函数，方便了后期大量图片的路径设置过程。

下面简单讲一下主要设计思路

首先要采用规则的图片命名，这里我采用的是p1.jpg、p2.jpg、p3.jpg...pi.jpg （i为图片的数量）这种形式，然后调用for循环，把图片地址依次储存在数组 srcArr[ ] 中。

<span style="font-family:Microsoft YaHei;font-size:18px;"><strong>        var srcArr = new Array();
	function setSrc () {		
		for (var i = 1; i <= 7; i++) {
			srcArr[i-1] = "p"+i+".jpg";
		};
	}</strong></span>

然后，切换图片的过程就是遍历数组的过程，“下一张”就执行n++，“上一张”就n--，返回首张就使n=0，末张就使n=srcArr.length-1，即数组中最后一个元素。

<span style="font-family:Microsoft YaHei;font-size:18px;"><strong>        var n = 0;
	function chooseFun (name) {
		switch (name){
			case "next":n++;break;
			case "previous":n--;break;
			case "first":n=0;break;
			case "last":n=srcArr.length-1;break;
		}
		pic1.src=srcArr[n];
		check ();		
	}</strong></span>

自动播放功能就建立在上面的基础之上，n<srcArr.length-1，即不是末页时，执行“下一张”操作，到达末页时，则执行返回首张操作，最后用延时函数递归调用这一过程，即完成了自动播放。

<span style="font-family:Microsoft YaHei;font-size:18px;"><strong>        function play () {
		if(n<srcArr.length-1){
			chooseFun('next');
				
		}else{
			chooseFun('first');
		}
		t=setTimeout('play()',2000);
	}</strong></span>

以下是整个页面的全部代码

<span style="font-family:SimHei;font-size:14px;"><strong><!DOCTYPE html>
<html>
<head>

        <style type="text/css">
	body
	{
		text-align:center;
	}
	p
	{ 
		text-align:left;
		display: inline;
	}
	#content
	{
		width: 640px;
		margin: auto;
	}
	#btn1,#btn2,#btn3,#btn4
	{
		margin:10px auto 20px auto;
	}
        </style>
	<script type="text/javascript">
	//显示与隐藏
	function disvisi () {
		if (pic1.style.visibility == "hidden") {
			check ();
			pic1.style.visibility="visible";	
			btn1.value="隐藏";
	}else{
		setDisable1(true);
		pic1.style.visibility="hidden";
		btn1.value="显示";
	}
	}
	//图片切换
	var srcArr = new Array();
	function setSrc () {		
		for (var i = 1; i <= 7; i++) {
			srcArr[i-1] = "p"+i+".jpg";
		};
	}	
	var n = 0;
	function chooseFun (name) {
		switch (name){
			case "next":n++;break;
			case "previous":n--;break;
			case "first":n=0;break;
			case "last":n=srcArr.length-1;break;
		}
		pic1.src=srcArr[n];
		check ();
		
	}
	function notice() {
		document.getElementById('total').innerHTML=srcArr.length;
		document.getElementById('now').innerHTML=n+1;
	}
	function check () {
		switch (n){
			case 0: 
				setDisable2 (true);
				break;
			case srcArr.length-1:
				setDisable2 (false);
				break;
			default: setDisable1(false);
		}
	}
	function setDisable1 (flag) { 
		btnFirst.disabled=flag;
		btnLast.disabled=flag;
		btnPrev.disabled=flag;
		btnNext.disabled=flag;
		btnPlay.disabled=flag;
	}
	function setDisable2 (flag) {
		btnFirst.disabled=flag;
		btnLast.disabled=!flag;
		btnPrev.disabled=flag;
		btnNext.disabled=!flag;
	}
	//自动播放
	var t;
	function clickPlay () {
		document.getElementById('btnPlay').value="暂停";
		document.getElementById('btnPlay').οnclick=clickPause;
		btn1.disabled=true;
		setTimeout('play()',2000);
		}
	function clickPause () {
		document.getElementById('btnPlay').value="播放";
		document.getElementById('btnPlay').οnclick=clickPlay;
		btn1.disabled=false;
		clearTimeout(t);
		}			 
	function play () {
		if(n<srcArr.length-1){
			chooseFun('next');
				
		}else{
			chooseFun('first');
		}
		t=setTimeout('play()',2000);
	}
	</script>
</head>

<body>
	<div id="Container">
		<div id="content">
			<p>总计</p><p  id="total"></p><p>张,当前第</p><p id="now"></p><p>张</p>
			<img id="pic1" src="p1.jpg" width="640px" height="400px" οnlοad="setSrc();notice()">
			<input type="button" id="btn1" value="隐藏" οnclick="disvisi()"></input>	
			<input type="button" id="btnFirst" value="首张" disabled="true" οnclick="chooseFun('first')"></input>
			<input type="button" id="btnPrev" value="上一张" disabled="true" οnclick="chooseFun('previous')"></input>
			<input type="button" id="btnPlay" value="播放" οnclick="clickPlay()"></input>
			<input type="button" id="btnNext" value="下一张" οnclick="chooseFun('next')"></input>
			<input type="button" id="btnLast" value="末张" οnclick="chooseFun('last')"></input>
			
		</div>
	</div>
</body>

</html>
</strong></span>