JS---基础_完成点击按钮切换图片

最新推荐文章于 2023-10-09 20:21:36 发布

chen_zan_yu_

最新推荐文章于 2023-10-09 20:21:36 发布

阅读量560

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/chen_zan_yu_/article/details/99705408

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.i{
				width: 500px;
				height: 333px;
			}
			/*
			 * 设置outer的样式
			 */
			#outer{
				/*
				 * 设置宽和高
				 */
				width: 520px;
				height: 333px;
				/*
				 *居中
				 */
				margin: 50px auto;
				background-color: yellowgreen;
				padding: 10px 0;
				/*开启相对定位*/
				position: relative;
				/*剪掉溢出的内容*/
				overflow: hidden;
			}
			
			/*设置imList*/
			#imgList{
				/*去除项目符号*/
				list-style: none;
				/*设置UL的跨度*/
				/*width:2600px ;*/
				/*开启绝对定位*/
				position: absolute;
				/*设置偏移量*/
				/*
				 * 每相左移动520就换下一张
				 */
				left: -520px;
			}
			/*设置图片中的li*/
			#imgList li{
				/*设置浮动*/
				float: left;
				/*设置左右外边距*/
				margin: 0 10px;
			}
			/*设置导航按钮*/
			#navDiv{
				/*开启绝对定位*/
				position: absolute;
				/*设置位置*/
				bottom: 15px;
				/*
				 * 设置left值
				 * outer宽度520
				 * navDiv宽度25*5=125
				 * 520 - 125 = 395/2 = 197.5
				 */
				/*left: 197px;*/
			}
			#navDiv a{
				/*设置内联元素浮动*/
				float: left;
				width: 15px;
				height: 15px;
				background-color: red;
				/*设置左右外边界*/
				margin: 0 5px;
				/*设置透明*/
				opacity: 0.5;
				/*兼容ie8透明*/
				filter: alpha(opacity=50);
			}
			/*设置鼠标移入的效果*/
			#navDiv a:hover{
				background-color: black;
			}
		</style>
		<script type="text/javascript">
			window.onload = function  () {
				//设置imgList的宽度
				//获取imgList
				var imgList = document.getElementById("imgList");
				
				//获取页面中所有IMG标签
				var imgArr = document.getElementsByTagName("img");
				
				//获取imgList的宽度
				imgList.style.width = 520*imgArr.length+"px";
				//设置导航居中
				//获取navDiv
				var navDiv = document.getElementById("navDiv");
				//获取outer
				var outer = document.getElementById("outer");
				//设置navDiv的left的值
				navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
				
				//默认显示索引
				var index = 0;
				
				//获取所有的a
				var allA = document.getElementsByTagName("a");
				
				//设置默认选中的效果
				allA[index].style.backgroundColor = "black";
				/*
				 * 点击超链接，切换图片
				 * 
				 */
				//为所有的超链接绑定单击函数
				for(var i=0;i<allA.length;i++){
					
					//为每一个超链接都添加一个num属性
					allA[i].num = i;
					
					allA[i].onclick = function(){
						
						//获取点击超链接的索引,并将其设置为index
						index = this.num;
						
						//切换图片
						/*
						 * 第一张索引为0 0
						 * 第二张 1 -520
						 * 第三张2 -1040
						 */
						imgList.style.left = -520*index +"px";
						setA();
					};
				}
				
				//设置一个方法选中的a
				function setA(){
					
					//b遍历所有的a，并将没选中的设为red，没选中的设为黑色
					for(var i=0;i<allA.length;i++){
						allA[i].style.backgroundColor = "";
					}
					
					//将选中的a设置为黑色
					allA[index].style.backgroundColor = "black";
				};
				
				
			};
		</script>
	</head>
	<body>
		<!--
        	作者：1395314176@qq.com
        	时间：2019-08-18
        	描述：创建一个外部的DIV，来作为大的容器
        -->
        <div id="outer">
        	<!--
            	作者：1395314176@qq.com
            	时间：2019-08-18
            	描述：创建一个ul,用于放置图片
            -->
            <ul id="imgList">
            	<li><img class="i" src="img/k1.jpg"/></li>
            	<li><img class="i" src="img/k2.jpg"/></li>
            	<li><img class="i" src="img/k3.jpg"/></li>
            	<li><img class="i" src="img/k4.jpg"/></li>
            	<li><img class="i" src="img/k5.jpg"/></li>
            </ul>
            <!--
            	作者：1395314176@qq.com
            	时间：2019-08-18
            	描述：创建导航按钮
            -->
            <div id="navDiv">
            	<a href="javascript:;"></a>
            	<a href="javascript:;"></a>
            	<a href="javascript:;"></a>
            	<a href="javascript:;"></a>
            	<a href="javascript:;"></a>
            </div>
        </div>
	</body>
</html>

chen_zan_yu_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS---基础_完成点击按钮切换图片

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .i{ widt...
复制链接

扫一扫