用户登录

打开 index.html .. 找到页面的 hero 区域的代码 .. 现在它里面已经有了一个项目 .. 每个项目都会放在一个带 item 类的包装里 ..

旋转木马或者幻灯片需要一组这样的项目 ..

再复制两份这个 item .. 然后修改一下里面的内容 ..

Landrover,全新揽胜星脉,标新立异的前卫揽胜。

再修改一个这个项目里的图片 .. 我已经在 app 下面准备好了这些图片资源 .. 在 images 这里 ..

然后再修改一下,最后这个项目 ..

Discovery,发现神行,发现的绝佳时刻。 再项目的 app,images 里面,找一张图片 ... 复制一下图片的名字 .. 然后修改一下这个项目下面的图片的位置 ..

再预览一下 .. 现在这些项目都会堆叠到一块儿显示 ...

在我们的这个页面上已经加载了我们要实现旋转木马功能需要用的 slick 这个东西 .. 再去配置一下 ..

先找到 hero 这个包装 .. 在上面再加上一个 carousel ,在我们的自定义脚本里面,可以使用这个容器里的 css 类,定位到这个元素,然后去应用一个 slick 方法,这样它里面包装的东西就是一个旋转木马或者幻灯片了 ..

在 app .. scripts 里面,找到 main.js ... 先添加点注释 ...

先用 jQuery 定位到想要使用旋转木马功能的容器 .. 这里就是 .ui.hero.carousel .. 我的页面上已经加载了 slick 提供的脚本 .. 它里面定义了 slick 这个方法 .. 这里用一下这个方法 ..

之前堆叠到一块儿显示的几个项目现在就会只显示一个了 ... 左右拖动它 .. 可以控制这个旋转木马的显示 ..

旋转木马 / 幻灯片:基本功能《 网页设计案例:旋转木马 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点