公司有个技术很牛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. [转]Adventures in Xen exploitation

    Source:https://www.nccgroup.com/en/blog/2015/02/adventures-in-xen-exploitation/   tl;dr This post is ...

  2. IOS使用不同父类的 view 进行约束

    最终效果图如下: 很多限制条件都已经应用到了视图中,我们在解释一下: ·在我们的视图控制器的主视图中有两个灰色的视图.两个视图距视图控制器的视图左 边和右边都有一个标准的空白距离.视图的顶部距顶部的视 ...

  3. cocos2d-x 实现跨平台的目录遍历

    可能各位看官们有更好的方法,请不吝赐教. #ifdef _WIN32 #include <io.h> #else #include <unistd.h> #include &l ...

  4. （转）JS中公共/私有变量和方法

    私有变量 在对象内部使用'var'关键字来声明,而且它只能被私有函数和特权方法访问. 私有函数 在对象的构造函数里声明(或者是通过var functionName=function(){...}来定义 ...

  5. 什么是Numpy的ndarray

    什么是Numpy的ndarray 首先,Numpy的核心是ndarray. 然后,ndarray本质是数组,其不同于一般的数组,或者Python 的list的地方在于它可以有N 维(dimention ...

  6. Morn简介及使用教程

    [Morn UI系列教程]Morn简介及使用教程 网页游戏开发的一大部分工作是在和UI制作上,一个好的工具及框架能使开发事半功倍,Adobe自带flash IDE和Flex各有不足. Morn UI学 ...

  7. 如何使用Add-on SDK开发一个自己的火狐扩展

    黄聪:如何使用Add-on SDK开发一个自己的火狐扩展 火狐开放了扩展的开发权限给程序员们,相信很多人都会希望自己做一些扩展来方便一些使用. 我最近做一些项目也需要开发一个火狐扩展,方便收集自己需要 ...

  8. TFS体系结构和概念

    TFS体系结构和概念 TFS是Team Fundation Server的简称,是微软VSTS的一部分,它是Microsoft应用程序生命周期管理(ALM)工具的核心协作平台,简单的说它是管理和开发软 ...

  9. java微信平台，发源码

    最近写了一个微信平台的架构,采用servlet + spring3.0 + hibernate4.1.整体架构由我负责建设,我尽可能的把业务模块分出来.趁着刚搭好的框架,留着这版.代码是大部份都由其他 ...

  10. continue与break

    1.continue语句,1至20内奇数累加和 #include<iostream> using namespace std; void main(){ int i=0; int sum= ...