自编JQuery插件第十二个:水平滚动图片

最新推荐文章于 2024-05-20 22:38:25 发布

chinet_bridge

最新推荐文章于 2024-05-20 22:38:25 发布

阅读量705

点赞数

分类专栏：滚动图片文章标签： jquery插件 function class border html javascript

本文链接：https://blog.csdn.net/chinet_bridge/article/details/6965117

版权

滚动图片专栏收录该内容

5 篇文章 1 订阅

订阅专栏

水平滚动图片效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" >
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<SCRIPT language=javascript src="jquery-1.6.js" 
type=text/javascript></SCRIPT>
<style  type="text/css" >
.margin_18 {
	MARGIN-RIGHT: 18px
}
#runbox {
	DISPLAY: block; OVERFLOW: hidden; WIDTH: 618px; HEIGHT: 87px
}
#runboxpic {
	FLOAT: left; HEIGHT: 87px
}
#runboxpic A {
	DISPLAY: block; FLOAT: left
}
.bold {
	FONT-WEIGHT: bold
}
#runactbox {
	DISPLAY: block; OVERFLOW: hidden; WIDTH: 873px; HEIGHT: 156px
}
img{ border:0px;}
div{ margin:1px;}
</style>
<BODY>
<TABLE class=hd_bg cellSpacing=0 cellPadding=0 width="100%" align=center 
border=0>
  <TBODY>
    <TR vAlign=top>
      <TD><TABLE style="MARGIN-TOP: 36px; MARGIN-BOTTOM: 23px" cellSpacing=0 
      cellPadding=0 width=1099 align=center border=0>
          <TBODY>
            <TR>
              <TD><TABLE style="MARGIN-TOP: 20px; MARGIN-BOTTOM: 10px" 
                  cellSpacing=0 cellPadding=0 width=943 border=0>
                  <TBODY>
                    <TR>
                      <TD vAlign=top width=35><IMG class=hand id=runleftbtn 
                        style="MARGIN-TOP: 40px" height=26 
                        src="http://www.33fly.com/University/images/hd_30.gif" width=18></TD>
                      <TD class=hd_img vAlign=top width=873><DIV id=runactbox>
                          <DIV id=runboxpic>
                            <DL class=margin_18>
                              <DT><A title=333 
                          href="http://www.33fly.com/University/Team/Actview.aspx?aid=6" 
                          target=_blank><IMG height=100 
                           
                          src="http://www.33fly.com/University/Team/photo/2011531140458.jpg" width=154 
                          ></A>
                              <DD><A class=orange1 
                          href="http://www.33fly.com/University/Team/Actview.aspx?aid=6" 
                          target=_blank></A></DD>
                            </DL>
                            <DL class=margin_18>
                              <DT><A title=55555555555 
                          href="http://www.33fly.com/University/Team/Actview.aspx?aid=8" 
                          target=_blank><IMG height=100 
                           
                          src="http://www.33fly.com/University/Team/photo/2011531184426.jpg" width=154 
                          ></A>
                              <DD><A class=orange1 
                          href="http://www.33fly.com/University/Team/Actview.aspx?aid=8" 
                          target=_blank></A></DD>
                            </DL>
                            <DL class=margin_18>
                              <DT><A title=666 
                          href="http://www.33fly.com/University/Team/Actview.aspx?aid=9" 
                          target=_blank><IMG height=100 
                           
                          src="http://www.33fly.com/University/Team/photo/2011531185339.jpg" width=154 
                          ></A>
                              <DD><A class=orange1 
                          href="http://www.33fly.com/University/Team/Actview.aspx?aid=9" 
                          target=_blank></A></DD>
                            </DL>
                            <DL class=margin_18>
                              <DT><A title=888 
                          href="http://www.33fly.com/University/Team/Actview.aspx?aid=10" 
                          target=_blank><IMG height=100 
                           
                          src="http://www.33fly.com/University/Team/photo/2011531185518.jpg" width=154 
                          ></A>
                              <DD><A class=orange1 
                          href="http://www.33fly.com/University/Team/Actview.aspx?aid=10" 
                          target=_blank></A></DD>
                            </DL>
                            <DL class=margin_18>
                              <DT><A title=899 
                          href="http://www.33fly.com/University/Team/Actview.aspx?aid=12" 
                          target=_blank><IMG height=100 
                           
                          src="http://www.33fly.com/University/Team/photo/201171191915.jpg" width=154 
                          ></A>
                              <DD><A class=orange1 
                          href="http://www.33fly.com/University/Team/Actview.aspx?aid=12" 
                          target=_blank></A></DD>
                            </DL>
                            <DL class=margin_18>
                              <DT><A title=556 
                          href="http://www.33fly.com/University/Team/Actview.aspx?aid=13" 
                          target=_blank><IMG height=100 
                           
                          src="http://www.33fly.com/University/Team/photo/2011531201905.jpg" width=154 
                          ></A>
                              <DD><A class=orange1 
                          href="http://www.33fly.com/University/Team/Actview.aspx?aid=13" 
                          target=_blank></A></DD>
                            </DL>
                          </DIV>
                        </DIV></TD>
                      <TD vAlign=top align=right width=35><IMG class=hand 
                        id=runrightbtn style="MARGIN-TOP: 40px" height=26 
                        src="http://www.33fly.com/University/images/hd_31.gif" 
              width=18></TD>
                    </TR>
                  </TBODY>
                </TABLE></TD>
            </TR>
          </TBODY>
        </TABLE></TD>
    </TR>
  </TBODY>
</TABLE>
</BODY>
</HTML>
<script type="text/javascript" src="JQPI.js" ></script>



 JQPI.js源码:jQuery.hor={
            box:null,
            pic:null,
			runx:null,
			runover:function (){ clearInterval(jQuery.hor.runx);},
			run2:function(a){
				if(this.pic.offsetWidth-this.box.scrollLeft<=0){
					jQuery.hor.box.scrollLeft-=this.pic.offsetWidth;
				}else{
					this.box.scrollLeft+=a;
				}
			},
			runSpeed:10,
			runStar:function(a){$.hor.runx=setInterval("jQuery.hor.run2("+a+")",$.hor.runSpeed);},
			run:function(options){  
                var defaults = {  
                    boxid:"",
                    leftbtn:"",    
                    rightbtn:"",
                    leftbtn:"",
                    rightbtn:""
                }   
                var o = $.extend(defaults, options);
                this.box=$('#'+o.boxid)[0];
                this.pic=$('>*',this.box)[0];
                $(this.pic).height(o.boxh);
                $(this.pic).width(o.boxw*$(">*",this.pic).length);
                $("#"+o.leftbtn).attr("alt","点住不放可以快速向左滚动").css({"cursor":"pointer"});
                $("#"+o.rightbtn).attr("alt","点住不放可以快速向右滚动").css({"cursor":"pointer"});
                $("#"+o.leftbtn).mousedown(function(){$.hor.runover();$.hor.runStar(-3)}).mouseup(function(){$.hor.runover();$.hor.runStar(-1)}).mouseover(function(){ $.hor.runStar(-1)}).mouseout(function(){$.hor.runover();});
                $("#"+o.rightbtn).mousedown(function(){
                    $.hor.runover();
                    $.hor.runStar(3)
                }).mouseup(function(){
                    $.hor.runover();
                    $.hor.runStar(1)
                }).mouseover(function(){ 
                    $.hor.runStar(1)
                }).mouseout(function(){
                    $.hor.runover();
                });
			}
}
jQuery.hor.run({
	boxid:"runactbox",
	boxh:"156",
	boxw:"178",
	leftbtn:"runleftbtn",    
	rightbtn:"runrightbtn",
	leftbtn:"runleftbtn",
	rightbtn:"runrightbtn"
});

chinet_bridge

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自编JQuery插件第十二个:水平滚动图片

水平滚动图片效果:<SCRIPT language=javascript src="jquery-1.6.js" type=text/javascript>.margin_18 { MARGIN-RIGHT: 18px}#runbox { DISPLAY: block; OVERFLOW: hidden; WIDTH: 618px; HEIGHT: 87px}#runbo
复制链接

扫一扫