锋利的jQuery幻灯片实例

//锋利的jQuery幻灯片实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 12px;
        }

        .v_show {
            width: 592px;
            margin: 20px 0px 0 30px;
            border: 1px solid #ccc;
        }

        .v_caption {
            width: 592px;
            height: 40px;
            line-height: 40px;
            overflow: hidden;
            background: url("images/btn_cartoon.gif") repeat-x;
        }

        .cartoon {
            float: left;
            width: 85px;
            margin-right: 10px;
            background: url("images/btn_cartoon.gif") 0px -100px no-repeat;
            text-indent: -9999px;
        }

        .highlight_tip {
            float: left;
            padding-top: 16px;
            margin-right: 10px
        }

        .highlight_tip span.current {
            background: url("images/btn_cartoon.gif") 0px -220px;
        }

        .highlight_tip span {
            display: inline;
            float: left;
            width: 7px;
            height: 7px;
            overflow: hidden;
            margin: 0 2px;
            background: url(images/btn_cartoon.gif) no-repeat 0 -320px;
            text-indent: -9999px;
        }

        .change_btn {
            float: left;
            overflow: hidden;
            width: 65px;
            padding-top: 8px;
        }

        .change_btn span.prev {
            display: block;
            float: left;
            width: 30px;
            height: 23px;
            background: url("images/btn_cartoon.gif") 0px -400px no-repeat;
            text-indent: -9999px;
        }

        .change_btn span.next {
            display: block;
            float: left;
            width: 30px;
            height: 23px;
            background: url("images/btn_cartoon.gif") -30px -400px no-repeat;
            text-indent: -9999px;
        }

        .v_caption em {
            float: right;
            padding-right: 10px;

        }

        .v_caption em a {
            font-size: 12px;
            text-decoration: none;
            color: #2B93D2;
        }

        .v_content {
            position: relative;
            height: 160px;
            overflow: hidden;
        }

        .v_content_list {
            height: 160px;
            width: 2500px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .v_content_list ul {
            list-style: none;
        }

        .v_content_list li {
            float: left;
            margin: 10px 5px 0;
            padding: 5px;
        }

        .v_content_list li a {
            display: block;
            width: 128px;
            height: 80px;
            overflow: hidden;
        }

        .v_content_list h4 {
            margin-top: 10px;
            color: #2B93D2;
        }
    </style>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>
        $(function () {
            var page = 1;//初始版面为1
            var i = 4;//每个版面放四张图片
            $(".next").click(function () {
                var $parent = $(this).parents(".v_show");
                var $contentlist = $parent.find(".v_content_list");
                var $content = $parent.find(".v_content");//left位置要变换的盒子
                var v_width = $content.width();//获取到盒子的宽度
                var len = $contentlist.find("li").length;//获取到li的个数
                var pagecount = Math.ceil(len / i);//最多能够放四张版面
               if(!$contentlist.is(":animated")){
                   if(page==pagecount){//若是第四个版面
                       $contentlist.animate({left: '0px'}, "slow")//改变left位置,返回为第一个版面
                       page=1;
                   }else{
                       $contentlist.animate({left: '-=' + v_width}, "slow")//v_width向左减宽度
                       page++;
                   }
               }
               $(".highlight_tip span").eq((page-1)).addClass("current").siblings().removeClass("current");
            })
            $(".prev").click(function () {
                var $parent = $(this).parents(".v_show");
                var $contentlist = $parent.find(".v_content_list");
                var $content = $parent.find(".v_content");
                var v_width = $content.width();
                var len = $contentlist.find("li").length;
                var pagecount = Math.ceil(len / i);
                if(!$contentlist.is(":animated")){
                    if(page==1){
                        $contentlist.animate({left: '-='+v_width*(pagecount-1)}, "slow");//改变为第四个版面
                        page=4;
                    }else{
                        $contentlist.animate({left: '+=' + v_width}, "slow")
                        page--;
                    }
                }
                $(".highlight_tip span").eq((page-1)).addClass("current").siblings().removeClass("current")
            })
        })
    </script>
    <script></script>
</head>
<body>
<div class="v_show">
    <div class="v_caption">
        <h2 class="cartoon" alt="卡通动漫">卡通动漫</h2>
        <div class="highlight_tip">
            <span class="current">0</span><span>1</span><span>2</span><span>3</span>
        </div>
        <div class="change_btn">
            <span class="prev">上一个</span><span class="next">下一个</span>
        </div>
        <em><a href="#">更多>></a></em>
    </div>
    <div class="v_content">
        <div class="v_content_list">
            <ul>
                <li><a href="#"><img src="images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放:<em>21456</em></span></li>
                <li><a href="#"><img src="images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放:<em>21456</em></span></li>
                <li><a href="#"><img src="images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放:<em>21456</em></span></li>
                <li><a href="#"><img src="images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放:<em>21456</em></span></li>
                <li><a href="#"><img src="images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放:<em>21456</em></span></li>
                <li><a href="#"><img src="images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放:<em>21456</em></span></li>
                <li><a href="#"><img src="images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放:<em>21456</em></span></li>
                <li><a href="#"><img src="images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放:<em>21456</em></span></li>
                <li><a href="#"><img src="images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放:<em>21456</em></span></li>
                <li><a href="#"><img src="images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放:<em>21456</em></span></li>
                <li><a href="#"><img src="images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放:<em>21456</em></span></li>
                <li><a href="#"><img src="images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放:<em>21456</em></span></li>
                <li><a href="#"><img src="images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放:<em>21456</em></span></li>
                <li><a href="#"><img src="images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放:<em>21456</em></span></li>
                <li><a href="#"><img src="images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放:<em>21456</em></span></li>
                <li><a href="#"><img src="images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放:<em>21456</em></span></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

 

posted @ 2017-07-04 17:01  斯丢皮德曼  阅读(191)  评论(0编辑  收藏  举报