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. 模拟vector

    实现了vector的模板,insert, erase, push_back, iterator #include<iostream> #include<string.h> #i ...

  2. oracle行转列和列转行

    目录[-] 一.行转列 1.1.初始测试数据 1.2. 如果需要实现如下的查询效果图: 1.3.延伸 二.列转行 1.1.初始测试数据 1.2. 如果需要实现如下的查询效果图: 一.行转列 1.1.初 ...

  3. 或许是python yield最好的答案 ？

    地址:http://pyzh.readthedocs.org/en/latest/the-python-yield-keyword-explained.html#yield 译者: hit9 原文: ...

  4. [Ioi2005]River

    设f[i][j][k]表示i上游最近的一个伐木场为j且在i所在的子树里共建了k个伐木场(不包含在i的)的最小运费和 设v为u的儿子,dist[u]为u到0号点的距离. 则当i>=j时 f[u][ ...

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

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

  6. Jackson将json字符串转换成List<JavaBean>

    Jackson处理一般的JavaBean和Json之间的转换只要使用ObjectMapper 对象的readValue和writeValueAsString两个方法就能实现.但是如果要转换复杂类型Co ...

  7. c语言里用结构体和指针函数实现面向对象思想

    一.基础研究 观察如下两个程序a.c和b.c: A.c: B.c: 这两个程序都是要实现在屏幕上第10行40列打印一个绿色的字符c: 这两个程序的数据组织方式是一样的,都是使用结构体,而且对共性和个性 ...

  8. Multiplication Table

    CF#256D:http://codeforces.com/contest/448/problem/D 题意:给你一个n*m的表格,第i行第j列的数据是i*j,然后询问第k小的数,这里的排序是不去重的 ...

  9. 十大免费移动程序测试框架(Android/iOS)

    十大免费移动程序测试框架(Android/iOS) 概述:本文将介绍10款免费移动程序测试框架,帮助开发人员简化测试流程,一起来看看吧. Bug是移动开发者最头痛的一大问题.不同于Web应用程序开发, ...

  10. HDU1565 方格取数(1)(状态压缩dp)

    题目链接. 分析: 说这题是状态压缩dp,其实不是,怎么说呢,题目数据太水了,所以就过了.手动输入n=20的情况,超时.正解是网络流,不太会. A这题时有个细节错了,是dp[i][j]还是dp[i][ ...