首页 › Discuz交流（有问必答） › 关于jquery的调用

1065D 发表于 2014-11-7 11:35:23

关于jquery的调用

求助

技术帮助 发表于 2014-11-7 12:50:25

本帖最后由 技术帮助 于 2014-11-7 14:57 编辑

把以下代码复制到DIY模板里面
已经修复！
<style type="text/css">
      /* slide */
      .slide{width:980px;height:653px;overflow:hidden;margin:0 auto;background:#000;border-top:1px solid #d21bd4}
      .slide_box{width:244px;height:653px;overflow:hidden;position:relative;float:left;border-right:1px solid #999;cursor:pointer;background-repeat:no-repeat}
      .slide_box.last{border-right-width:0}
      .slide .bg1 .navbox{width:244px}
      .slide #box_1{position:absolute;left:0;bottom:0}
      .slide #box_1 .navtitle{width:244px;height:45px;line-height:45px;overflow:hidden;font-size:20px;text-align:center}
      .slide #box_1 .navsumary{padding:10px;margin-bottom:3px;font-size:12px;line-height:26px}
      .slide #box_2{position:absolute;left:0;bottom:45px}.slide #box_2 .navtitle{width:244px;height:45px;line-height:45px;overflow:hidden;font-size:20px;text-align:center}
      .slide #box_2 .navsumary{padding:10px;margin-bottom:3px;font-size:12px;line-height:26px}
      .slide #box_3{position:absolute;left:0;bottom:90px}
      .slide #box_3 .navtitle{width:244px;height:45px;line-height:45px;overflow:hidden;font-size:20px;text-align:center}
      .slide #box_3 .navsumary{padding:10px;margin-bottom:3px;font-size:12px;line-height:26px}
      .slide #box_4{position:absolute;left:0;bottom:45px}
      .slide #box_4 .navtitle{width:244px;height:45px;line-height:45px;overflow:hidden;font-size:20px;text-align:center}
      .slide #box_4 .navsumary{padding:10px;margin-bottom:3px;font-size:12px;line-height:26px}
      .slide .navbox .navsumary{color:#fff;display:none;padding:10px}
      .navtitle img{display:none}
      .slide .navbox .navtitle a,.slide .navbox .navtitle a:link,.slide .navbox .navtitle a:visited{color:#fff;text-decoration:none}
      .slide .navbox .navtitle a:hover{color:#fff;text-decoration:underline}
      .slide .navtitle,.slide .navsumary{position:relative}
      .slide div.bg{position:absolute;width:100%;height:100%;z-index:1;left:0;top:0}
      .slide div.txt{position:relative;z-index:2}
      .slide div.bg{filter:alpha(opacity=60);opacity:.6}
      .slide #box_1 div.bg{background-color:#00ffea}
      .slide #box_2 div.bg{background-color:#9d9d9d}
      .slide #box_3 div.bg{background-color:#c020e8}
      .slide #box_4 div.bg{background-color:#e4ff00}
      .more{position:absolute;right:30px;top:500px;font-size:18px;color:#fff;}
      .more a:link,.more a:visited{color:#fff;}
</style>

      <!-->
      <style type="text/css">
      .slide #box_1 .navsumary,.slide #box_2 .navsumary,.slide #box_3 .navsumary,.slide #box_4 .navsumary,.slide .navbox .navsumary{padding:0;width:244px;height:90px;overflow:hidden}
      .slide .navsumary div.txt{padding:10px;width:224px;}
      </style>
      <!-->
      <script type="text/javascript" src="dz7comcn/js/jquery-1.4.2.min.js"></script>
       <script type="text/javascript">
                jQuery(function(){
                        // 幻灯片图片滑动
                        jQuery("html,body").animate({scrollTop:jQuery("#slide").offset().top},800);
                        var a =0;
                        jQuery("#slide>.slide_box").click(function(){
                                var a = jQuery(this).find(".navbox>.navtitle a").attr("href");
                                window.open(a);
                                return !1
                        }),
                        jQuery("#slide>.slide_box").mouseover(function(){
                                var b =jQuery(this).index();
                                if(b!= a){
                                        jQuery("#slide .navsumary").hide();
                                        jQuery(this).find(".navbox>.navsumary").show();
                                        var c = "bg" + (b + 1);
                                        b < a && (jQuery.browser.msie?(
                                                jQuery(".slide_box").stop().animate({backgroundPositionX: "980px"}, 0).removeClass("bg1 bg2 bg3 bg4").addClass(c),
                                                jQuery("#box_1").parent().stop().animate({backgroundPositionX: "0"}, 100),
                                                jQuery("#box_2").parent().stop().animate({backgroundPositionX:"-245px"},200),
                                                jQuery("#box_3").parent().stop().animate({backgroundPositionX: "-490px"},300),
                                                jQuery("#box_4").parent().stop().animate({backgroundPositionX: "-735px"},400,
                                                function(){
                                                        jQuery(".slide_box,#slide").removeClass("bg1 bg2 bg3 bg4").addClass(c);
                                                }
                                        )):(
                                                jQuery(".slide_box").stop().animate({backgroundPosition:"980px 0"},0).removeClass("bg1 bg2 bg3 bg4").addClass(c),
                                                jQuery("#box_1").parent().stop().animate({backgroundPosition:"0 0"},100),
                                                jQuery("#box_2").parent().stop().animate({backgroundPosition:"-245px 0"},200),
                                                jQuery("#box_3").parent().stop().animate({backgroundPosition:"-490px 0"},300),
                                                jQuery("#box_4").parent().stop().animate({backgroundPosition: "-735px 0"},400,
                                                function(){
                                                        jQuery(".slide_box,#slide").removeClass("bg1 bg2 bg3 bg4").addClass(c)
                                                }
                                        )), a = b),b > a &&(jQuery.browser.msie?(
                                                jQuery(".slide_box").stop().animate({backgroundPositionX: "-980px" },0).removeClass("bg1 bg2 bg3 bg4").addClass(c),
                                                jQuery("#box_1").stop().parent().animate({backgroundPositionX:"0"},400,
                                                        function(){
                                                                jQuery(".slide_box,#slide").removeClass("bg1 bg2 bg3 bg4").addClass(c)
                                                        }
                                                ),
                                                jQuery("#box_2").parent().stop().animate({ backgroundPositionX: "-245px" }, 300),
                                                jQuery("#box_3").parent().stop().animate({backgroundPositionX: "-490px"}, 200),
                                                jQuery("#box_4").parent().stop().animate({backgroundPositionX: "-735px"}, 100)):(jQuery(".slide_box").stop().animate({backgroundPosition:"-980px 0"},0).removeClass("bg1 bg2 bg3 bg4").addClass(c),
                                                jQuery("#box_1").stop().parent().animate({backgroundPosition:"0 0"},400,
                                                        function(){
                                                                jQuery(".slide_box,#slide").removeClass("bg1 bg2 bg3 bg4").addClass(c)
                                                        }
                                                ),
                                                jQuery("#box_2").parent().stop().animate({backgroundPosition:"-245px 0"}, 300),
                                                jQuery("#box_3").parent().stop().animate({backgroundPosition:"-490px 0"},200),
                                                jQuery("#box_4").parent().stop().animate({backgroundPosition: "-735px 0"},100)
                                        ), a = b)
                                }
                        });
                               
                });

      </script>
      <div class="slide clearfix bg1" id="slide">
                <div class="slide_box bg1" style="background-position:0 0;">
                        
                                                <style>
                                               .bg1{background-image:url({pic})}
                                                </style>
                        <div id="box_1" class="navbox">
                              <div class="navsumary" style="display:block">
                                        <div class="bg"></div>
                                        <div class="txt">{title}</div>
                              </div>
                              <div class="navtitle">
                                        <div class="bg"></div>
                                        <div class="txt"><a href="{url}"><img src="{pic}" alt="{title}" />{title}</a></div>
                              </div>
                        </div>
                        
                </div>
               
                <div class="slide_box bg1" style="background-position:-245px 0;">
                        
                                                <style>
                                               .bg2{background-image:url({pic})}
                                                </style>
                        <div id="box_2" class="navbox">
                              <div class="navsumary">
                                        <div class="bg"></div>
                                        <div class="txt">{title}</div>
                              </div>
                              <div class="navtitle">
                                        <div class="bg"></div>
                                        <div class="txt"><a href="{url}"><img src="{pic}" alt="{title}" />{title}</a></div>
                              </div>
                        </div>
                        
                </div>
               
                <div class="slide_box bg1" style="background-position:-490px 0;">
                        
                                                <style>
                                               .bg3{background-image:url({pic})}
                                                </style>
                        <div id="box_3" class="navbox">
                              <div class="navsumary">
                                        <div class="bg"></div>
                                        <div class="txt">{title}</div>
                              </div>
                              <div class="navtitle">
                                        <div class="bg"></div>
                                        <div class="txt"><a href="{url}"><img src="{pic}" alt="{title}" />{title}</a></div>
                              </div>
                        </div>
                        
                </div>
               
                <div class="slide_box bg1 last" style="background-position:-735px 0;">
                        
                                                <style>
                                               .bg4{background-image:url({pic})}
                                                </style>
                        <div id="box_4" class="navbox">
                              <div class="navsumary">
                                        <div class="bg"></div>
                                        <div class="txt">{title}</div>
                              </div>
                              <div class="navtitle">
                                        <div class="bg"></div>
                                        <div class="txt"><a href="{url}"><img src="{pic}" alt="{title}" />{title}</a></div>
                              </div>
                        </div>
                        
                </div>
      </div><!--slide end-->



然后把附件下载后解压，将dz7comcn文件夹上传至网站根目录即可实现对应的效果！


具体操作流程可以参照教程
http://www.dz7.com.cn/dz7article-14-1.html

1065D 发表于 2014-11-7 13:57:40

技术帮助 发表于 2014-11-7 12:50
把以下代码复制到DIY模板里面

然后把附件下载后解压，将dz7comcn文件夹上传至网站根目录即可实现对应的 ...

您好，我的弄完之后是这个样子的。


图片在哪呀。。那个diy模板就是index吗？

技术帮助 发表于 2014-11-7 14:56:03

之前代码有错误，已经修改!重新复制测试一下！效果截图：

1065D 发表于 2014-11-7 19:03:21

技术帮助 发表于 2014-11-7 14:56
之前代码有错误，已经修改!重新复制测试一下！效果截图：

还是那个样子啊，图片的位置在哪？

技术帮助 发表于 2014-11-9 23:37:19

1065D 发表于 2014-11-7 19:03
还是那个样子啊，图片的位置在哪？

每一段循环，就会生成对应的背景图片！

查看完整版本: 关于jquery的调用