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

它完成的效果是这样的：

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    body{
        padding: 5em;
    }
    .frame{
        margin:0 auto;
        width: 968px;
    }
    .preview{
        width: 786px;
        height: 442px;
        float: left;
    }
    .list{
        float: right;
        width: 173px;
    }
    .list ul{
        margin:0;
        padding:0;
        list-style:none;
        overflow: hidden;
    }
    .list ul li{
        margin-bottom:9px;
        cursor: pointer;
        position: relative;
    }
    .list ul li>img{
        display: block;
    }
    .list ul li:after{
        background: rgba(0,0,0,.6);
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: background 0.2s linear;
    }
    .list ul li.active:after{
        background: rgba(255,255,255,0);
        box-sizing: border-box;
        opacity: 1;
        border:4px solid #fff;
        transition: none;
    }
    .list ul li:hover:after{
        background: rgba(255,255,255,0);
    }
</style>
</head>
<body>
    <div class="frame">
        <div class="preview" id="preview">
            <img src="wp_b0.jpg">
        </div>
        <div class="list" id="list">
            <ul>
                <li class="active">
                    <img src="wp_t0.jpg">
                </li>
                <li>
                    <img src="wp_t1.jpg">
                </li>
                <li>
                    <img src="wp_t2.jpg">
                </li>
                <li>
                    <img src="wp_t3.jpg">
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function(){
        var links=document.getElementById("list").getElementsByTagName("li");
        for(var i=0;i<links.length;i++){
            links[i].onclick=function(){
                var preview=document.getElementById("preview");
                var previewImg=preview.getElementsByTagName("img")[0];
                // var pre_src=previewImg.getAttribute("src");
                // console.log(pre_src);
                var links_src=this.getElementsByTagName("img")[0].getAttribute("src");
                // console.log(links_src);
                var t=links_src.substr(4,1);
                // var b=pre_src.substr(4,1);
                // console.log(b);    //b=0
                // console.log(t);//t=3
                var pre_src="wp_b"+t+".jpg";
                // console.log(pre_src);
                previewImg.setAttribute("src",pre_src);
            }
        }
    }
    </script>
</head>
<body>
</body>
</html>

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

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

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

其中还用到了传参。参数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. SSRS 系列 - 使用带参数的 MDX 查询实现一个分组聚合功能的报表

    SSRS 系列 - 使用带参数的 MDX 查询实现一个分组聚合功能的报表 SSRS 系列 - 使用带参数的 MDX 查询实现一个分组聚合功能的报表 2013-10-09 23:09 by BI Wor ...

  2. (转)poj1182食物链

    这题主要是看了http://blog.csdn.net/c0de4fun/article/details/7318642这篇解题报告,所以内容基本是转的!感谢大牛这么详细的把过程写的很清楚! 这道题目 ...

  3. C#利用Emit反射实现AOP，以及平台化框架封装思路

    C#利用Emit反射实现AOP,以及平台化框架封装思路 这是前两天扒的一段动态代理AOP代码,用的Emit反射生成子类来实现代理模式,在这里做个小笔记,然后讨论一下AOP框架的实现思路. 首先是主函数 ...

  4. Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果

    Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果 在一个项目中,用到了时间轴展示产品的开发进度,为了更好用户体验,想到了Facebook的timeline效果, 搜了一 ...

  5. 整合MVVM框架(Prism)

    整合MVVM框架(Prism) 我们基础的框架已经搭建起来了,现在整合MVVM框架Prism,在ViewModel做一些逻辑处理,真正把界面设计分离出来. 这样方便我们系统开发分工合作,同时提高系统可 ...

  6. Archives for the category: Fisheye/Crucible

    Archives for the category: Fisheye/Crucible Introducing FishEye and Crucible 3.0 – Search, visualize ...

  7. 更快的memcpy

    更快的memcpy 写代码有时候和笃信宗教一样,一旦信仰崩溃,是最难受的事情.早年我读过云风的一篇<VC 对 memcpy 的优化>,以及<Efficiency geek 2: co ...

  8. mybatis 入门优化

    在上一节<mybatis快速入门>的基础上对IWebUserDao的实现类进行了优化,暂时命名为WebUserDaoMybatis2.java package com.mozi.dao.i ...

  9. PB导出规定格式DBF文件

    最近在做一个给卫计委做数据上报的数据接口,接口要求使用奇葩的dBase 3数据库存储上报数据,忙活了几天总算搞好了,使用开发工具为powerbuild 12,222个字段的上报数据表生成DBF文件,写 ...

  10. 在egret中使用protobuf

    原文章删除,重新使用MarkDown排版 在H5游戏领域,对于服务端与客户端的通信协议有一个选择,那就是使用protobuf.js.对于那些直接使用JavaScript开发的引擎而言,protobuf ...