欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

鼠标点击 向左按钮 向右按钮 一个一个的朝左移 或朝后移

shiping1 的头像
下面是html代码
<div class="scrolllist" id="pic-box">
        <a class="abtn aleft" href="#left" title="左移"></a>
        <div class="imglist_w">
            <ul style="left: 3px;" class="imglist">
            <li><a target="_blank" href="/plus/view.php?aid=6321"><img src="/uploads/allimg/141103/1-141103134P20-L-155-103.jpg" alt="校园环境"><p>校园环境</p></a></li><li><a target="_blank" href="/plus/view.php?aid=6322"><img src="/uploads/allimg/141103/1-141103134Z30-L-155-103.jpg" alt="校园环境"><p>校园环境</p></a></li><li><a target="_blank" href="/plus/view.php?aid=6323"><img src="/uploads/allimg/141103/1-1411031349310-L-155-103.jpg" alt="中心干道"><p>中心干道</p></a></li><li><a target="_blank" href="/plus/view.php?aid=6324"><img src="/uploads/allimg/141103/1-1411031350000-L-155-103.jpg" alt="教学楼"><p>教学楼</p></a></li><li><a target="_blank" href="/plus/view.php?aid=6325"><img src="/uploads/allimg/141103/1-1411031350300-L-155-103.jpg" alt="学校操场"><p>学校操场</p></a></li><li><a target="_blank" href="/plus/view.php?aid=6326"><img src="/uploads/allimg/141103/1-1411031351110-L-155-103.jpg" alt="学校食堂"><p>学校食堂</p></a></li><li><a target="_blank" href="/plus/view.php?aid=6327"><img src="/uploads/allimg/141103/1-1411031351430-L-155-103.jpg" alt="学生宿舍"><p>学生宿舍</p></a></li><li><a target="_blank" href="/plus/view.php?aid=6328"><img src="/uploads/allimg/141103/1-1411031352070-L-155-103.jpg" alt="校园一角"><p>校园一角</p></a></li><li><a target="_blank" href="/plus/view.php?aid=6329"><img src="/uploads/allimg/141103/1-1411031352380-L-155-103.jpg" alt="校园鸟瞰"><p>校园鸟瞰</p></a></li><li><a target="_blank" href="/plus/view.php?aid=6330"><img src="/uploads/allimg/141103/1-1411031353070-L-155-103.jpg" alt="校园环境"><p>校园环境</p></a></li><li><a target="_blank" href="/plus/view.php?aid=6331"><img src="/uploads/allimg/141103/1-1411031353360-L-155-103.jpg" alt="校园环境"><p>校园环境</p></a></li><li><a target="_blank" href="/plus/view.php?aid=6332"><img src="/uploads/allimg/141103/1-1411031354030-L-155-103.jpg" alt="多媒体教室"><p>多媒体教室</p></a></li><li><a target="_blank" href="/plus/view.php?aid=6333"><img src="/uploads/allimg/141103/1-1411031354290-L-155-103.jpg" alt="校园环境"><p>校园环境</p></a></li><li><a target="_blank" href="/plus/view.php?aid=6334"><img src="/uploads/allimg/141103/1-1411031355010-L-155-103.jpg" alt="校园环境"><p>校园环境</p></a></li><li><a target="_blank" href="/plus/view.php?aid=6335"><img src="/uploads/allimg/141103/1-1411031355330-L-155-103.jpg" alt="设计制版教室"><p>设计制版教室</p></a></li><li><a target="_blank" href="/plus/view.php?aid=6336"><img src="/uploads/allimg/141103/1-1411031356130-L-155-103.jpg" alt="设计制版教室"><p>设计制版教室</p></a></li><li><a target="_blank" href="/plus/view.php?aid=6337"><img src="/uploads/allimg/141103/1-1411031356410-L-155-103.jpg" alt="小班化教学"><p>小班化教学</p></a></li><li><a target="_blank" href="/plus/view.php?aid=1072"><img src="/uploads/121101/1-1211011R30b32-155-103.JPG" alt="校园环境"><p>校园环境</p></a></li><li><a target="_blank" href="/plus/view.php?aid=1077"><img src="/uploads/121101/1-1211011R53M26-155-103.JPG" alt="校园环境"><p>校园环境</p></a></li><li><a target="_blank" href="/plus/view.php?aid=1078"><img src="/uploads/121101/1-1211011R559296-155-103.JPG" alt="校园环境"><p>校园环境</p></a></li>
            
            


            </ul><!--imglist end-->
        </div>
        <a class="abtn aright" href="#right" title="右移"></a>
    </div>

下面是css代码

a.abtn {
    background: url("../images/arrow3.png") no-repeat scroll 0 50% rgba(0, 0, 0, 0);
    display: block;
    height: 130px;
    overflow: hidden;
    width: 17px;
function setImglist(pos)
{
    var imglistleftpx = $('#pic-box .imglist_w .imglist').css('left');
    var imglistleft = parseInt(imglistleftpx);
    imglistleft = imglistleft+pos;
    //判断位置是否大于3 注意位置
    if(imglistleft>=3){
        imglistleft = 3;
    }
     //判断是否小于-2682  注意位置
    if(imglistleft>=2682){
        imglistleft = 2682;
    }
     $('#pic-box .imglist_w .imglist').css('left',imglistleft+'px');
    
}

$(document).ready(function() {
   $('#pic-box .aleft').click(function()
   {
       setImglist(+179);
       return false;
   });
   $('#pic-box .aright').click(function()
   {
        setImglist(-179);
        return false;
   });
});

效果如下图所示

普通分类: