web广告商品展示效果
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
项目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;}
$("img").hide()//hide()一般写在开头
$("img").eq(0).show();
var i=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")
var m=$("span").index(this)//点对象自己单独的变量
$("img").hide();
$("img").eq(m).show();
})
项目2
//图片不能相同
$("img").hide()
$("img").eq(0).show()
var m=0
var n=$("img").length-1 //n是4图片有5张
function lb(){//function执行类型
if(m m=m+1 }else{ m=0 //第五张图片回到第一张图片 } $("img").hide(); $("img").eq(m).show() } setInterval(lb,1000) lb自己定义循环执行 setTimeout(过程名,等待时间)只能执行一次就结束了 项目3
img{float:left;}
.big_box{width:372px;height:494px;overflow:hidden;position: relative;}
.img_box{width:1860px;overflow:hidden;}//总长度是里面的滑动长度