公司有个技术很牛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. iOS使用自定义字体的方法(内置和任意下载ttf\otf\ttc字体文件)

    最近做了个有关阅读的应用,使用了自定义字体,学习了一下这方面的知识. 1.首先是最简单也普遍的做法,打包内置字符库文件: 把字体库文件添加到工程,如font1.ttf添加到工程,然后在工程plist添 ...

  2. Asycn/Await 异步编程初窥

    经过两天密集型的学习,翻阅了大量 webpages ,点击了不少重点 blogs,总算基本了解了一些 async/await 搭配使用的入门技巧,总结一下 1. async/await 应该只是语法上 ...

  3. 对象转Json序列化

    C#--对象转Json序列化 前言 最近在研究Android项目,其中涉及到Android中解析Json数据的问题,需要模拟网络中传递Json数据的模式,因为以前是.net的工程师,所以想着从.net ...

  4. 【Oracle】-【体系结构】-【DBWR】-DBWR进程相关理解

    对DBWR的一些理解 首先从名称上,DBWR全称是Database Writer Process,属于Oracle后台进程的一种,有的地方也叫DBWn,我想这里是出于DBWR进程个数的原因,DBWR进 ...

  5. POJ 3342 - Party at Hali-Bula 树型DP+最优解唯一性判断

    好久没写树型dp了...以前都是先找到叶子节点.用队列维护来做的...这次学着vector动态数组+DFS回朔的方法..感觉思路更加的清晰... 关于题目的第一问...能邀请到的最多人数..so ea ...

  6. Jenkins+PMD构建自动化静态代码检测

    前言:软件缺陷是不可避免的,要尽量减少错误并提高软件质量,主要有两在类技术,即缺陷预防和缺陷检测 缺陷预防包括编写更好的设计规范.实施代码审核制度.运行代码静态分析工具.运行单元测试等 PMD是一种开 ...

  7. Android消息推送之GCM方式（一）

    <声明> 转载请保留本来源地址: http://blog.csdn.net/wzg_1987/article/details/9140371 首先,你需要使用一个谷歌账号登录谷歌Api控制 ...

  8. oracle-计算工作日

    数据库模拟表如下 operate_id operate_type operate_date process_sn 1 GD 2013-09-15 17:18:37 10001 2 JD 2013-09 ...

  9. iOS GCD中级篇 - dispatch_group

    1.关于dispatch_group 把一组任务提交到队列中,这些队列可以不相关,然后监听这组任务完成的事件. 最常见的几个方法: 1.dispatch_group_create创建一个调度任务组 2 ...

  10. java字节码指令集

    字节码指令集 Java虚拟机的指令由一个字节长度的.代表着某种特定操作含义的操作码(Opcode)以及跟随其后的零至多个代表此操作所需参数的操作数(Operands)所构成. 对于大部分为与数据类型相 ...