用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

jquery图片幻灯片浏览(带箭头、带缩略图)

2013-06-29 作者: 免费源代码下载整理举报

[javascript]代码库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content=" " />
<meta name="description" content=" " />
<title>jquery图片浏览代码</title>
<LINK rel=stylesheet type=text/css href="css/lrtk.css">
<SCRIPT type=text/javascript src="js/jquery.js"></SCRIPT>
<SCRIPT type=text/javascript src="js/slide.js"></SCRIPT>
</head>

<body style="text-align:center">
<DIV style="HEIGHT: 560px; PADDING-TOP: 20px" class="wrap picshow"><!--大图轮换区-->
  <DIV id=picarea>
    <DIV style="MARGIN: 0px auto; WIDTH: 774px; HEIGHT: 436px; OVERFLOW: hidden">
      <DIV style="MARGIN: 0px auto; WIDTH: 774px; HEIGHT: 436px; OVERFLOW: hidden" id=bigpicarea>
        <P class=bigbtnPrev><SPAN id=big_play_prev></SPAN></P>
        <DIV id=image_xixi-01 class=image><A href="http://sc.chinaz.com/" target=_blank><IMG alt="" 
src="images/42766101.jpg" width=772 height=434></A>
          <DIV class=word>
            <H3>舞动青春</H3>
          </DIV>
        </DIV>
        <DIV id=image_xixi-02 class=image><A href="http://sc.chinaz.com/" target=_blank><IMG alt="" 
src="images/42813100.jpg" width=772 height=434></A>
          <DIV class=word>
            <H3>台球厅的生活</H3>
          </DIV>
        </DIV>
        <DIV id=image_xixi-03 class=image><A href="http://sc.chinaz.com/" target=_blank><IMG alt="" 
src="images/42813102.jpg" width=772 height=434></A>
          <DIV class=word>
            <H3>采访进行中</H3>
          </DIV>
        </DIV>
        <DIV id=image_xixi-04 class=image><A href="http://sc.chinaz.com/" target=_blank><IMG alt="" 
src="images/42813139.jpg" width=772 height=434></A>
          <DIV class=word>
            <H3>美女代言人</H3>
          </DIV>
        </DIV>
        <DIV id=image_xixi-05 class=image><A href="http://sc.chinaz.com/" target=_blank><IMG alt="" 
src="images/42766145.jpg" width=772 height=434></A>
          <DIV class=word>
            <H3>红色经典</H3>
          </DIV>
        </DIV>
        <DIV id=image_xixi-06 class=image><A href="http://sc.chinaz.com/" target=_blank><IMG alt="" 
src="images/42766146.jpg" width=772 height=434></A>
          <DIV class=word>
            <H3>回眸</H3>
          </DIV>
        </DIV>
        <DIV id=image_xixi-07 class=image><A href="http://sc.chinaz.com/" target=_blank><IMG alt="" 
src="images/42766159.jpg" width=772 height=434></A>
          <DIV class=word>
            <H3>眩光的诱惑</H3>
          </DIV>
        </DIV>
        <P class=bigbtnNext><SPAN id=big_play_next></SPAN></P>
      </DIV>
    </DIV>
    <DIV id=smallpicarea>
      <DIV id=thumbs>
        <UL>
          <LI class="first btnPrev"><IMG id=play_prev src="images/left.png"></LI>
          <LI class=slideshowItem> <A id=thumb_xixi-01 href="#"><IMG src="images/42766316.jpg" width=90 height=60></A> </LI>
          <LI class=slideshowItem> <A id=thumb_xixi-02 href="#"><IMG src="images/42813171.jpg" width=90 height=60></A> </LI>
          <LI class=slideshowItem> <A id=thumb_xixi-03 href="#"><IMG src="images/42813178.jpg" width=90 height=60></A> </LI>
          <LI class=slideshowItem> <A id=thumb_xixi-04 href="#"><IMG src="images/42813186.jpg" width=90 height=60></A> </LI>
          <LI class=slideshowItem> <A id=thumb_xixi-05 href="#"><IMG src="images/42766362.jpg" width=90 height=60></A> </LI>
          <LI class=slideshowItem> <A id=thumb_xixi-06 href="#"><IMG src="images/42766274.jpg" width=90 height=60></A> </LI>
          <LI class="last_img slideshowItem"> <A id=thumb_xixi-07 href="#"><IMG src="images/42766298.jpg" width=90 height=60></A> </LI>
          <LI class="last btnNext"><IMG id=play_next src="images/right.png"></LI>
        </UL>
      </DIV>
    </DIV>
  </DIV>
  <SCRIPT>
var target = ["xixi-01","xixi-02","xixi-03","xixi-04","xixi-05","xixi-06","xixi-07"];
</SCRIPT> 
</DIV>
</body>
</html>

[代码运行效果截图]


jquery图片幻灯片浏览(带箭头、带缩略图)

[源代码打包下载]




网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...