jq左右按钮点击幻灯片

程序员平安技术 2022年11月23日

0 收藏 920 点赞 4,366 浏览 1877 个字

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
    <title>左右点击幻灯片</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        ul{ list-style: none;}
       .wrapper{width: 300px;height: 200px; margin:100px auto;overflow: hidden;border: 2px solid #ccc;position: relative;}
        .scroll{width: 205px;margin: 0 auto; overflow: hidden;}
       .scroll li{float: left; margin: 5px; height:160px; font-size:60px; text-align:center; line-height:100px; font-weight:800; background:#FF3F00; color:#fff; width:200px;}
        .prev,.next{ width: 30px;height: 30px;background: #daa520;color: #fff;cursor: pointer;position: absolute;top:80px; text-align: center;line-height: 30px;}
        .next{ right: 0;}
    </style>
</head>
<script>
    $(function(){
        var oScroll=$('.scroll>ul'),oLi=oScroll.find('li'),oLen=oLi.length,oPrev=$('.prev'),oNext=$('.next'),oWidth=oLi.eq(0).outerWidth(true),iNow= 1,oCur=$('.count>em'),oCount=$('.count>i'),iTimer=null;
        oScroll.width(oWidth*oLen);
        oCount.html(oLen);
        function count(){
            oCur.html(iNow);
        }
        function Prev(){
            oScroll.css({marginLeft:-oWidth+'px'}).find('li:last').prependTo(oScroll);
            oScroll.stop(true,true).animate({marginLeft:0+'px'},600);
            iNow=iNow>1?iNow-1:oLen;
            count(iNow);
        }
        function Next(){
            oScroll.stop(true,true).animate({marginLeft:-oWidth+'px'},600,function(){
            oScroll.css({marginLeft:0}).find('li:first').appendTo(oScroll);
            })
            iNow=iNow<oLen?iNow+1:1;
            count(iNow);
        }
        oPrev.bind('click',Prev);
        oNext.bind('click',Next);
        iTimer=setInterval(Next,3000);
        $('.wrapper').hover(function(){
            clearInterval(iTimer);
        },function(){
            iTimer=setInterval(Next,3000);
        })
    })
</script>
<body>
<div class="wrapper">
    <span class="prev">《</span>
    <span class="next">》</span>
    <div class="scroll">
           <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <div class="count"><em>1</em>/<i>0</i></div>
</div>
</body>
</html>