jquery seamless rotation

Idea: first, static layout, setting a variable as the subscript, using jquery's selector to get all the li clicked, get the width,
Then write the encapsulation function on the next page (subscript + +, judge whether it is the last one according to the current subscript,
(do some animation effects, stop the animation once first), set the subscript to 0 for the last one; jump to the first one, not the last one, and change the display of the picture according to the left value);
Get all the clicked li, add the clicked event, clear all first, get the current subscript, add the class name according to the subscript, and then add a switched animation (stop once first)

1.html part

<div id="box">
        <ul class="ul1" id="ul1">
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
        </ul>
  <ul class="ul2" id="ul2">
            <li><a href="#"><img src="Rotation/pic3.jpg" height="240" width="670"></a><span>-1</span></li>
            <li style="display: block;"><a href="#"><img src="Rotation/pic1.jpg" height="240" width="670"></a><span>0</span></li>
            <li><a href="#"><img src="Rotation/pic2.jpg" height="240" width="670"></a><span>1</span></li>
            <li><a href="#"><img src="Rotation/pic4.jpg" height="240" width="670"></a><span>2</span></li>
            <li><a href="#"><img src="Rotation/pic5.jpg" height="240" width="670"></a><span>2</span></li>
            <li><a href="#"><img src="Rotation/pic6.jpg" height="240" width="670"></a><span>2</span></li>
            <li><a href="#"><img src="Rotation/pic3.jpg" height="240" width="670"></a><span>2</span></li>
            <li style="display: block;"><a href="#"><img src="Rotation/pic1.jpg" height="240" width="670"></a><span>3</span></li>
   </ul>
    <div class="pre-next">
        <a href="javascript:;" id="pre">&lt;</a>
        <a href="javascript:;" id="next">&gt;</a>
    </div>
</div>  

2.css part

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    #box {
        width: 670px;
        height: 240px;
        margin: 0 auto;
        background: pink;
        position: relative;
        overflow: hidden;
    }
    .ul1 {
        overflow: hidden;
        position: absolute;
        right: 10px;
        bottom: 0;
        z-index: 1000;
    }
    .ul1 li {
        float: left;
        margin: 5px;
        width: 22px;
        height: 22px;
        background: #ccc;
        text-align: center;
        line-height: 22px;
        border-radius: 50%;
    }
    .ul1 li.active {
        background: orange;
    }
    .ul1 li a {
        color: #fff;
        text-decoration: none;
    }
    .ul2 {
        overflow: hidden;
        left: -670px;
        position: absolute;
        height: 240px;
    }
    .ul2 li {
        /*display: none;*/
        float: left;
        position: relative;
    }
    .ul2 li span {
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #ccc;
        left: 50%;
        top: 50%;
        text-align: center;
        line-height: 50px;
        margin: -25px 0 0 -25px;
    }
    img {
        vertical-align: top;
    }
    .pre-next {
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -30px;
        height: 60px;
        width: 100%;
    }
    .pre-next a {
        width: 40px;
        height: 60px;
        background: rgba(0,0,0,0.3);
        color: #fff;
        text-decoration: none;
        font-size: 20px;
        line-height: 60px;
        position: absolute;
        text-align: center;
    }
    #pre {
        left: 0;
    }
    #next {
        right: 0;
    }
    </style>

3.js part

<script type="text/javascript" src="jq1.7.2/jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        // subscript
        var iNow = 0;
        var aLi2 = $('.ul2 li');
        // The width of a li
        var liW = aLi2.width();
        // Set the width of ul first
        $('.ul2').width(aLi2.length * liW);

        // next page
        $('#next').on('click',nextPage);

        // previous page
        $('#pre').on('click',prePage);

        //Functions from previous page
    function prePage () {
        iNow--;
        if (iNow == -1) {
        $('.ul2').stop().animate({left: -(iNow + 1) * liW},100,function () {
        $('.ul2').css('left',-(aLi2.length - 2) * liW);
            });
        iNow = aLi2.length - 3;

        }else {
        $('.ul2').stop().animate({left: -(iNow + 1) * liW},100);
        }

        // Change options
        $('.ul1 li').removeClass('active');
        $('.ul1 li').eq(iNow).addClass('active');

        }

        // Functions on next page
    function nextPage() {
        iNow++; // 1
        if (iNow == aLi2.length - 2) {
        $('.ul2').stop().animate({left: -(iNow + 1) * liW},100,function () {
        $('.ul2').css('left',-liW);
            });
                iNow = 0;
            } else {
            // Set left for ul
        // $('.ul2').css('left',-(iNow + 1) * liW);
        $('.ul2').stop().animate({left: -(iNow + 1) * liW},100);
            }

            // Change options
            $('.ul1 li').removeClass('active');
            $('.ul1 li').eq(iNow).addClass('active');

        }

        // tab 
        $('.ul1 li').click(function () {
            // Clear all
            // Change options
            $('.ul1 li').removeClass('active');
            iNow = $(this).index();
            $('.ul1 li').eq(iNow).addClass('active');
            $('.ul2').stop().animate({left: -(iNow + 1) * liW},100);
        });
    })
    </script>

Tags: Javascript JQuery

Posted on Sat, 16 May 2020 08:43:44 -0700 by SoireeExtreme