在前一次，我们实现最简单的图片切换效果，这一次，依旧还是图片切换，具体效果如下：

通过点击下面的小图，上面的大图和标题随之切换。因此，我们需要三个容器分别放标题，大图和小图。


<!--大图描述-->

<p id="des">蒲公英</p>

<!--大图展示-->

<img id="big_img" src="img/1.jpg" alt="" width="540">

<!--小图列表-->

<ul id="fj">

　　<li>

　　　　<a href="img/1.jpg" title="蒲公英">

　　　　　　<img src="img/1.jpg" width="100" alt="蒲公英">

　　　　</a>

　　</li>

　　<li>

　　　　<a href="img/2.jpg" title="热气球">

　　　　　　<img src="img/2.jpg" width="100" alt="热气球">

　　　　</a>

　　</li>

　　<li>

　　　　<a href="img/3.jpg" title="别致小屋">

　　　　　　<img src="img/3.jpg" width="100" alt="别致小屋">

　　　　</a>

　　</li>

　　<li>

　　　　<a href="img/4.jpg" title="高山湖水">

　　　　　　<img src="img/4.jpg" width="100" alt="高山湖水">

　　　　</a>

　　</li>

　　<li>

　　　　<a href="img/5.jpg" title="高速公路">

　　　　　　<img src="img/5.jpg" width="100" alt="高速公路">

　　　　</a>

　　</li>

</ul>

然后获取相应的标签

 var ul = document.getElementById("fj");

 var aList = ul.getElementsByTagName("a");

 var des = document.getElementById("des");

 var big_img = document.getElementById("big_img");

最后，给每一个小图绑定点击事件，当点击到当前元素是，获取当前元素的title和和href字段，并将这两个字段值赋值给相应元素，需要注意的是，我们采用a标签的href来保存图片，但是其默认事件是进行链接跳转，所以在赋值后，需要阻止元素的默认事件。

for(var i=; i<aList.length; i++){

      aList[i].onclick = function () {

          big_img.src = this.href;

          des.innerHTML = this.title;

           return false;   //阻止默认事件

      }

}

到此为止，我们就实现了预期的效果了，完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        body{

            margin: 50px;

        }

        #fj{

            list-style: none;

        }

        #fj li{

            float: left;

            margin-left: 10px;

        }

        #big_img{

            margin-left: 10px;

        }

        #des{

            margin: 10px;

            color: orangered;

            font-size: 20px;

        }

    </style>

</head>

<body>

    <!--大图描述-->

    <p id="des">蒲公英</p>

    <!--大图展示-->

    <img id="big_img" src="img/1.jpg" alt="" width="540">

    <!--小图列表-->

    <ul id="fj">

        <li>

            <a href="img/1.jpg" title="蒲公英">

                <img src="img/1.jpg" width="100" alt="蒲公英">

            </a>

        </li>

        <li>

            <a href="img/2.jpg" title="热气球">

                <img src="img/2.jpg" width="100" alt="热气球">

            </a>

        </li>

        <li>

            <a href="img/3.jpg" title="别致小屋">

                <img src="img/3.jpg" width="100" alt="别致小屋">

            </a>

        </li>

        <li>

            <a href="img/4.jpg" title="高山湖水">

                <img src="img/4.jpg" width="100" alt="高山湖水">

            </a>

        </li>

        <li>

            <a href="img/5.jpg" title="高速公路">

                <img src="img/5.jpg" width="100" alt="高速公路">

            </a>

        </li>

    </ul>

<script>

    window.onload = function () {

        // 1. 获取需要的标签

        var ul = document.getElementById("fj");

        var aList = ul.getElementsByTagName("a");

        var des = document.getElementById("des");

        var big_img = document.getElementById("big_img");

        // 2.绑定事件

        for(var i=0; i<aList.length; i++){

            aList[i].onclick = function () {

                big_img.src = this.href;

                des.innerHTML = this.title;

                return false;  //阻止默认事件

            }

        }

    }

</script>

</body>

</html>

完整代码下载链接：点这里

还有一种和这个类似的效果，就是我们在网上购物常常看到的如下效果：

个人觉得实现方式和上面几乎相同，就不详细介绍了，下面贴出详细代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#box{
border: 1px solid #cccccc;
width: 360px;
height: 70px;
padding-top: 360px;
margin: 100px auto;
background: url("images/01big.jpg") no-repeat;
}
ul{
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="data:images/01.jpg" alt=""></li>
<li><img src="data:images/02.jpg" alt=""></li>
<li><img src="data:images/03.jpg" alt=""></li>
<li><img src="data:images/04.jpg" alt=""></li>
<li><img src="data:images/05.jpg" alt=""></li>
</ul>
</div>
<script>
window.onload = function () {
// 1. 获取需要的标签
var box = document.getElementById("box");
var allLi = box.getElementsByTagName("li");
// 2. 监听鼠标的进入
for(var i=0; i<allLi.length; i++){
var sLi = allLi[i];
sLi.index = i+1;
sLi.onmouseover = function () {
console.log(this.index);
box.style.background = 'url("images/0'+ this.index +'big.jpg") no-repeat';
}
}
}
</script>
</body>
</html>


												


											
JavaScript之图片操作2的更多相关文章
	

    
						
  1. JavaScript之图片操作7
		
    前面总结了很多了有关于图片操作的案例,本次是基于前面的基础,做一个综合的图片轮播效果,需要实现以下功能: 没有任何操作时,图片自动轮播 鼠标悬浮时,图片停止轮播:当鼠标移开,轮播继续 鼠标悬浮时,出现 ...
    
		
    2. 
						
  2. JavaScript之图片操作5
		
    本次的图片操作是要实现模仿天猫淘宝的放大镜效果,如下图所示: 其实现原理其实很简单,主要就是定位的运用,在上面的图中,左边是一个div,它的大小就是左边图片的大小,我们称为左窗口(原图),红色部分我们 ...
    
		
    3. 
						
  3. JavaScript之图片操作1
		
    在网页中,经常需要对图片经常各种操作,包括切换,轮播等等,接下来将总结一些常见的图片操作,首先是最简单前后切换. 如上面所示,通过点击右边的按钮切换左边的图片,为了实现想要的效果,首先,我们需要在ht ...
    
		
    4. 
						
  4. JavaScript之图片操作6
		
    上一篇写的关于放大镜的,可能在实际开发中用的不是很多,接下来将的图片无缝滚动在实际工作中就是用的比较多的了. 如上图,通过定时器控制图片无缝滚动,当鼠标悬浮时停止滚动,鼠标离开,滚动继续. 主要原理是 ...
    
		
    5. 
						
  5. JavaScript之图片操作3
		
    在页面布局中,常常会用到九宫格布局,如下图所示: 本次我们就以九宫格为基础进行图片的布局操作,首先我们以上面的图片的为例,假设每个格子的大小都相同,将每一个格子相对其父元素进行定位,这样,我们只需要控 ...
    
		
    6. 
						
  6. JavaScript之图片操作4
		
    本次要实现的效果是,在一个盒子里面有一张长图,只显示了一部分,为方便用户浏览,当鼠标移入时,图片开始滚动,将盒子分成上下两部分,当鼠标移入上部分时,图片向上滚动,当鼠标移入下部分时,图片向下滚动. 为 ...
    
		
    7. 
								
  7. JavaScript校验图片格式及大小
		
    <!DOCTYPE html> <html> <head> <title>JavaScript校验图片格式及大小</title> <s ...
    
		
    8. 
						
  8. 网站开发综合技术 三 JavaScript的DOM操作
		
    第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作  ...
    
		
    9. 
						
  9. JavaScript DOM 基础操作
		
    JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 使用shake.js让你博客支持摇一摇
			
    大家好,又到了随机文章的时间,请使用手机打开演示站点,然后像摇妹子一样摇晃手机,你会发现非常牛逼的事情,炫酷吧.该功能已经集成在Oconnor1.8中.本文主要讲解这货的原理. 首先需要下载shake ...
    
			
    2. 
						
  2. LibSVM文件转换为csv格式
			
    Spark MLlib 的官方例子里面提供的数据大部分是 libsvm 格式的.这其实是一种非常蛋疼的文件格式,和常见的二维表格形式相去甚远,下图是里面的一个例子: libsvm 文件的基本格式如下: ...
    
			
    3. 
						
  3. 深入理解Linux网络技术内幕——内核基础架构和组件初始化
			
    引导期间的内核选项     Linux允许用户把内核配置选项传给引导记录,再有引导记录传给内核,以便对内核进行调整.     start_kernel中调用两次parse_args,用于引导期间配置用 ...
    
			
    4. 
						
  4. MySQL主从数据一致性检验
			
    MySQL主从数据一致性检验 检查主从数据一致性,我们使用pt-table-checksum ,pt-table-checksum是percona-tools一个工具,用来校验主从库数据是不是一致.  ...
    
			
    5. 
						
  5. "Incorrect string value: '\\xE7\\x89\\x8C\\xE5\\xB1\\x80...' for column 'name' at row 1")
			
    出现这个错误的原因是,数据库的编码格式为latin1 而我要将utf8的中文插入到数据库中. mysql> alter database xxx default character set ut ...
    
			
    6. 
						
  6. nwjs问题总结
			
    1.iframe中不支持flash解决方法: nw初始化中加入代码: // 设置flashplayer在iframe中可用 chrome.contentSettings.plugins.set({ p ...
    
			
    7. 
						
  7. [Scala]Scala学习笔记七 正则表达式
			
    1. Regex对象 我们可以使用scala.util.matching.Regex类使用正则表达式．要构造一个Regex对象,使用String类的r方法即可: val numPattern = &q ...
    
			
    8. 
						
  8. L2-009. 抢红包
			
    没有人没抢过红包吧…… 这里给出N个人之间互相发红包.抢红包的记录,请你统计一下他们抢红包的收获. 输入格式: 输入第一行给出一个正整数N(<= 104),即参与发红包和抢红包的总人数,则这些人 ...
    
			
    9. 
						
  9. Locust 其他协议
			
    Locust 是基于HTTP作为主要目标构建的,但是他同样可以扩展其他的协议,接受请求与获得返回.在编写的客户端的时候,我们就要使用到最常使用的 request_success 和 request_f ...
    
			
    10. 
						
  10. [Python] 网络编程之TCP编程
			
    转自:TCP编程 - 廖雪峰的官方网站 Socket是网络编程的一个抽象概念.通常我们用一个Socket表示“打开了一个网络链接”,而打开一个Socket需要知道目标计算机的IP地址和端口号,再指定协 ...
    
			
    11.