公司有个技术很牛x的“老腊肉”，我向他请教，他给了我个网址，上面蛮多效果的，于是乎~我决定照着效果看能不能自己敲出来，我要变大神X3，重要的事说3遍。

它完成的效果是这样的：

好吧，一步一步来，先把框架搭好

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. <style type="text/css">
  7.     body{
  8.         padding: 5em;
  9.     }
  10.     .frame{
  11.         margin:0 auto;
  12.         width: 968px;
  13.     }
  14.     .preview{
  15.         width: 786px;
  16.         height: 442px;
  17.         float: left;
  18.     }
  19.     .list{
  20.         float: right;
  21.         width: 173px;
  22.     }
  23.     .list ul{
  24.         margin:0;
  25.         padding:0;
  26.         list-style:none;
  27.         overflow: hidden;
  28.     }
  29.     .list ul li{
  30.         margin-bottom:9px;
  31.         cursor: pointer;
  32.         position: relative;
  33.     }
  34.     .list ul li>img{
  35.         display: block;
  36.     }
  37.     .list ul li:after{
  38.         background: rgba(0,0,0,.6);
  39.         content: "";
  40.         width: 100%;
  41.         height: 100%;
  42.         position: absolute;
  43.         top: 0;
  44.         left: 0;
  45.         transition: background 0.2s linear;
  46.     }
  47.     .list ul li.active:after{
  48.         background: rgba(255,255,255,0);
  49.         box-sizing: border-box;
  50.         opacity: 1;
  51.         border:4px solid #fff;
  52.         transition: none;
  53.     }
  54.     .list ul li:hover:after{
  55.         background: rgba(255,255,255,0);
  56.     }
  57. </style>
  58. </head>
  59. <body>
  60.     <div class="frame">
  61.         <div class="preview" id="preview">
  62.             <img src="wp_b0.jpg">
  63.         </div>
  64.         <div class="list" id="list">
  65.             <ul>
  66.                 <li class="active">
  67.                     <img src="wp_t0.jpg">
  68.                 </li>
  69.                 <li>
  70.                     <img src="wp_t1.jpg">
  71.                 </li>
  72.                 <li>
  73.                     <img src="wp_t2.jpg">
  74.                 </li>
  75.                 <li>
  76.                     <img src="wp_t3.jpg">
  77.                 </li>
  78.             </ul>
  79.         </div>
  80.     </div>
  81. </body>
  82. </html>

上面的代码仅仅完成了静态显示效果，鼠标移上去有个背景由暗变亮的过渡效果，但是还不能切换图片，接下来我们把这部分完成：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript">
  7.     window.onload=function(){
  8.         var links=document.getElementById("list").getElementsByTagName("li");
  9.         for(var i=0;i<links.length;i++){
  10.             links[i].onclick=function(){
  11.                 var preview=document.getElementById("preview");
  12.                 var previewImg=preview.getElementsByTagName("img")[0];
  13.                 // var pre_src=previewImg.getAttribute("src");
  14.                 // console.log(pre_src);
  15.                 var links_src=this.getElementsByTagName("img")[0].getAttribute("src");
  16.                 // console.log(links_src);
  17.                 var t=links_src.substr(4,1);
  18.                 // var b=pre_src.substr(4,1);
  19.                 // console.log(b);    //b=0
  20.                 // console.log(t);//t=3
  21.                 var pre_src="wp_b"+t+".jpg";
  22.                 // console.log(pre_src);
  23.                 previewImg.setAttribute("src",pre_src);
  24.             }
  25.         }
  26.     }
  27.     </script>
  28. </head>
  29. <body>
  30. </body>
  31. </html>

为了方便查看，我把这部分功能以外的html代码和css样式部分全部删掉了。注释部分是方便测试用的。代码还是比较简单的，现在我们的图片可以切换了。

注意，此时还有最后一个功能，即鼠标点击右侧导航小图，所点导航增加一个“active”类，其他兄弟导航不允许存在此类。如果用jq写，很简单，

  1. $(document).ready(function() {    $("div ul li").click(function(){		$(this).addClass("add").siblings().removeClass("add");	});});这样就可以，但这里我们用js写，则麻烦的多之前的增改了一下
  1. window.onload=function(){
  2.         var links=document.getElementById("list").getElementsByTagName("li");
  3.         for(var i=0;i<links.length;i++){
  4.             links[i].onclick=function(e){
  5.                 var preview=document.getElementById("preview");
  6.                 var previewImg=preview.getElementsByTagName("img")[0];
  7.                 var links_src=this.getElementsByTagName("img")[0].getAttribute("src");
  8.                 var t=links_src.substr(4,1);
  9.                 var pre_src="wp_b"+t+".jpg";
  10.                 previewImg.setAttribute("src",pre_src); 　　　　　　　　　　//下面是激活项
  11.                 e=e||window.event;
  12.                 var target=e.srcElement||e.target;
  13.                 for(var i=0,len=links.length;i<len;i++){
  14.                     links[i].className=target==links[i]?"active":"";
  15.                 }
  16.             }
  17.         }
  18.     }

其中还用到了传参。参数e主要为了监听，获取鼠标的状态;

e = e || window.event是js在事件处理兼容IE和非IE的写法;

e.srcElement是为了下面获取触发事件的className属性。

图片切换效果，纯js的更多相关文章

  1. javascript马赛克遮罩图片切换效果:XMosaic.js(转)

    新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...

  2. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  3. js原生带缩略图的图片切换效果

    js原生带缩略图的图片切换效果 本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二 ...

  4. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  5. jquery带按钮的图片切换效果

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  6. 精致3D图片切换效果，最适合企业产品展示

    这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...

  7. 100种不同图片切换效果插件pageSwitch

    分享100种不同图片切换效果插件pageSwitch.这是一款适用于全屏切换场景,即一切一屏,并且实现了超过一百种切换效果,支持自定义切页动画.效果图如下: 在线预览   源码下载 实现的代码. ht ...

  8. 手机触屏滑动图片切换插件swiper.js

    今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  9. Flash 用FLASH遮罩效果做图片切换效果

    本教程是关于FLASH应用遮罩效果制作好看的图片切换效果.该教程选用FLASH遮罩中最简单的一种作为例子,当然你可以用自己的想象力来做出更多更好的图片动画.希望本教程能带你带来帮助. 让我们先看看效果 ...

  10. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

随机推荐

  1. 使用反射机制实现jQuery调用ashx类中的指定方法

    使用反射机制实现jQuery调用ashx类中的指定方法   近期用asp.net做个小网站,但又不喜欢使用asp.net的服务器端控件,经过一番思量后确定前端采用原始的html.后台采用Linq to ...

  2. [google面试CTCI] 1-7.将矩阵中特定行、列置0

    [字符串与数组] Q:Write an algorithm such that if an element in an MxN matrix is 0, its entire row and colu ...

  3. 公众平台Bee.WeiXin

    微信公众平台Bee.WeiXin开发介绍 阅读目录 开始 预览 配置项说明 调用链方式的应答 理解调用链上下文 自定义MVC响应 总结 我们来看一下如何通过Bee.WeiXin开发微信公众平台.关于微 ...

  4. JS关闭当前页面的方法

    JS关闭当前页面的方法 一.不带任何提示关闭窗口的js代码 1 <a href="javascript:window.opener=null;window.open('','_self ...

  5. ADS的go to命令

    我们有时候在一个函数右键没有看到“go to”选项,这是因为没有Make,要先Make之后才能使用go to 命令

  6. myeclipse乱码问题和 编码设置

    A    Myeclipse安装后编码默认是GB18030,外面的人一般推荐用UTF-8.如果在导入项目后发现乱码现象,那是编码设置设置不对. Eclipse 编码设置: 全局编码设置:编码设置的方法 ...

  7. VS2012下基于Glut OpenGL glScissor示例程序：

    剪裁测试用于限制绘制区域.我们可以指定一个矩形的剪裁窗口,当启用剪裁测试后,只有在这个窗口之内的像素才能被绘制,其它像素则会被丢弃.换句话说,无论怎么绘制,剪裁窗口以外的像素将不会被修改.有的朋友可能 ...

  8. Python的下载和安装

    一.下载(官方下载地址) 地址:https://www.python.org/downloads/ 我的是window7系统 二.安装详细过程 在选择安装组件的一步时,勾上所有的组件: 特别要注意选上 ...

  9. java基础IO删除文件夹文件

    /** * 定义一个方法,能够删除任意文件夹,文件夹路径由键盘录入 注意:不要在C盘下做测试,请选定无用的文件夹测试! */ 1.键盘录入 private static File getfile() ...

  10. 微信小程序入门——怎么建多个项目？（导入官方Demo程序进行学习）

    昨天1月9日微信小程序发布,顿时被朋友圈刷爆,今天看了一下官方文档,自己开始一步一步搭建环境体验小程序开发. 常见问题: 1.微信小程序开发是否需要重新创建开发者账号? 需要,即使之前申请了微信服务号 ...