zoukankan      html  css  js  c++  java
  • jquery幻灯片、跑马灯,JS文件14KB

    今天公司要对网站首页的幻灯片做优化,原来的老版本是在是太大了,找了下参考资料
    http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html
    发现没有自动播放功能,只能自己动手补充他的jquery.slideviewer.1.2插件实现自动播放功能了
    幻灯片业务需求:
    1、无缝隙横向切换。
    2、切换按钮根据图片的数量动态加载。
    3、每隔n秒自动切换图片,切换按钮也随之切换。
    4、当鼠标停留在图片上时停止播放,鼠标移开继续播放。
    5、能记录用户点击的切换按钮,下一次直接切换到用户点击切换按钮的下一张(如图:现在是2,当我点4了以后下一次的自动切换就到1了)。6、图片要有链接,因为公司的是幻灯片广告。
    话不多说,直接上代码

    html
    =============================html开始================================
    <body>
        <div id="mygalone" class="svw">
            <ul>
                <li><a class="turn_round_ad" href="http://iplaydotnet.blog.163.com/blog/">
                    <img width="246" height="246" border="0" alt="abc defrg thysu ooip jkifbtg fff" src="http://iplaydotnet.blog.163.com/blog/common/2038186348_58925c20ca.jpg" /></a>
                </li>
                <li><a class="turn_round_ad" href="http://iplaydotnet.blog.163.com/blog/">
                    <img width="246" height="246" border="0" alt="abc defrg thysu ooip jkifbtg fff" src="http://iplaydotnet.blog.163.com/blog/common/2038186348_58925c20ca.jpg" /></a>
                </li>
                <li><a class="turn_round_ad" href="http://iplaydotnet.blog.163.com/blog/">
                    <img width="246" height="246" border="0" alt="abc defrg thysu ooip jkifbtg fff" src="http://iplaydotnet.blog.163.com/blog/common/2038186348_58925c20ca.jpg" /></a>
                </li>
                <li><a class="turn_round_ad" href="http://iplaydotnet.blog.163.com/blog/">
                    <img width="246" height="246" border="0" alt="abc defrg thysu ooip jkifbtg fff" src="http://iplaydotnet.blog.163.com/blog/common/2038186348_58925c20ca.jpg" /></a>
                </li>
                <!-- eccetera -->
            </ul>
        </div>
    </body>

    ============================html结束==================================



    css
    ============================css开始====================================

    /*preload classes*/
    .svw {246px; height: 246px; background: #fff;}
    .svw ul {position: relative; left: -999em;}

    /*core classes*/
    .stripViewer 
    {
     246px;
     height:246px;
    position: relative;
    overflow: hidden;
    }
    .stripViewer ul { /* this is your UL of images */
    margin: 0;
    padding: 0;
    position: relative;
    left: 0;
    top: 0;
    1%;
    list-style-type: none;
    }
    .stripViewer ul li {
    float:left;
    display:block;
    246px;
    height:246px;
    }
    .stripTransmitter {
    overflow: auto;
    1%;
    margin-top:-30px;
    }
    .stripTransmitter ul {
    margin: 0;
    padding: 0;
    position: relative;
    list-style-type: none;
    float:right;
    margin-right:10px;
    }
    .stripTransmitter ul li{
    float:left;
    margin: 0 1px 1px 0;
    }
    .stripTransmitter a{
    display:inline-block;
    font: bold 10px Verdana, Arial;
    text-align: center;
    background: #fff;
    font-size:10px;
    16px;
    height:16px;
    margin-top:2px;
    line-height:15px;
    color: #74a8ed;
    border:solid 1px #74a8ed;
    text-decoration: none;
    display: block;
    }
    .stripTransmitter a.ekuu:hover, a.current{
    background: #74a8ed;
    margin-top:0;
    20px;
    height:20px;
    line-height:20px;
    font-size:16px;
    font-weight:bold;
    border:solid 1px #fff;
    color: #fff;
    }

    /*tooltips formatting*/
    .tooltip
    {
    padding: 0.5em;
    background: #fff;
    color: #000;
    border: 5px solid #dedede;
    }
    a.turn_round_ad{display:inline-block;246px;height:246px;}
    a.turn_round_ad img{border:none;246px;height:246px;}============================css结束===================================



    jquery.slideviewer.1.2经过补充的版本
    ============================js开始====================================
    jQuery(function() {
        //jQuery("div.svw").prepend("<img src='http://common.nahuo.com/js/jqGalScroll/css/spinner.gif' class='ldrgif' alt='loading...'/ >");
    var str = $("#SlidePlayer .Slides li:first a img").attr("src");
    jQuery("div.svw").prepend("<img src='"+str+"' class='ldrgif' alt='loading...'/ >");
    });
    var goon = 1;
    var j = 0;
    var quantofamo = 0;
    jQuery.fn.slideView = function(settings) {
        settings = jQuery.extend({
            easeFunc: "easeInOutExpo",
            easeTime: 750,
            uiBefore: false,
            toolTip: false,
            ttOpacity: 0.9
        }, settings);
        return this.each(function() {
            var container = jQuery(this);
            container.find("img.ldrgif").remove();
            container.removeClass("svw").addClass("stripViewer");
            var pictWidth = 246;
    //        container.find("img").width();
    //        var pictHeight = container.find("img").height();
            var pictEls = container.find("li").size();
            var stripViewerWidth = pictWidth * pictEls;
            container.find("ul").css("width", stripViewerWidth);
    //        container.css("width", pictWidth);
    //        container.css("height", pictHeight);
            container.each(function(i) {
                (!settings.uiBefore) ? jQuery(this).after("<div class='stripTransmitter' id='stripTransmitter" + (j) + "'><ul><\/ul><\/div>") : jQuery(this).before("<div class='stripTransmitter' id='stripTransmitter" + (j) + "'><ul><\/ul><\/div>");
                jQuery(this).find("li").each(function(n) {
                    jQuery("div#stripTransmitter" + j + " ul").append("<li><a class='ekuu' title='" + jQuery(this).find("img").attr("alt") + "' href='#'>" + (n + 1) + "<\/a><\/li>");
                });
                jQuery("div#stripTransmitter" + j + " a.ekuu").each(function(z) {
                    jQuery(this).bind("click", function() {
                        goon = z;
                        jQuery(this).addClass("current").parent().parent().find("a.ekuu").not(jQuery(this)).removeClass("current"); // wow!
                        var cnt = -(pictWidth * z);
                        container.find("ul").animate({ left: cnt }, settings.easeTime, settings.easeFunc);
                        return false;
                    });
                });
                //  container.bind("click", function(e){
                //   var ui = (!settings.uiBefore) ? jQuery(this).next().find("a.current") : jQuery(this).prev().find("a.current");
                //   var bTotal = parseFloat(jQuery(this).css('borderLeftWidth').replace("px", "")) +  parseFloat(jQuery(this).css('borderRightWidth').replace("px", ""));
                //   var dOs = jQuery(this).offset();
                //   var zeroLeft = (bTotal/2 + pictWidth) - (e.pageX - dOs.left);
                //   if(zeroLeft >= pictWidth/2) {
                //    var uiprev = ui.parent().prev().find("a"); 
                //    (jQuery(uiprev).length != 0)? uiprev.trigger("click") : ui.parent().parent().find("a:last").trigger("click");       
                //   }
                //   else {
                //    var uinext = ui.parent().next().find("a");
                //     (jQuery(uinext).length != 0)? uinext.trigger("click") : ui.parent().parent().find("a:first").trigger("click");
                //   }
                //  });
                jQuery("div#stripTransmitter" + j).css("width", pictWidth);
                jQuery("div#stripTransmitter" + j + " a.ekuu:first").addClass("current");
                jQuery('body').append('<div class="tooltip" style="display:none;"><\/div>');
                if (settings.toolTip) {
                    var aref = jQuery("div#stripTransmitter" + j + " a,ekuu");
                    aref.live('mousemove', function(e) {
                        var att = jQuery(this).attr('title');
                        posX = e.pageX + 10;
                        posY = e.pageY + 10;
                        jQuery('.tooltip').html(att).css({ 'position': 'absolute', 'top': posY + 'px', 'left': posX + 'px', 'display': 'block', 'opacity': settings.ttOpacity });
                    });
                    aref.live('mouseout', function() {
                        jQuery('.tooltip').hide();
                    });
                }
                var myad = new Array();
                var is_turn_round = true;
                jQuery(".stripTransmitter ul li").each(function(index, dom) {
                    myad[index] = jQuery(this).find("a.ekuu");
                });
                jQuery("#SlidePlayer .turn_round_ad").hover(function() {
                    is_turn_round = false;
                }, function() {
                    is_turn_round = true;
                });
                ldy();
                function ldy() {
                    if (is_turn_round) {
                        timer();
                    }
                    setTimeout(ldy, 3000);
                }
                function timer() {
                    if (goon >= myad.length) {
                        goon = 0;
                    }
                    myad[goon].click();
                    myad[goon].addClass("current").parent().parent().find("a.ekuu").not(myad[goon]).removeClass("current");
                    goon++;
                }
            });
            j++;
        });
    };

    ============================js结束===================================

    如何使用:
    放在<head>之间
    <script type="text/javascript">
            $(window).bind("load", function() {
                $("div#mygalone").slideView()
            });
    </script>

    更多功能:
    请查阅文章开头的网址

    保存下面的这张不能显示出来的图片更改后缀名为rar可下载修改后的预览源码

  • 相关阅读:
    Node 修改默认镜像源
    Mac下apache虚拟主机配置
    Grep命令出现 Binary file (standard input) matches
    idea取出方法参数提示
    Java8 Optional用法
    Codeforces Round #638 (Div. 2)
    Codeforces Round #637 (Div. 2)
    Codeforces Round #636 (Div. 3)
    Tree
    Educational Codeforces Round 85
  • 原文地址:https://www.cnblogs.com/ahjesus/p/1998640.html
Copyright © 2011-2022 走看看