web广告商品展示效果.docx
《web广告商品展示效果.docx》由会员分享,可在线阅读,更多相关《web广告商品展示效果.docx(13页珍藏版)》请在冰豆网上搜索。
web广告商品展示效果
项目1
button{float:
left;width:
30px;height:
80px;position:
relative;top:
207px;}//不需要写两个button围绕在图片周围即可
img{float:
left;}
span{float:
10px;height:
10px;background-color:
bisque;border-radius:
5px;margin:
010px;}
.dian{background-color:
blueviolet;}
<
>
both;">
$("img").hide()//hide()一般写在开头
$("img").eq(0).show();
vari=0//如果要多个对象的选择就要用变量
$("button").first().click(
function(){
if(i>0){
i=i-1
}else{
i=$("img").length-1;}//循环图片的长度-1表示的计算机识别的从0开始的数字
$("img").hide()
$("img").eq(i).show();
})//标准jquery每个都要有这样结尾
$("button").last().click(
if(i<$("img").length-1){//向右计算机数字要和图片数字一致
i=i+1
i=0;}//i大于多少i就回到原位0表示第一张图片
$("img").eq(i).show();//结果显示要调用到界面
})
$("span").click(
$("span").removeClass("dian")//删除写在最上面
$(this).addClass("dian")
varm=$("span").index(this)//点对象自己单独的变量
$("img").hide();
$("img").eq(m).show();
项目2
DOCTYPEhtml>
//图片不能相同
$("img").eq(0).show()
varm=0
varn=$("img").length-1//n是4图片有5张
functionlb(){//function执行类型
if(mm=m+1}else{m=0//第五张图片回到第一张图片}$("img").hide();$("img").eq(m).show()}setInterval(lb,1000)lb自己定义循环执行setTimeout(过程名,等待时间)只能执行一次就结束了 项目3DOCTYPEhtml>
m=m+1
m=0//第五张图片回到第一张图片
}
$("img").eq(m).show()
setInterval(lb,1000)lb自己定义循环执行setTimeout(过程名,等待时间)只能执行一次就结束了
项目3
.big_box{width:
372px;height:
494px;overflow:
hidden;position:
relative;}
.img_box{width:
1860px;overflow:
hidden;}//总长度是里面的滑动长度
functionrun(){//单独定义function是要调用计时器的声明
$(".img_box").animate({marginLeft:
-372},2000,//整个声明就是移动的声明回调
$(".img_box").css({marginLeft:
0})
$(".img_boximg:
first").insertAfter(".img_boximg:
last")
runs=setInterval(run,2000)
$(".img_box").mouseenter(function(){//只有中间的东西在动
clearInterval(runs)//clearInterval(名称)停止计时器run和runs都不影响
.mouseleave(function(){//鼠标离开事件和上面的代码是用的同一个img_box的
runs=setInterval(run,1000)//定时器=setInterval(run,1000)(名称/过程,等待时间)
)
停止动画和animate联系
Stop(停止全部,去到结束)
停止全部true停止所有该对象上发生或将要发生的动画false停止当前执行的动画
去到结束true停止并跳转到最后一帧false停止当前位置
项目4
img{width:
494px;float:
left;}//图片的样式可以放大或缩小图片overflow.hidden超出相框big_box就会被隐藏
494px;position:
relative;}//父级定位
1860px;position:
absolute;}
//相框相当于最外面的
vari=0
functionrun(){
if(i<4){//计算机的i都是从0计数的
}else{i=0}//第一张图片
374*i})//定义一个变量不能有其他没定义过的变量出现
setInterval(run,1000)
项目5
span{background-color:
aqua;}//点的颜色已经在这设置了后面的btnspan不需要设置颜色因为addclass自动会添加类颜色
relative;overflow:
hidden;}//相框相框一般是relative的
absolute;}//定位格式absolute参考父级
.btn{position:
absolute;bottom:
0px;left:
70px;}//写在div中审判的位置是下面的70是372/5张图
.btnspan{float:
40px;height:
40px;border-radius:
50%;text-align:
center;margin:
10px;cursor:
pointer;text-decoration:
none}//cursor是点击时候触发
crimson;}//你点击按钮之后的颜色
1
2
3
4
5
//span写在最后一个div之前框在图片里
$(".btnspan").eq(0).addClass("dian")//默认第一个的颜色
functionrun(){//run定时器要写在最后
if(i<4){i=i+1
}else{i=0}
$(".img_box").animate({left:
-372*i},0);//图片在动
$(".btnspan").removeClass("dian");//点的事件
$(".btnspan").eq(i).addClass("dian");
$(".btnspan").click(//这里的对象事件是btnspan
varn=$(".btnspan").index(this);//获取鼠标点击位置的参数
-372*n},0);//变量变化
$(".btnspan").removeClass("dian");
$(".btnspan").eq(n).addClass("dian");
runs=setInterval(run,1000)
项目6
body{margin:
0;padding:
0;}
aqua;}
hidden;}//父级一般用relative
70px;}//absolute可以呈现出来
none}
crimson;}
.text_box{position:
absolute;}//字体要突出出现在最上面
.p{display:
block;text-align:
#FFE4C4;}
.btn2{position:
absolute;top:
200px;width:
372px;}//width是两边的距离
.btn2-1{float:
.btn2-2{float:
right;}
//也写在div中
both;">客人:老板来一份西红柿炒鸡蛋
客人:
老板来一份西红柿炒鸡蛋
五分钟端上菜放,发现没有放鸡蛋。
顾客大怒问为什么没有放鸡蛋
老板:
鸡蛋没有炒过西红柿给气跑了
那好,给我来个鸡蛋炒西红柿
好的,你稍等,菜马上好
$(".img_boximg").eq(0).show();
$(".text_boxp").hide();
$(".text_boxp").eq(0).show();
$(".btnspan").eq(0).addClass("dian")
-372*i},0);
$(".text_boxp").hide()
$(".text_boxp").eq(i).show()
$(".btnspan").click(
varn=$(".btnspan").index(this);
-372*n},0);
$(".text_boxp").eq(n).show()
vark=0
$(".btn2-1").click(
if(k<$(".img_box").length-1){k=k+1}else{
k=0;$(".img_box").css({left:
$(".img_boximg").stop(true,true).animate({left:
-220*k},500)//stop(停止全部,去到结束)true停止所有给对象上发生的动画false停止当前执行的动画去到结束true停止并调到最后一帧flase停止到当前的位置
$(".btnspan").eq(k).addClass("dian");
$(".p").hide();
$(".p").eq(k).show();
if(k==$(".img_boximg").length-1){
$(".btnspan").eq(0).addClass("dian");
$(".p").eq(0).show();
$(".btn2-2").click(
if(k>0){k=k-1}else{
k=2;$(".img_box").css({left:
-1860})//K=2你一次翻动几个
$(".img_boximg").animate({left:
-220*k},500)
$(".p").hide();//不能省略的要写出
if(k==$(".img_box").length-1){
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1