第三章 web前端开发工程师--JavaScript进阶程序设计 3-3 图片切换综合示例

标签: javascript

JavaScript图片切换综合实例

 

本节课所讲内容:

  1. JavaScript 图片切换综合实例

主讲教师:Head老师

一. JavaScript 新闻网站字体控制

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p { 
    margin:0; 
    }
body { 
    text-align:center;
     }
#box {
     width:790px; 
     height:340px; 
     border:5px solid green;
     margin:50px auto 0;
     position:relative;
 }
a { 
    width:40px; 
    height:40px; 
    background:red;
    filter:alpha(opacity:80); 
    opacity:0.8;
    position:absolute; 
    top:160px; 
    font-size:18px; 
    color:#000; 
    text-align:center; 
    line-height:40px; 
    text-decoration:none;
}
a:hover { 
    filter:alpha(opacity:30); 
    opacity:0.3; 
}
#prev { 
    left:10px; 
}
#next { 
    right:10px; 
}
#p1 { 
    width:790px;
     height:30px; 
     line-height:30px; 
     text-align:center; 
     background:#000; 
     color:#fff; 
     font-size:14px; 
     filter:alpha(opacity:80); 
     opacity:0.8; 
     position:absolute; 
     bottom:0; 
     left:0; 
    }
strong { 
    width:790px; 
    height:30px; 
    line-height:30px; 
    text-align:center; 
    background:#000; 
    color:#fff; 
    font-size:14px; 
    filter:alpha(opacity:80); 
    opacity:0.8; 
    position:absolute; 
    top:0; 
    left:0; 
}
#img1 { 
    width:790px; 
    height:340px; 
}
span { 
    position:absolute; 
    width:400px; 
    height:30px; 
    line-height:30px; 
    text-align:center; 
    top:-50px; 
    left:0; 
    font-family:'微软雅黑'; 
    left:200px;
}
</style>
<script>
window.onload = function (){
	var oPrev = document.getElementById('prev');
	var oNext = document.getElementById('next');
	var oP = document.getElementById('p1');
	var oStrong = document.getElementById('strong1');
	var oImg = document.getElementById('img1');
	var aBtn = document.getElementsByTagName('input');
	
	var arrUrl = [ 'img/01.png', 'img/02.png', 'img/03.png', 'img/04.png' ];
	var arrText = [ '冰箱洗衣机', '超级品牌日', '家电奢品廊', '降温大作战' ];
	var num = 0;
	var onOff = true;
	
	aBtn[0].onclick = function (){ 
        onOff = true; 
        document.getElementsByTagName('span')[0].innerHTML = '图片循环切换'; 
    };
	aBtn[1].onclick = function (){
         onOff = false; 
         document.getElementsByTagName('span')[0].innerHTML = '图片顺序切换'; 
        };
	
	// 初始化
	function fnTab(){
		oP.innerHTML = arrText[num];
		oStrong.innerHTML = num+1 + ' / ' + arrText.length;
		oImg.src = arrUrl[num];
	}
	fnTab();
	
	oPrev.onclick = function (){
		num --;
		if( num == -1 ){
			if(onOff){num = arrText.length-1;}else{
				alert('这已经是第一张了,不能再往前了~~');
				num = 0;
			}
			//num = arrText.length-1;
		}
		fnTab();
	};
	oNext.onclick = function (){
		num ++;
		if( num == arrText.length ){
			if(onOff){num = 0;}else{
				alert('已经到最后一张啦~');
				num = arrText.length-1;
			}
		}
		fnTab();
	};
	
};
</script>
</head>

<body>

<input type="button" value="循环切换" />
<input type="button" value="顺序切换" />


<div id="box"><span>图片切换</span>
	<a id="prev" href="javascript:;"><</a>
	<a id="next" href="javascript:;">></a>
  <p id="p1">图片文字加载中……</p>
  <strong id="strong1">图片数量计算中……</strong>
	<img id="img1" />
</div>

</body>
</html>

效果图:

 

版权声明:本文为wgf5845201314原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wgf5845201314/article/details/90645926

智能推荐

Qt 之 Query Model Example 解析

总体概括 Query Model Example主要演示了怎么使用QSqlQueryModel这个数据库查询模型类。其中包括创建普通的数据库查询模型、可编辑的数据库查询模型和自定义的数据库查询模型。普通(默认)的数据库查询模型是只读的(不可再模型中编辑数据,模型只通过视图展示数据);可编辑的数据库查询模型重写了QSqlQueryModel的flags()方法和setData()方法;自定义的数据库...

Flutter:Scaffold.of() called with a context that does not contain a Scaffold.

Flutter:Scaffold.of() called with a context that does not contain a Scaffold. 当我第一次点击按钮想要弹出底部消息时出现了如下错误 当BuildContext在Scaffold之前时,调用Scaffold.of(context)会报错。这时可以通过Builder Widget来解决,代码如下:...

【机器学习基础】线性回归

                                                        &nbs...

08-Vue实现书籍购物车案例

书籍购物车案例 index.html main.js style.css 1.内容讲解 写一个table和thead,tbody中每一个tr都用来遍历data变量中的books列表。 结果如下: 在thead中加上购买数量和操作,并在对应的tbody中加入对应的按钮。结果如下: 为每个+和-按钮添加事件,将index作为参数传入,并判断当数量为1时,按钮-不可点击。 结果如下: 为每个移除按钮添加...

堆排序

堆排序就是利用堆进行排序的方法,基本思想是,将代排序列构造成一个大根堆,此时整个序列的最大值就是堆顶的根节点。将它与堆数组的末尾元素交换,此时末尾元素就是最大值,移除末尾元素,然后将剩余n-1个元素重新构造成一个大根堆,堆顶元素为次大元素,再次与末尾元素交换,再移除,如此反复进行,便得到一个有序序列。 (大根堆为每一个父节点都大于两个子节点的堆) 上面思想的实现还要解决两个问题: 1.如何由一个无...

猜你喜欢

基础知识(变量类型和计算)

一、值类型 常见的有:number、string、Boolean、undefined、Symbol 二、引用类型 常用的有:object、Array、null(指针指向为空)、function 两者的区别: 值类型暂用空间小,所以存放在栈中,赋值时互不干扰,所以b还是100 引用类型暂用空间大,所以存放在堆中,赋值的时候b是引用了和a一样的内存地址,所以a改变了b也跟着改变,b和a相等 如图: 值...

Codeforces 1342 C. Yet Another Counting Problem(找规律)

题意: [l,r][l,r][l,r] 范围内多少个数满足 (x%b)%a!=(x%a)%b(x \% b) \% a != (x \% a) \% b(x%b)%a!=(x%a)%b。 一般这种题没什么思路就打表找一下规律。 7 8 9 10 11 12 13 14 15 16 17 18 19 20 28 29 30 31 32 33 34 35 36 37 38 39 40 41 49 50...

[笔记]飞浆PaddlePaddle-百度架构师手把手带你零基础实践深度学习-21日学习打卡(Day 3)

[笔记]飞浆PaddlePaddle-百度架构师手把手带你零基础实践深度学习-21日学习打卡(Day 3) (Credit: https://gitee.com/paddlepaddle/Paddle/raw/develop/doc/imgs/logo.png) MNIST数据集 MNIST数据集可以认为是学习机器学习的“hello world”。最早出现在1998年LeC...

哈希数据结构和代码实现

主要结构体: 实现插入、删除、查找、扩容、冲突解决等接口,用于理解哈希这种数据结构 完整代码参见github: https://github.com/jinxiang1224/cpp/tree/master/DataStruct_Algorithm/hash...