jquery实现图片切换：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

  <title></title>

  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

  <script>

    $(function(){

        var num2=6;//用于设置当前选中ol li的z-index值

        $('ol li').mouseover(function(e){

            $(this).attr('class','current');

            $(this).siblings().attr('class','');

            num2++;

            var num=$(this).index();//存ol li的序列号

            $('ul li').eq(num).css('z-index',num2);

            $('ul li').eq(num).css('left','600px');//修改ul li对应的序列号的样式,先把它的位置绝对定位到div外面

            //$('ul li').eq(num).css('left','0');这句是静态css,下一句是动态css

            $('ul li').eq(num).animate({left:'0'},50);//然后把它的位置又重新绝对定位到父元素上面  这样就实现了一个动画的效果

        });

    });

  </script>

  <style>

    *{

        padding:0;margin:0;border:0;

    }

    .all{/*div的宽高设置成和五张图片的宽高一样*/

        width:600px;

        height:300px;

        margin:100px auto;/*div居中*/

        position:relative;/*相对定位，便于子元素使用绝对定位*/

        overflow:hidden;/*隐藏超出部分的图片*/

    }

    .all ul{

        position:relative;

        z-index:1;

    }

    .all ul li{

        position:absolute;

        left:0;

        top:0;

    }

    .all ol{

        position:absolute;

        z-index:2;/*显示在ul上面*/

        right:10px;

        bottom:10px;

    }

    .all ol li{

        width:20px;

        height:20px;

        background:#333;

        border:1px solid #ccc;

        font-weight:bold;

        text-align:center;/*左右居中*/

        line-height:20px;/*文本上下居中*/

        float:left;

        list-style:none;

        margin-left:10px;

        color:#ccc;

        margin-top:10px;/*让放大的li和没有放大的li下边框对其*/

    }

    .all ol .current{

        width:30px;

        height:30px;

        line-height:30px;

        border:1px solid #f60;

        color:#f60;

        margin-top:0;/*让放大的li和没有放大的li下边框对其*/

        cursor:pointer;/*增强用户体验 变小手*/

    }

  </style>

 </head>

 <body>

  <div class="all">

    <ul>

        <li><img src="01.jpg" width="600" height="300"/></li>

        <li><img src="02.jpg" width="600" height="300"/></li>

        <li><img src="03.jpg" width="600" height="300"/></li>

        <li><img src="04.jpg" width="600" height="300"/></li>

        <li><img src="05.jpg" width="600" height="300"/></li>

    </ul>

    <ol>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li class="current">5</li>

    </ol>

  </div>

 </body>

</html>

javascript实现图片切换：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

  <title></title>

  <style>

    *{

        margin:0;

        padding:0;

    }

    .all{

        width:600px;

        height:350px;

        position:relative;

        overflow:hidden;

        margin:100px auto;

    }

    .all ul{

        z-index:1;

        position:relative;

    }

    .all ul li{

        position:absolute;

        top:0;

        left:0;

    }

    .all ol{

        position:absolute;

        right:10px;

        bottom:10px;

        z-index:2;

    }

    .all ol li{

        width:20px;

        height:20px;

        border:1px solid #fff;

        background-color:#333;

        float:left;

        overflow:hidden;

        margin-right:10px;

        text-align:center;

        line-height:20px;

        color:#fff;

        margin-top:10px;

        font-weight:bold;

    }

    .all ol .current{

        width:30px;

        height:30px;

        border:1px solid #f60;

        color:#f60;

        line-height:30px;

        margin-top:0;

        cursor:pointer;

    }

  </style>

  <script>

    //通过id值获得元素的函数

    function $(id){

        return document.getElementById(id);

    }

    //初始化函数

    function initial(){

        olLi=document.getElementsByTagName('ol')[0].getElementsByTagName('li');//获取ol下的li

        ol=$('tab');//获取ol元素

        theImg=$('theImg');

        //五张图片的地址

        addressPic=['01.jpg','02.jpg','03.jpg','04.jpg','05.jpg'];

        //遍历ol下的li

        for(var i=0;i<olLi.length;i++){

            //依次给每个li绑定mouseover事件,该事件执行切换图片的函数

            olLi[i].addEventListener('mouseover',changePicture,false);

            olLi[i].index=i;//设置ol li的index序列号

        }

    }

    //切换图片

    function changePicture(e){

        e.target.className="current";//将选中的ol下的li的class属性设置为current,e.target代表选中的li

        //清除ol里的空白节点

        cleanWhitespace(ol);

        //删除除当前选中的li外其他li的class属性值

        nextNode=e.target.nextSibling;//当前节点的下一个节点

        lastNode=e.target.previousSibling;//当前节点的前一个节点

        while(nextNode){//将当前节点后所有的兄弟节点的class属性清除

            nextNode.setAttribute('class','');

            nextNode=nextNode.nextSibling;

        }

        while(lastNode){//将当前节点前面所有的兄弟节点的class属性清除

            lastNode.className='';

            lastNode=lastNode.previousSibling;

        }

        //实现切换图片的功能

        theImg.src=addressPic[this.index];

    }

    //清除ol下的空白节点

    function cleanWhitespace(oElement)

    {

        for(var i=0;i<oElement.childNodes.length;i++){

            var node=oElement.childNodes[i];

            if(node.nodeType==3 && !/\S/.test(node.nodeValue)){

                 node.parentNode.removeChild(node)

            }

    }

}

    //给窗体绑定load事件，执行初始化函数initial()

    window.addEventListener('load',initial,false);

  </script>

 </head>

 <body>

  <div class="all">

    <ul>

        <li><img id="theImg" src="01.jpg" width="600px" height="350px"/></li>

    </ul>

    <ol id="tab">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li class="current">5</li>

    </ol>

  </div>

 </body>

</html>

jquery实现图片切换和js实现图片切换的更多相关文章

  1. jquery插件lazyload.js延迟加载图片的使用方法

    如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过 ...

  2. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  4. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  5. 前端设计——js实现图片切换的淡入淡出

    1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...

  6. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  7. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  8. chromedriver禁用图片，禁用js，切换UA

    selenium 模拟chrome浏览器,此时就是一个真实的浏览器,一个浏览器该加载的该渲染的它都加载都渲染,所以爬取网页的速度很慢.如果可以不加载图片等操作,网页加载速度就会快不少,代码中列出了了禁 ...

  9. JQuery缓冲加载图片插件lazyload.js的使用方法

    lazyload.js是一个基于JQuery的插件,可以用来缓冲加载图片.如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动 ...

随机推荐

  1. 各种开源协议介绍 BSD、Apache Licence、GPL V2 、GPL V3 、LGPL、MIT

    现今存在的开源协议很多,而经过Open Source Initiative组织通过批准的开源协议目前有58种(http://www.opensource.org/licenses /alphabeti ...

  2. java web 学习(1)

    java web 应用的核心技术包括以下几个方面: jsp:进行输入和输出的基本手段 javabean:完成功能的处理 servlet:对应用的流程进行控制 jdbc:是与数据库进行交互不可缺少的技术 ...

  3. Extjs之rowEditing编辑状态时列不对齐

    Extjs在使用rowEditing的时候,会在每一列加上editor属性,表示当处于编辑状态时这一列的值是什么类型的,后突然发现在rowEditing处于编辑状态时每一列的宽度边框了,如果列数非常多 ...

  4. 关于Python文档读取UTF-8编码文件问题

    近来接到一个小项目,读取目标文件中每一行url,并逐个请求url,拿到想要的数据. #-*- coding:utf-8 -*- class IpUrlManager(object): def __in ...

  5. python:UnboundLocalError: local variable 'xxx' referenced before assignment

    近来一直都在学习python语言,偶然在伯乐在线看到2017年京东C/C++的面试题.就打算用python+ST3 IDE顺便敲下面试题代码. 原题 C语言: #include <stdio.h ...

  6. JS键盘的键码(event.keyCode)

    keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 ...

  7. 关于Chrome（谷歌浏览器）对docume,准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top

    对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途.今天在ext中看到 document.compatMode的使用,感觉这个对于我们开发兼容性的 ...

  8. window.location.href/replace/reload()--页面跳转+替换+刷新

    一.最外层top跳转页面,适合用于iframe框架集 top.window.location.href("${pageContext.request.contextPath}/Login_g ...

  9. Kafka笔记--指定消息的partition规则

    参数的设定:参考资料 不错的资料:http://blog.csdn.net/honglei915/article/details/37697655 http://developer.51cto.com ...

  10. 实验三：gdb跟踪调试内核从start_kernel到init进程启动

    原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 如果我写的不好或者有误的地方请留言 ...