jQuery宽屏幻灯片图片文字轮播特效代码-微信读书页面源码

jQuery宽屏幻灯片图片文字轮播特效代码-微信读书页面源码

添加时间:2021-03-01 03:27:35
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:图片轮播
  • 模板颜色模板颜色:初级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

一款jQuery宽屏幻灯片图片文字轮播特效代码-微信读书页面源码,通过点击页面左右的箭头来切换不同的图片文字内容,图片为宽屏全屏的样式且有一个模糊的效果,文字的加载有一个时间顺序,有些类似于懒加载,整个页面是响应式的效果非常棒。
jQuery宽屏幻灯片图片文字轮播特效代码-微信读书页面源码
分类:图片代码 > 图片轮播 难易:初级

页面的head部分,需引入两个CSS样式文件,代码如下:

<link type="text/css" rel='stylesheet' href='css/index.css'>
<link type="text/css" rel='stylesheet' href='css/index-mobile.css' id='mobileStyle'>

页面的body部分,用了多个div的嵌套和div列表的结构,代码如下:

<div id='view'>
    <div id='background'></div>
    <div id='page'>
        <div class='page' id='page_download'>
            <div class='img' id='page_download_hand'></div>
            <div id='page_download_show'>
                <div id='page_download_show_top'>
                    <div id='page_download_text'> 微信读书
                        <div>让阅读不再孤独</div>
                    </div>
                </div>
            </div>
            <a href="#" id='page_download_button'>
                <div id='page_download_button_top'>
                    <div id='page_download_mobile_iPhone'></div>
                    <div id='page_download_mobile_android'></div>
                </div>
            </a>
            <div id="page_download_pc_button">
                <a href="https://i.weread.qq.com/download?from=Website&type=iOS" id="page_download_button_iPhone">
                    <div id="page_download_pc_iPhone"></div>
                </a>
                <a href="https://i.weread.qq.com/download?from=Website&type=Android" id="page_download_button_android">
                    <div id="page_download_pc_android"></div>
                </a>
            </div>
        </div>
        <div class='page' id='page_function1'>
            <div id='page_function1_text'>
                <h1 id='page_function1_text_title'>精心打磨的阅读体验</h1>
                <h2 id='page_function1_text_sub'>支持EPUB和TXT格式,随心个性化专属阅读风格。精心打磨,只为给你极致体验。</h2>
            </div>
            <div id='page_function1_show'>
                <div id='page_function1_show_top'>
                    <div id='page_function1_book'>
                        <div id='page_function1_book_page3'></div>
                        <div id='page_function1_book_page2'></div>
                        <div id='page_function1_book_page1'></div>
                    </div>
                    <div id='page_function1_skin'>
                        <div id='page_function1_skin_icon'></div>
                        <div id='page_function1_skin_block1'></div>
                        <div id='page_function1_skin_block2'></div>
                        <div id='page_function1_skin_block3'></div>
                        <div id='page_function1_skin_block4'></div>
                    </div>
                    <div id='page_function1_font'></div>
                </div>
            </div>
        </div>
        <div class='page' id='page_function2'>
            <div id='page_function2_text'>
                <h1 id='page_function2_text_title'>和好友发现优质好书</h1>
                <h2 id='page_function2_text_sub'>书海茫茫,不妨让微信好友来帮你完成筛选,发现下一本适合你的好书。</h2>
            </div>
            <div id='page_function2_show'>
                <div id='page_function2_show_top'>
                    <div id='page_function2_face'>
                        <div id='page_function2_face_left'></div>
                        <div id='page_function2_face_right'></div>
                        <div id='page_function2_face_main'></div>
                        <div id='page_function2_face_text'></div>
                    </div>
                    <div id='page_function2_book'>
                        <div id='page_function2_book_07'></div>
                        <div id='page_function2_book_06'></div>
                        <div id='page_function2_book_05'></div>
                        <div id='page_function2_book_04'></div>
                        <div id='page_function2_book_03'></div>
                        <div id='page_function2_book_02'></div>
                        <div id='page_function2_book_01'></div>
                    </div>
                </div>
            </div>
        </div>
        <div class='page' id='page_function3'>
            <div id='page_function3_text'>
                <h1 id='page_function3_text_title'>和好友交流阅读感想</h1>
                <h2 id='page_function3_text_sub'>在阅读中与好友的想法邂逅,跟好友交流你的阅读感想,碰撞出更多火花。</h2>
            </div>
            <div id='page_function3_show'>
                <div id='page_function3_show_top'>
                    <div id='page_function3_talk'>
                        <div id='page_function3_talk_01'></div>
                        <div id='page_function3_talk_02'></div>
                        <div id='page_function3_talk_03'></div>
                        <div id='page_function3_talk_04'></div>
                        <div id='page_function3_talk_05'></div>
                        <div id='page_function3_talk_06'></div>
                        <div id='page_function3_book'></div>
                    </div>
                </div>
            </div>
        </div>
        <div class='page' id='page_function4'>
            <div id='page_function4_text'>
                <h1 id='page_function4_text_title'>和好友比拼读书排行</h1>
                <h2 id='page_function4_text_sub'>严肃的阅读游戏,在阅读中不仅收获知识,更收获与好友比拼的成就感。</h2>
            </div>
            <div id='page_function4_table'>
                <div id='page_function4_table_top'>
                    <div id='page_function4_table_background'></div>
                    <div id='page_function4_table_face_01'></div>
                    <div id='page_function4_table_face_02'></div>
                    <div id='page_function4_table_face_03'></div>
                    <div id='page_function4_table_face_04'></div>
                    <div id='page_function4_table_face_05'></div>
                    <div id='page_function4_table_column_01'></div>
                    <div id='page_function4_table_column_02'></div>
                    <div id='page_function4_table_column_03'></div>
                    <div id='page_function4_table_column_04'></div>
                    <div id='page_function4_table_column_05'></div>
                    <div id='page_function4_table_time_01'></div>
                    <div id='page_function4_table_time_02'></div>
                    <div id='page_function4_table_time_03'></div>
                    <div id='page_function4_table_time_04'></div>
                    <div id='page_function4_table_time_05'></div>
                </div>
            </div>
        </div>
    </div>
    <div id='pageControl'>
        <div class='pageControl' id='pageControl_button1'></div>
        <div class='pageControl' id='pageControl_button2'></div>
        <div class='pageControl' id='pageControl_button3'></div>
        <div class='pageControl' id='pageControl_button4'></div>
        <div class='pageControl' id='pageControl_button5'></div>
    </div>
</div>
<div id='logo'></div>
<div id='arrow_right'>
    <div id='arrow_right_height'></div>
</div>
<div id='arrow_left'>
    <div id='arrow_left_height'></div>
</div>
<div class='animateArrowDown' id='arrow_down'></div>
<div id='nav'>
    <a href='https://i.weread.qq.com/download?from=Website&type=iOS' id='nav_iPhone'>
        <div id='nav_iPhone_img'></div>
    </a>
    <a href='https://i.weread.qq.com/download?from=Website&type=Android' id='nav_android'>
        <div id='nav_android_img'></div>
    </a>
    <div id='nav_QRCode'>
        <div id='nav_QRCode_img'></div>
        <div id='nav_QRCode_hover'>
            <div id='nav_QRCode_hover_border'>
                <div id='nav_QRCode_hover_img'></div>
            </div>
        </div>
    </div>
</div>
<div id='load'>
    <div class='load' id='load_function'></div>
    <div class='load' id='load_function1_page1'></div>
    <div class='load' id='load_function1_page2'></div>
    <div class='load' id='load_function2_book1'></div>
    <div class='load' id='load_function2_book2'></div>
    <div class='load' id='load_function2_book3'></div>
    <div class='load' id='load_function2_book4'></div>
    <div class='load' id='load_function2_book5'></div>
    <div class='load' id='load_function2_book6'></div>
    <div class='load' id='load_function2_book7'></div>
    <div class='load' id='load_function3_book'></div>
    <div class='load' id='load_function4_background'></div>
</div>

页面的底部,需引入jQuery库和必要的JS文件,代码如下:

<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src='js/index.js'></script>
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:jQuery宽屏幻灯片图片文字轮播特效代码-微信读书页面源码

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.087691s