​1.代码

<html>
 <head> 
  <script type="text/javascript" src="jquery-1.8.js"></script> 
  <script type="text/javascript" src="pictrue-con.js"></script> 
  <style>
            #pic1 {
                background-image:url(slide-cr.jpg);
                 
            }
             
            #pic2 {
                background-image:url(slide-jubula.jpg);
            }
             
            #pic3 {
                background-image:url(slide-orion.jpg);
            }
             
            #pic3,#pic2,#pic1{
                display:block;
                width:631;
                height:195;     
                 
                position:absolute;
            }
             
            #main{
                display:block;
                width:631;
                 
                position:relative;
                left:50%;
                 
                margin:0 -315px;
            }
             
            #select>div {
                 
                display:block;
                width:18px;
                height:25px;            
                margin-right:2px;
                 
                cursor:pointer;
                 
                float:left;
                overflow:hidden;
                background-image:url(hp-feature-sprite.png);
                background-attachment:scroll;
                background-repeat:no-repeat;
            }
             
            #c1 {
                background-position:0 -100px;
             
            }
             
            #c2 {
                background-position:0 -125px;
             
            }
             
            #c3 {
                background-position:0 -150px;
             
            }
             
            #select{                                
                position:absolute;
                 
                top:5;
                left:500;
                z-index:2;
                 
            }
             
        </style> 
 </head> 
 <body onload="start()"> 
  <div id="main"> 
   <div id="pictrue"> 
    <a id="pic1" href="#" tabindex="1"></a>    
    <a id="pic2" href="#" tabindex="2"></a>    
    <a id="pic3" href="#" tabindex="3"></a>    
   </div>
    
    <div id="select"> 
     <div id="c1" tabindex="1"></div> 
     <div id="c2" tabindex="2"></div> 
     <div id="c3" tabindex="3"></div> 
    </div>
  </div>  
 </body>
</html>
2.代码
$(document).ready(function() {
 
    var upPic = $("#pictrue>a").first(); // 上次显示的图片
    var nowPic; // 当前显示的图片
    var nowi = 1;
    var yy; //用来计算图片编号的位置
    var upPicNo = $("#select>div").first(); //上次显示的图片编号
    var nowPicNo; // 当前显示的图片编号
    var size;
 
    // 得到所要显示图片的数量
    size = $("#select>div").size();
     
    // 将除第一张图片以外的图片淡出,并初始化为第一张图片选中
    $("#pictrue>a:gt(0)").fadeOut("slow");
     
    // 第一张图片选中的同时图片编号以为选中
    upPicNo.css({
        "background-position": "0 -350"
    });http://www.huiyi8.com/ppt/​
        ppt素材
    // 当点击图号时,对应的图片就显示
    $("#select>div").click(function() {
        nowPicNo = $(this);
        nowi = nowPicNo.attr("tabindex");
        nowPic = $("#pictrue>a:eq("+(nowi-1)+")");
        if (!nowPic.is(':visible')) {
            pictrueChange(nowPic, nowPicNo);
        }
    });
 
    /**
                **
                */
    function pictrueChange(nowPic, nowPicNo) {
        //*************************************
        // 将上次选中的编号样式改回到未点击样式
        var upNo = upPic.attr("tabindex");
        yy = ( - 100 - (upNo - 1) * 25) + "px";
        upPicNo.css({
            "background-position": "0 " + yy
        });
 
        // 当前被点击图号的样式
        yy = ( - 350 - (nowi - 1) * 25) + "px";
        nowPicNo.css({
            "background-position": "0 " + yy
        });
        upPicNo = nowPicNo;
 
        upPic.fadeOut("slow");
        nowPic.fadeIn("slow");
        upPic = nowPic;
    };
 
    function autoPic() {
        nowi = nowi + 1;
        if (nowi <= size) {
            nowPic = $("#pictrue>a:eq("+(nowi-1)+")");
            nowPicNo = $("#select>div:eq("+(nowi-1)+")");
 
            pictrueChange(nowPic, nowPicNo);
        } else {
            nowi = 0;
        }
    }
 
    setInterval(autoPic, 3000);
 
    // 图片编号的数字样式
    $("#select>div").hover(function() {
        // 判断如果当前图号被选中时,就不更改当前图号的鼠标移入样式
        hoverFunction($(this), 225);
    },
    function() {
        // 判断如果当前图号被选中时,就不更改当前图号的鼠标移出样式
        hoverFunction($(this), 100);
    });
 
    /**
                **
                */
    function hoverFunction(picNumber, numLoc) {
        var oldCss = picNumber.css("background-position");
        oldCss = oldCss.substring(5, oldCss.length - 2);
 
        if (oldCss < 350) {
            yy = ( - numLoc - (picNumber.attr("tabindex") - 1) * 25) + "px";
            picNumber.css({
                "background-position": "0 " + yy
            });
        }
    }
 
    //$.extend({
    //  show:function(){
    //  alert("ready");
    //}
    //});
    //setInterval("show()",3000);   
});
​

JavaScript 图片广告自动与手动的切换的更多相关文章

  1. 广告banner：手动滑动切换，自动切换，点击跳转，异步加载网络图片

    效果图: 该banner功能有自动切换图片,点击图片可以自定义事件,手动滑动切换,异步加载图片 代码说话: 布局文件: <!-- 广告位 --> <FrameLayout andro ...

  2. JavaScript浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码

    基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...

  3. javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）

    类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...

  4. javascript图片切换

    JavaScript 图片滑动切换效果 作者:cloudgamer 时间: 2009-09-25 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript 图片滑动切换效果 [1] 第 2 页 ...

  5. javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）

    在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...

  6. JS图片自动或者手动滚动效果(支持left或者up)

    JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

  7. HTML 自动、手动切换轮播 from：金水

    .自动.手动切换轮播 body代码: <div id="tuijian"> <div class="pages" id="p1&qu ...

  8. jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换

    1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...

  9. javascript - 图片的幻灯片效果

    javascript 代码: <script type="text/javascript"> function select_play() { var select_p ...

随机推荐

  1. 大数据学习——yum安装tomcat

    https://www.cnblogs.com/jtlgb/p/5726161.html 安装tomcat6 yum install tomcat6 tomcat6-webapps tomcat6-a ...

  2. python005 Python3 注释

    Python3 注释确保对模块, 函数, 方法和行内注释使用正确的风格Python中的注释有单行注释和多行注释:Python中单行注释以 # 开头,例如:: # 这是一个注释 print(" ...

  3. 【ITOO 3】.NET 动态建库建表：实用EF框架提供的codeFirst实现动态建库

    导读:在上篇博客中,介绍了使用SQL字符拼接的方式,实现动态建库建表的方法.这样做虽然也能够实现效果,但是,太麻烦,而且,如果改动表结构,字段的话,会对代码修改很多.但是EF给我们提供了一种代码先行的 ...

  4. 『NYIST』第八届河南省ACM竞赛训练赛[正式赛一]CF-236B. Easy Number Challenge

    B. Easy Number Challenge time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  5. [HDU4417]Super Mario（主席树+离散化）

    传送门 又是一道主席树模板题,注意数组从0开始,还有主席树耗费空间很大,数组开大点,之前开小了莫名其妙TLE.QAQ ——代码 #include <cstdio> #include < ...

  6. vi/vim复制粘贴命令

    1. 选定文本块.使用v进入可视模式,移动光标键选定内容. 2.复制的命令是y,即yank(提起) ,常用的命令如下:     y      在使用v模式选定了某一块的时候,复制选定块到缓冲区用:   ...

  7. 《TCP/IP详解卷1：协议》——第6章 ICMP：Internet控制报文协议（转载）

    1.引言 ICMP被认为是IP层的一个组成部分,它传递差错报文以及其他需要注意的信息.ICMP报文通常被IP层或更高层协议(TCP或UDP)使用.一些ICMP报文把差错报文返回给用户进程. ICMP报 ...

  8. poj1523求割点以及割后连通分量数tarjan算法应用

    无向图,双向通道即可,tarjan算法简单应用.点u是割点,条件1:u是dfs树根,则u至少有2个孩子结点.||条件2:u不是根,dfn[u]=<low[v],v是u的孩子结点,而且每个这样的v ...

  9. 多硬盘分区管理fdisk

    原文:http://blog.fens.me/linux-fdisk/ ---------------------------------------------------------------- ...

  10. Python使用django搭建web开发环境

    安装 Python 去 Python 官方网站找到 Python 3 的下载地址,根据你的系统选择 32 位或者 64 位的安装包,下载好后双击安装即可. 检测是否安装完成 C:\WINDOWS\sy ...