web广告商品展示效果.docx
- 文档编号:5957505
- 上传时间:2023-01-02
- 格式:DOCX
- 页数:13
- 大小:19.26KB
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:
left;width:
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(
function(){
if(i<$("img").length-1){//向右计算机数字要和图片数字一致
i=i+1
}else{
i=0;}//i大于多少i就回到原位0表示第一张图片
$("img").hide()
$("img").eq(i).show();//结果显示要调用到界面
})
$("span").click(
function(){
$("span").removeClass("dian")//删除写在最上面
$(this).addClass("dian")
varm=$("span").index(this)//点对象自己单独的变量
$("img").hide();
$("img").eq(m).show();
})
项目2
DOCTYPEhtml>
$("img").hide()
$("img").eq(0).show()
varm=0
varn=$("img").length-1//n是4图片有5张
functionlb(){//function执行类型
if(m m=m+1 }else{ m=0//第五张图片回到第一张图片 } $("img").hide(); $("img").eq(m).show() } setInterval(lb,1000)lb自己定义循环执行setTimeout(过程名,等待时间)只能执行一次就结束了 项目3 DOCTYPEhtml>
img{float:
left;}
.big_box{width:
372px;height:
494px;overflow:
hidden;position:
relative;}
.img_box{width:
1860px;overflow:
hidden;}//总长度是里面的滑动长度
functionrun(){//单独定义function是要调用计时器的声明
$(".img_box").animate({marginLeft:
-372},2000,//整个声明就是移动的声明回调
function(){
$(".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
DOCTYPEhtml>
img{width:
372px;height:
494px;float:
left;}//图片的样式可以放大或缩小图片overflow.hidden超出相框big_box就会被隐藏
.big_box{width:
372px;height:
494px;position:
relative;}//父级定位
.img_box{width:
1860px;position:
absolute;}