开发学院网页设计JavaScript jquery制作的横向图片滚动带横向滚动条 阅读

jquery制作的横向图片滚动带横向滚动条

 2009-10-19 00:00:00 来源:WEB开发网   
核心提示: Html文件:<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head

Html文件:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Autor" content="Tacker(QQ:5987753)" />
    <script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="jquery.tackerScroll.js"></script>
    <title>TackerScroll Demo</title>
    <style type="text/css">
        ul, li
        {
            list-style: none;
            float: left;
            text-align: left;
        }
        .productlist
        {
            width: 885px;
            height: 355px;
            overflow: hidden;
            position: absolute;
            left: 64px;
            top: 10px;
        }
        .productlist ul
        {
            height: 355px;
            float: left;
        }
        .productlist ul li
        {
            height: 355px;
            width: 304px;
        }
        #viewerFrame
        {
            float: left;
            height: 355px;
        }
        #viewerScroller
        {
            width: 885px;
            height: 20px;
            overflow: hidden;
            position: absolute;
            left: 64px;
            top: 380px;
        }
        #viewerScroller .left
        {
            float: left;
            width: 20px;
            height: 20px;
        }
        #viewerScroller .center
        {
            float: left;
            height: 20px;
            background: #1A1AF7;
        }
        #viewerScroller .right
        {
            float: left;
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
    <div id="" class="subcontainer">
        <div id="imgViewer" class="productlist">
            <ul id="viewerFrame">
                <li><a href="#" target="_self">
                    <img src="http://tech.ddvip.com/2009-10/images/2009090972918233.jpg" width="276" height="355" title="" style="border: 0px;
                        display: block;" /></a></li>
                <li><a href="#" target="_self">
                    <img src="http://tech.ddvip.com/2009-10/images/2009090972870017.jpg" width="276" height="355" title="" style="border: 0px;
                        display: block;" /></a></li>
                <li><a href="#" target="_self">
                    <img src="http://tech.ddvip.com/2009-10/images/2009090972817505.jpg" width="276" height="355" title="" style="border: 0px;
                        display: block;" /></a></li>
                <li><a href="#" target="_self">
                    <img src="http://tech.ddvip.com/2009-10/images/2009090972740609.jpg" width="276" height="355" title="" style="border: 0px;
                        display: block;" /></a></li>
                <li><a href="#" target="_self">
                    <img src="http://tech.ddvip.com/2009-10/images/2009090972690985.jpg" width="276" height="355" title="" style="border: 0px;
                        display: block;" /></a></li>
                <li><a href="#" target="_self">
                    <img src="http://tech.ddvip.com/2009-10/images/2009090972665705.jpg" width="276" height="355" title="" style="border: 0px;
                        display: block;" /></a></li>
            </ul>
        </div>
        <div id="viewerScroller">
            <div class="left">
                <img id="scrollleft" src="http://tech.ddvip.com/2009-10/images/scrollleft.jpg" width="20" height="20" alt="" /></div>
            <div class="center" style="position: relative;">
                <img id="scrollcenter" src="http://tech.ddvip.com/2009-10/images/scrollcenter.jpg" width="0" height="20" alt="" /></div>
            <div class="right">
                <img id="scrollright" src="http://tech.ddvip.com/2009-10/images/scrollright.jpg" width="20" height="20" alt="" /></div>
        </div>
        <script type="text/javascript">
            $(function() {
                $("#viewer").tackerScroller({
                    container: "imgViewer",
                    frame: "viewerFrame",
                    width: 2,
                    child: "li",
                    time: 6000,
                    visibleScroll: true,
                    scrollwidth: 845
                });
            });
        </script>
    </div>
</body>
</html>

在线demo: http://www.ruiidea.com/tackerscroll/demo.html

文章来源:http://www.cnblogs.com/tacker/archive/2009/10/18/1585628.html

本文示例源代码或素材下载

上一页  1 2 

Tags:jquery 制作 横向

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接