• JavaScript 图片广告自动与手动的切换



    ​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;
                    631;
                    height:195;     
                     
                    position:absolute;
                }
                 
                #main{
                    display:block;
                    631;
                     
                    position:relative;
                    left:50%;
                     
                    margin:0 -315px;
                }
                 
                #select>div {
                     
                    display:block;
                    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);   
    });

  • 相关阅读:
    暑假集训Day14 I (莫队)
    暑假集训Day14 G (gcd 数学)
    暑假集训Day13 H (进制转换 数学)
    暑假集训Day13 C (二分+贪心)
    暑假集训Day13 I (区间DP)
    暑假集训Day12 H (数论 STL)
    Java8中list转map方法总结
    Typora ---一款简洁的Markdown编辑器
    java8 map flatmap
    Elasticsearch基本查询总结
  • 原文地址:https://www.cnblogs.com/xkzy/p/3873425.html
Copyright © 2020-2023  润新知