你的位置:首页 > 网页设计

[网页设计]第十篇.轮播


使用bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入bootstrap.min.js.

<div id="carousel-example-generic" data-ride="carousel">

            <!—轮播导航 -->

 

             <ol >

                <li data-target="#carousel-example-generic" data-slide-to="0" ></li>

                <li data-target="#carousel-example-generic" data-slide-to="1"></li>

                <li data-target="#carousel-example-generic" data-slide-to="2"></li>

            </ol>

 

            <!—轮播项目 -->

            <div role="listbox">

                <div >

 

 

                    <img src="~/images/Chrysanthemum.jpg" />

                    <div >

                        ffffffff

                    </div>

                </div>

                <div >

 

                    <img src="~/images/Desert.jpg" />

                    <div >

                        xxxxxxxxxxxxxxxx

                    </div>

                </div>

                <div >

 

 

                    <img src="~/images/Lighthouse.jpg" />

                    <div >

                       mmmmmmmmmmmm

                    </div>

                </div>

            </div>

 

            <!—轮播导航 -->

            <a href="#carousel-example-generic" role="button" data-slide="prev">

                <span ></span>

                <span >Previous</span>

            </a>

            <a href="#carousel-example-generic" role="button" data-slide="next">

                <span ></span>

                <span >Next</span>

            </a>

        </div>

 

效果如下: