jQuery 图片轮播，滚动效果

来源：互联网发布：dnf黄字伤害算法编辑：程序博客网时间：2024/06/12 04:19

jQuery图片轮播滚动效果

<div class="div2">    <div class="div-ul-2">    <ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>    <li>7</li>    <li>8</li>    </ul>    </div>    <div class="div-btn-2">    <a href="javascript:void(0);" class="btn-pre">上一个</a>    <a href="javascript:void(0);" class="btn-nex">下一个</a>    </div>    </div>

.div2{margin: 0 auto; width: 1300px;}.div-ul-2{font-size: 0; width: 650px; overflow: hidden; white-space: nowrap;}.div-ul-2 ul li{width: 98px; height: 148px; border: 1px green solid; display: inline-block; background: #eee; margin: 0 15px; font-size: 18px; text-align: center; line-height: 150px;}.div-btn-2 a{display: inline-block; width: 50px; height: 20px; line-height: 20px; border: 1px #000 solid; text-align: center}

$(function(){function leftm(){$(".div-ul-2 ul").animate({marginLeft:"-130px"},1000,function(){$(this).css("margin-left","0px").find("li:first").appendTo(this);});}function rightm(){$(".div-ul-2 ul").find("li:last").prependTo(".div-ul-2 ul");$(".div-ul-2 ul").css("margin-left","-130px").animate({marginLeft:"0px"},1000);}$(".btn-nex").click(function(){if(!$(".div-ul-2 ul").is(":animated")){leftm();}});$(".btn-pre").click(function(){if(!$(".div-ul-2 ul").is(":animated")){rightm();}});var scrolltime = setInterval(leftm,2000);$(".div2").hover(function(){scrolltime = clearInterval(scrolltime);},function(){scrolltime = setInterval(leftm,2000);});//setInterval(leftm,5000);});

0 0