java 图片手动切换_左右图片切换 - Java House - BlogJava

最新推荐文章于 2022-02-22 13:54:27 发布

原创最新推荐文章于 2022-02-22 13:54:27 发布 · 212 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java 图片手动切换

博客展示了通过HTML和jQuery实现图片手动切换的代码。定义了HTML元素的样式，利用jQuery获取切换div的宽度、总个数等信息，实现自动切换和手动点击切换功能，如点击左右按钮或缩略图可切换图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html>

#zhucai{width:996px;margin:auto;height:828px;overflow:hidden;}.zc1{height:336px;width:949px;margin:auto;position:relative;}.zc2{width:949px;margin:auto;position:relative;}.rzsj{position:absolute;z-index:-1;left:63px;top:-45px;}.zc4{margin:0px 66px 0px 63px;min-height:215px;height:auto !important;_height:215px;padding-top:1px;}.zc3{background:url(../images/zhucai/zc_47.jpg) repeat-y;}.zc3 ul li{display:inline;float:left;margin-right:1px;height:35px;margin-bottom:1px;overflow:hidden;width:62px;}/**/.fwlc{}.fwlc1{padding-left:80px;width:225px;float:left;padding-top:57px;}.fwlc2{float:right;width:610px;}.bztext{color:#333;}.bztext p{font-size:14px;}.thub{text-align:center;padding-top:12px;}.thub img{margin:0px 10px;}.btn_z{position:absolute;left:0;top:20px;z-index:1;}.btn_y{position:absolute;right:0;top:20px;z-index:1;}.box{width:760px;height:280px;position:relative;overflow:hidden;margin:0 auto;}.box .boxlist{width:4560px;height:280px;position:absolute;left:0px;text-align:center;}.serverblock{width:760x;height:280px;margin:0px auto;float:left;}.fwlc1_1{width:200px;float:left;margin-top:57px;}.fwlc2_1{float:left;width:560px;}

$(function(){varw=$("#boxlist>.serverblock").width();//每一个切换的div宽度varpages=1;//初始运行第一个divvarimglength=$("#boxlist>.serverblock").length;//切换div的总个数varcur=pages;//当前运行的div$("#boxlist").everyTime("3s","a",auto);functionauto(){if(pages

$("#boxlist").animate({left:"-"+w*pages},500);

pages++;

}else{

pages=1;

$("#boxlist").animate({left:"0px"},500);

}

cur=pages;

}

$("#thubnum>img").click(function(){

pages=$("#thubnum>img").index(this);

$("#boxlist").animate({left:"-"+w*pages},500);

cur=pages;