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

2016-12-02 11:34:09来源:cnblogs.com作者:猫爷°人点击

第七城市

模仿着锋利的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标签是为了加标题的
效果图如下:

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

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

左右切换按钮,可以添加按压效果,点击的时候取深色图片。

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

好好学习!

 


  
第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台