公司有个技术很牛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. Effective C++ 读书总结

    (中文第三版 侯捷 译) 这本书在C++领域也是大名鼎鼎,在微博看到有人说,如果以前学过C语言,那只需花一天时间把 Effective C++ 看一遍,然后再看 leveldb代码(http://t. ...

  2. 企业架构研究总结（34）——TOGAF架构内容框架之架构制品（下）

    4.2.31 数据生命周期图(Data Lifecycle Diagram) 数据生命周期图是在业务流程的约束之下对业务数据在其整个生命周期(从概念阶段到最终退出)中对其进行管理的核心部分.数据从本质 ...

  3. IOS学习之路八（GCD与多线程）

    GCD,全称Grand Central Dispath,是苹果开发的一种支持并行操作的机制.它的主要部件是一个FIFO队列和一个线程池,前者用来添加任务,后者用来执行任务. GCD中的FIFO队列称为 ...

  4. 迷你MVVM框架 avalonjs 0.85发布

    迷你MVVM框架 avalonjs 0.85发布 本版本对循环绑定做了巨大改进,感谢@soom, @limodou, @ztz, @Gaubee 提供的大量测试文件. fix scanNodes, 在 ...

  5. VMware vSphere 服务器虚拟化之二十四 桌面虚拟化之手动池管理物理机

    VMware vSphere 服务器虚拟化之二十四 桌面虚拟化之手动池管理物理机 VMwareView手动池可以管理物理计算机 说明: 环境基于实验二十三 1.准备一台Windows 7的物理计算机名 ...

  6. 工作流--JBPM核心服务及表结构

    一.      使用JBPM开发工作流的一般流程 1.       jBPM的运行需要数据库的支持,因此系统设计时要选定所用数据库.只要是Hibernate支持的数据库,jBPM就支持.数据库的初始化 ...

  7. 【.net 深呼吸】细说CodeDom（9）：动态编译

    知道了如果构建代码文档,知道了如何生成代码,那么编译程序集就很简单了. CodeDomProvider 类提供了三个可以执行编译的方法: 1.CompileAssemblyFromSource——这个 ...

  8. 【转】简单十步让你全面理解SQL

    简单十步让你全面理解SQL 很多程序员认为SQL是一头难以驯服的野兽.它是为数不多的声明性语言之一,也因为这样,其展示了完全不同于其他的表现形式.命令式语言. 面向对象语言甚至函数式编程语言(虽然有些 ...

  9. 开发人员如何上google查资源，如果浏览国外资源方法

    启动浏览器后15秒左右,浏览器的右上角就会出现图标 启用防火墙功能(右上角墙形图标),这时候程序就会去寻找网上代理,从而达到访问GOOGLE的效果,提示如果不访问google网站,可再点击一下关闭防火 ...

  10. 【Zookeeper】源码分析之Watcher机制（一）

    一.前言 前面已经分析了Zookeeper持久话相关的类,下面接着分析Zookeeper中的Watcher机制所涉及到的类. 二.总体框图 对于Watcher机制而言,主要涉及的类主要如下. 说明: ...