jQuery实现带进度条幻灯片循环周期特效



66 262 88



特效描述:jQuery实现 带进度条 幻灯片 循环周期特效,jQuery实现带进度条幻灯片循环周期特效

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/presentationCycle.css" />

2. 引入JS

<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.cycle.all.min.js'></script>
<script type='text/javascript' src='js/presentationCycle.js'></script>

3. HTML代码

        <div id="presentation_container" class="pc_container">
            <div class="pc_item">
                <div class="desc">
                    <h1>Server Park</h1>
                    Consectetur adipiscing elit. Nunc quis tellus eros.
                    Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
                    dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
                    ligula ut nunc.
                </div>
                <img src="images/slide1.jpg" alt="slide1" />
            </div>
            <div class="pc_item">
                <div class="desc">
                    <h1>iPhone Apps</h1>
                    Consectetur adipiscing elit. Nunc quis tellus eros.
                    Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
                    dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
                    ligula ut nunc.
                </div>
                <img src="images/slide2.jpg" alt="slide2" />
            </div>
            <div class="pc_item">
                <div class="desc" style="left: 0px;">
                    <h1>Wordpress Extensions</h1>
                    Consectetur adipiscing elit. Nunc quis tellus eros.
                    Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
                    dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
                    ligula ut nunc.
                </div>
                <img src="images/slide3.jpg" alt="slide3" />
            </div>
            <div class="pc_item">
                <div class="desc" style="left: 165px;">
                    <h1>City Skyline</h1>
                    Consectetur adipiscing elit. Nunc quis tellus eros.
                    Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
                    dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
                    ligula ut nunc.
                </div>
                <img src="images/slide4.jpg" alt="slide4" />
            </div>
            <div class="pc_item">
                <div class="desc">
                    <h1>Mario Finds Peach</h1>
                    Consectetur adipiscing elit. Nunc quis tellus eros.
                    Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
                    dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
                    ligula ut nunc.
                </div>
                <img src="images/slide5.jpg" alt="slide5" />
            </div>
            <div class="pc_item">
                <div class="desc">
                    <h1>Said and Done</h1>
                    Consectetur adipiscing elit. Nunc quis tellus eros.
                    Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
                    dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
                    ligula ut nunc.
                </div>
                <img src="images/slide6.jpg" alt="slide6" />
            </div>
        </div>
        <script type="text/javascript">
            presentationCycle.init();
        </script>
<div style="text-align:center; clear:both; color: #000;">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动滑过 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 滑动星星打分 焦点图幻灯片 其他更多 图片滑动 图片切换 图片轮播 选项卡自动切换 进度条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到