jquery控制左右滚动切换

来源：互联网发布：淘宝小家电编辑：程序博客网时间：2024/05/22 06:51

今天感觉很无聊，为缓解无聊的状态，自己随意写个控制左右切换的一个小demo，未添加任何处理，可供自己以后参考使用（单条和多条滚动原理一致）。

1.首先引入jquery包

2.开始代码布局

3.添加相应的执行程序

<!doctype html><html><head><meta charset="utf-8"><title>Jquery实现多条滚动</title><style type="text/css">*{margin:0;padding:0;list-style:none;}.ullist{width:960px; margin:0 auto; border:1px solid #fca; position:relative;}.ullist #prev{width:50px; height:90px; background:#369; position:absolute; left:5px; cursor:pointer;}.ullist #next{width:50px; height:90px; background:#369; position:absolute; right:5px; cursor:pointer;}.ullist .scroll{width:830px;height:90px;margin:0 auto; border:1px solid #f00; overflow:hidden; position:relative;}.ullist .scroll ul{width:8888px; position:absolute; margin-left:-840px;}.ullist ul li{width:158px; height:90px; background:#ccc; margin-right:10px; float:left; text-align:center; line-height:90px;}.ullist ul li.cur{background:#999;}</style></head><body><div class="ullist"><div id="prev"></div>    <div id="next"></div><div class="scroll">    <ul>        <!-- 第一屏 -->            <li>2012-12-1周一</li>            <li>2012-12-2周二</li>            <li>2012-12-3周三</li>            <li>2012-12-4周四</li>            <li>2012-12-5周五</li>            <!-- 第二屏（默认显示） -->            <li>2012-12-8周一</li>            <li class="cur">2012-12-9周二</li>            <li>2012-12-10周三</li>            <li>2012-12-11周四</li>            <li>2012-12-12周五</li>            <!-- 第三屏 -->            <li>2012-12-15周一</li>            <li>2012-12-16周二</li>            <li>2012-12-17周三</li>            <li>2012-12-18周四</li>            <li>2012-12-19周五</li>        </ul>    </div></div><script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script type="text/javascript">$(function(){$("#prev").click(function(){if($(this).hasClass("disable")){}else{$("#prev").addClass("disable");$(".scroll ul").animate({left:"-840px"},1000,function(){$(".scroll ul li").slice(0,5).appendTo(this);$(this).css("left",0);$("#prev").removeClass("disable");})}})$("#next").click(function(){if($(this).hasClass("disable")){}else{$("#next").addClass("disable");$(".scroll ul").css("left","-840px");$(".scroll ul li").slice(10,15).prependTo(".scroll ul");$(".scroll ul").animate({left:"0px"},1000,function(){$(".scroll ul").css("left",0);$("#next").removeClass("disable");})}})})</script></body></html>

0 0