web日志之图片预览和滑动课案.doc

项目1 html head script src=js/jquery.js /script//jquery 是JS的类型 一定要加上jqueryscript meta charset=UTF-8 title/title /head body select option value=1ONE/option option value=1TWO/option option value=1THREE/option option value=1FOUR/option option value=1THREE/option /select//下拉菜单 br / img src=img/p_1.png / script $(img).attr(src,img/p_3.png )//attr捕获里面的同html和text val。用于修改标签属性 img 需要该什么 src attr一般用于链接的是标签 /script /body /html html head script src=js/jquery.js /script meta charset=UTF-8 title/title /head body select option value=1ONE/option option value=2TWO/option option value=3THREE/option option value=4FOUR/option option value=5THREE/option /select br / img src=img/p_1.png ///后面需要的对象调用声明 尽量不要加/ script $(select).change(//需要改什么 就在（）里写什么 change改变状态选择 function(){ var a=$(this).val();//function 获取变量值 与JS相互联系 你等于我我等于你 val（）捕获所设置的value的值 var a变量关联性 this是 select中 document.title=a//检测 $(img).attr(src , img/p_+ a +.png)不能有/格式只有img 有/ 双引号中放的是字符集所以a在外面 } ) /script /body /html 项目2 !DOCTYPE html html head style span{float:left; width: 10px; height:10px; background-color: bisque;border-radius: 5px;margin: 0 10px;}//css定义span .dian{background-color: blueviolet;}//类定义 要调用用class /style script src=js/jquery.js/script meta charset=UTF-8 title/title /head body div span class=dian/span//加上一个类 span /span span /span span /span span /span /div img src=img/p_1.png / script $(span).click(//要操作span 鼠标在外面 function(){ $(this).addClass(dian).siblings().removeClass(dian)//写在function是想要的事件 this 是审判的第几个位置 addClass 增加一个类 var a=$(span).index(this)//定义a等于一个操作 var后面要有$符号 index（）返回对象在兄弟级中的位置 index（“标签名“）返回对象在兄弟级中的位置 限定标签名”“是在相同标签中的位置 a=a+1//span是从0开始计数的而图片没有0 $(img).attr(src,img/p_+a+.png)//改变标签属性图像变化或者改变图片的序号也可改变 } ) /script /body /html !DOCTYPE html html head style .box{width:372px;height: 494px;overflow:hidden}//box专门用于存放