公司有个技术很牛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. MYSQL 分表实践

    基本条件: 无索引 主表 test_0 数据:一百万条  数据库引擎 InnoDb 分表 test_1...test_100 数据 每张一万条,一共一百万条  数据库引擎 InnoDb 流程: 主表中 ...

  2. hibernate查询出的数据和数据库不一致

    之前直接使用hibernate的时候就出现过已经进行物理存储后的数据,查询不出来的情况,既然是已经存储后的数据,说明事务已经提交,想必问题出在查询时,查询的缓存,没有查询数据库.时有时无就很奇怪. 现 ...

  3. Machine Learning/Introducing Logistic Function

    Machine Learning/Introducing Logistic Function 打算写点关于Machine Learning的东西, 正好也在cnBlogs上新开了这个博客, 也就更新在 ...

  4. 设计模式：空对象模式（Null Object Pattern）

    设计模式:空对象模式(Null Object Pattern) 背景 群里聊到<ASP.NET设计模式>,这本书里有一个“Null Object Pattern”,大家就闲聊了一下这个模式 ...

  5. TCPDump 抓Loopback数据包

    编写网络程序必备截包工具, unix下面自带tcpdump, linux就不用说了.用于排查网络程序的bug,命令行如何使用请百度谷歌.分析包推荐wireshark,可视化非常方便.一般都是在非Win ...

  6. 推荐一个很好用的HTTP操作类

    /// <summary> /// 类说明:HttpHelps类,用来实现Http访问,Post或者Get方式的,直接访问,带Cookie的,带证书的等方式,可以设置代理 /// 重要提示 ...

  7. Yellow

    Yellow这首歌让我知道了yellow这个单词出了黄色的意思外,还有胆怯的,懦弱的意思~~~ 它是Coldplay 的歌曲,歌词很简单,但是有着莫名的忧伤感,值得一提的是这首歌的MV,一个长镜头给出 ...

  8. mpi和cuda混合编程的正确编译

    针对大数据的计算,很多程序通过搭建mpi集群进行加速,并取得了很好的效果.算法内部的加速,当前的并行化趋势是利用GPU显卡进行算法加速.针对并行性非常好的算法,GPU加速效果将远大于集群带来的加速效果 ...

  9. 基于Ajax的长轮询（long-polling）方式

    如 图 1 所示,AJAX 的出现使得 JavaScript 可以调用 XMLHttpRequest 对象发出 HTTP 请求,JavaScript 响应处理函数根据服务器返回的信息对 HTML 页面 ...

  10. .NET基础——数组

    这一篇,我们来看C#中的数组. 1. 数组的概念 数组:存储相同类型多个数据元素的容器 数组的声明和初始化: 在创建数组的时候,必须指定数组的长度 ]; ,, }; ] { , , };//数组元素的 ...