网页设计与制作项目教程作者陈义文主编项目4任务4课件.pptVIP

项目四 网站首页制作 任务要求 利用jQuery设计产品图片轮播广告，要求能够左右切换及直接切换。 最终效果 操作提示 ? 本次任务需要用到的两个jQuery脚本框架程序即“jquery.min.js”和“jquery.flexslider. min.js”，任务素材中已经提供，也可以到网站“/”或“http://flex.madebymufffin. com”上下载。 ? 将这两个脚本文件应用到“index.htm”。放置在头元素“head”部分，代码见表4-16。 操作提示 ? 在CSS文件中自定义类flexslider和slider，代码见表4-17。 操作提示 ? 在“div.flexslider”中插入5张图片，每插入一张图片按一次Enter键。选择5张图片，单击“属性”面板上的“列表”按钮，将段落格式转化为列表。代码见表4-18。 操作提示 ? 选择“ul”，在“属性”面板的“类”下拉列表中选择“slides”，如图4-12所示。 操作提示 ? 编写脚本语句见表4-19（素材中已经提供该代码）。 操作提示 ? 至此，产品图片轮播已经显现，接下来设计轮播效果。首先添加能左右单击切换图片的功能，CSS代码见表4-20。 操作提示 ? 然后添加直接单击准确切换图片的功能，CSS代码见表4-21。 操作提示 也可以设计为数字链接的效果，只需要修改相应的CS