点击左右横向滚动，很简单的代码哦

最新推荐文章于 2024-03-12 18:25:16 发布

原创最新推荐文章于 2024-03-12 18:25:16 发布 · 4.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #点击滚动

网站常用jquery效果专栏收录该内容

52 篇文章

订阅专栏

本文介绍了一个基于HTML和jQuery实现的图片横向滚动效果。通过简单的HTML结构配合jQuery动画，可以轻松创建一个可前后翻页的图片滚动条。适用于网页中展示多个图片或项目的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
    <title>点击图片横向滚动</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    * { margin:0; padding:0;}
    body { font-size:12px;}
    </style>
    <style>
    #scrollable {
    background-color:#efefef;
    border:1px solid #ddd;
    padding:10px 8px;
    width:523px;
    height:65px;
    margin-top:30px;
    }
    div.items {
    height:66px;
    margin-left:8px;
    float:left;
    width:475px !important;
    }
    div.items li {
    display:block;
    float:left;
    margin-right:8px;
    width:88px;
    height:66px;
    background:#BBB;
    font-size:50px;
    color:#ccc;
    line-height:66px;
    text-decoration:none;
    text-align:center;
    cursor:pointer;
    }
    div.items li:hover {
    color:#999;
    }
    div.items li.active {
    background-position:-174px 0;
    color:#555;
    cursor:default;
    }
    a.prev, a.next {
    background:url(http://www.shengyijie.net/images/left_02.png) no-repeat 0 0;
    display:block;
    width:23px;
    height:43px;
    float:left;
    margin:15px 0 0 0;
    cursor:pointer;
    }
    a.next {
    background-image:url(http://www.shengyijie.net/images/right_02.png)
    }
   
    </style>
    <!--   引入jQuery -->
    <script src="http://jt.875.cn/js/jquery.js" type="text/javascript"></script>
	
	
    <script type="text/javascript">
    $(function(){
    var $content = $(".scroll_demo");
    var i = 5;  //已知显示的<li>元素的个数
    var m = 5;  //用于计算的变量
    var count = $content.find("li").length;//总共的<li>元素的个数
	
    $(".next").click(function(){
    if( !$content.is(":animated")){  //判断元素是否正处于动画，如果不处于动画状态，则追加动画。
    if(m<count){  //判断 i 是否小于总的个数
    m++;
    $content.animate({left: "-=96px"}, 600);
    }
	
    }
    });
    $(".prev").click(function(){
    if( !$content.is(":animated")){
    if(m>i){ //判断 i 是否小于总的个数
    m--;
    $content.animate({left: "+=96px"}, 600);
    }
    }
    });
	
	
	
    })
    </script>
    </head>
    <body>
    <div style="margin:0 auto;width:530px;">
    <!-- 例子 -->
    <div id="scroll">
    <a class="prev" href="#"></a>
    <!--  外部div使用相对定位，里面的div使用绝对定位 -->
    <div class="items" style="overflow: hidden; position: relative; visibility: visible; width: 478px;">
    <div style="position: absolute; width: 200000em; left: 0px;" class="scroll_demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    </div>
    <br clear="all"/>
    </div>
    <!-- "prev page" link -->
    <a  class="next" href="#"></a>
    </div>
    </div>
    </body>
    </html>