锋利的Jquery(滚动切换效果)

模仿着锋利的Jquery案例做的一个滚动切换效果

效果如下图:

锋利的Jquery(滚动切换效果)

前台HTML代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>滚动图</title>
    <link rel="stylesheet" type="text/css" href="css/RollControl.css" />
    <script type="text/javascript" src="script/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function () {
            var page = 1;
            var i = 4;
            var $v_trends = $("#view_menu_trends").find("li");
            $v_trends.eq(0).addClass('currentTrends');//默认第一个点选中
            $(".next").click(function () {
                var $parent = $("#view_menu");
                var $v_content = $("#view_content");//外围width
                var $v_show = $("#view_content_fixed");//

                var v_width = $v_content.width();
                var len = $v_content.find('li').length;
                var page_count = Math.ceil(len / i);//所有的图片数/版面数=总页数
                if (!$v_show.is(":animated")) {
                    if (page == page_count) {
                        $v_show.animate({ left: '0px' }, 'slow');//如果超过总页数 那么就跳回第一页
                        page = 1;
                    } else {
                        $v_show.animate({ left: '-=' + v_width }, 'slow');
                        page++;
                    }
                    $v_trends.removeClass('currentTrends').eq(page - 1).addClass('currentTrends');
                }
            });
            $(".pre").click(function () {
                var $parent = $("#view_menu");
                var $v_content = $("#view_content");//外围width
                var $v_show = $("#view_content_fixed");//
                var v_width = $v_content.width();
                var len = $v_content.find('li').length;
                var page_count = Math.ceil(len / i);//所有的图片数/版面数=总页数
                if (!$v_show.is(":animated")) {//判断是否是动画状态
                    if (page == 1) {
                        $v_show.animate({ left: '-=' + (page_count - 1) * v_width + "px" }, 'slow');//到了第一页那么跳转到最后一页
                        page = page_count;
                    } else {
                        $v_show.animate({ left: '+=' + v_width }, 'slow');
                        page--;
                    }
                    $v_trends.removeClass('currentTrends').eq(page - 1).addClass('currentTrends');
                }
            });
        });
    </script>
</head>
<body>
    <div>
        <div id="view_menu">
            <div id="view_menu_title"><span>热播电视剧</span></div>
            <div id="view_menu_trends">
                <ul>
                    <li>●</li>
                    <li>●</li>
                    <li>●</li>
                </ul>
            </div>
            <div id="view_menu_control">
                <span>
                    <img class="pre" src="Rollpic/left_arrow.png" /></span>
                <span>
                    <img class="next" src="Rollpic/right_arrow.png" /></span>
            </div>
        </div>
        <div id="view_content">
            <div id="view_content_fixed">
                <ul>
                    <li>
                        <div>
                            <img src="Rollpic/1.jpg" /></div>
                        <span></span></li>
                    <li>
                        <div>
                            <img src="Rollpic/2.jpg" />
                        </div>
                        <span></span></li>
                    <li>
                        <div>
                            <img src="Rollpic/3.jpg" />
                        </div>
                        <span></span></li>
                    <li>
                        <div>
                            <img src="Rollpic/4.jpg" />
                        </div>
                        <span></span></li>
                    <li>
                        <div>
                            <img src="Rollpic/5.jpg" />
                        </div>
                        <span></span></li>
                    <li>
                        <div>
                            <img src="Rollpic/6.jpg" />
                        </div>
                        <span></span></li>
                    <li>
                        <div>
                            <img src="Rollpic/7.jpg" />
                        </div>
                        <span></span></li>
                    <li>
                        <div>
                            <img src="Rollpic/8.jpg" />
                        </div>
                        <span></span></li>
                    <li>
                        <div>
                            <img src="Rollpic/9.jpg" />
                        </div>
                        <span></span></li>
                    <li>
                        <div>
                            <img src="Rollpic/10.jpg" />
                        </div>
                        <span></span></li>
                    <li>
                        <div>
                            <img src="Rollpic/11.jpg" />
                        </div>
                        <span></span></li>
                    <li>
                        <div>
                            <img src="Rollpic/12.jpg" />
                        </div>
                        <span></span></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

RollControl.css代码如下:

body {
    margin: 0px;
    padding: 0px;
}

#view_menu {
    width: 600px;
    height: 30px;
    line-height: 30px;
    cursor: default;
}

#view_menu_title {
    float: left;
    font-family: 'Microsoft YaHei';
    width: 150px;
    text-align: center;
}

#view_menu_trends {
    float: left;
    line-height: 30px;
    color: #99CC99;
    font-size: 10px;
}

.currentTrends {
    color: #009933;
}

#view_menu_trends ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#view_menu_trends ul li {
    text-align: center;
    float: left;
    width: 15px;
}

#view_menu_control {
    float: left;
    width: 100px;
    height: 30px;
    text-align: center;
}

#view_menu_control img {
    width: 25px;
    height: 25px;
    line-height: 30px;
    cursor: pointer;
}

#view_content {
    width: 548px;
    height: 178px;
    position: relative;
    overflow: hidden;
    border: 1px solid #CCCCCC;
}

#view_content_fixed {
    position: absolute;
    width: 2500px;
}

#view_content_fixed img {
    cursor: pointer;
}

#view_content ul {
    margin: 0px;
    position: absolute;
    padding: 0px;
}

#view_content ul li {
    margin: 0px;
    padding: 0px;
    float: left;
    padding: 8px;
    list-style: none;
    display: inline;
}

.view_content_fixed下的SPAN标签是为了加标题的
效果图如下:

锋利的Jquery(滚动切换效果)

还有两个地方没有细化，第一个就是

锋利的Jquery(滚动切换效果)

这个动态点点击的时候也可以切换页面，第二个

锋利的Jquery(滚动切换效果) 左右切换按钮,可以添加按压效果，点击的时候取深色图片。

好了，大体的效果就这样，细节自己去玩吧，希望自己能坚持写下去，从小案例到大案例，

好好学习！

秒客网

锋利的Jquery(滚动切换效果)

相关文章