首页手记图片向左向右无缝滚动
图片向左向右无缝滚动

标签：
JQuery JavaScript
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片左右无缝滚动</title>
        <style type="text/css">
            *{ margin: 0; padding: 0;}
            .box{ position:relative; width:1200px; height:180px; margin:100px auto; border:5px solid #727272;}
            .box1{ width:1170px; margin: 0 auto; height:150px; margin:15px auto; position: relative; overflow: hidden;}
            .box1 ul{ overflow: hidden; height: 100%; position:absolute; left: 0; top: 0;}
            .box1 ul li{ width:213px; /*这里设置了li的宽度为213*/  margin:0 10px; height:100%; list-style:none; float: left;}
            .box1>ul>li>a{ position: relative; display: block; height: 100%;}
            .box1>ul>li>a>img{ display: block;}
            .box1>ul>li>a span{ height:30px; display: block; width: 100%; background:rgba(000,000,000,0.15); position: absolute;
            left: 0; top:111px; line-height: 30px; text-align: center; color: #fff; font-size:14px; font-family: "microsoft yahei";}
            .pre,.next{ display: none; position: absolute; top:43px; z-index:100; font-size:60px; text-decoration: none; font-weight: 900; color:#fff;}
            .box:hover .pre{ display: block;}
            .box:hover .next{ display: block;}
            .pre{ left: 0;}
            .next{ right: 0;}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box1">
                <a href="#" class="pre"><</a>
                <a href="#" class="next">></a>
                <ul>
                    <li>
                        <a href="#">
                            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/bgf.jpg" width="100%"/>
                            <span>小荷才露尖尖角1</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/bgf.jpg" width="100%"/>
                            <span>早有蜻蜓立上头2</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/bgf.jpg" width="100%"/>
                            <span>小荷才露尖尖角3</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/bgf.jpg" width="100%"/>
                            <span>早有蜻蜓立上头4</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/bgf.jpg" width="100%"/>
                            <span>小荷才露尖尖角5</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/bgf.jpg" width="100%"/>
                            <span>早有蜻蜓立上头6</span>
                        </a>
                    </li>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
        <script>
            $(function(){
                //初始化ul宽度
                var ul=$('.box1').children('ul');
                var li=ul.children('li').eq(0);
                //这里获取的li.with()是212，如果获取li.children('a').width()就是213，不知道是为什么...
                var liwidth=li.children('a').width()+parseInt(li.css('margin-left'))*2;  
                var lilength=ul.children('li').length;
                ul.width(liwidth*lilength);

                var left=0;
                function scrolling(){
                    if(flag==true){
                        //如果flag为true left=left-2,向右滚动
                        left-=2;
                    }else{
                        left+=2;    
                    }
                    ul.css('left',left);
                    //如果向左滚动并且ul显示内容的宽度等于或小于.box1的宽度时执行
                    if(liwidth*lilength+left<=$('.box1').width() && flag==true){
                        var lione=ul.children('li').slice(0,1);  
                        ul.append(lione);
                        left=left+liwidth;
                        ul.css('left',left);
                    }
                    //向右滚动并且ul的left值大于等于0时
                    if(left>=0 && flag==false){
                        var lione2=ul.children('li').slice(-1);  //slice(-1)，取最后一个li,也就是倒数第一个
                        ul.prepend(lione2);  //lione2节点会移动至ul的头部，成为ul的第一个子元素
                        left=left-liwidth;
                        ul.css('left',left);
                    }
                }
                //设置每10ms调用一次scrolling函数，
                var timer=setInterval(scrolling,10);

                //悬浮停止滚动，离开继续滚动
//              $('.box1').hover(function(){
//                  clearInterval(timer);
//              },function(){
//                  timer=setInterval(scrolling,10);
//              })

                //箭头悬浮改变滚动方向
                var flag=true;
                $('.pre').hover(function(){
                    flag=true;
                });
                $('.next').hover(function(){
                    flag=false;
                });

            })
        </script>
    </body>
</html>
不知道为什么li的宽度设置的是213px,用jquery获取到的是212px,,,
点击查看更多内容