一共四个按钮,点第一个按钮出现图片一,点第二按钮出现图片二,点第三按钮出现图片三,点第四按钮出现图片四
5条回答 默认 最新
- CSDN专家-showbo 2021-09-28 16:30关注
这种效果可以吗?有帮助麻烦点个采纳【本回答右上角】,谢谢~~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery带缩略图焦点图淡入淡切换特效</title> <style> /*Time for the CSS*/ * { margin: 0; padding: 0; } body { background: #ccc; } .slider { width: 640px; /*Same as width of the large image*/ position: relative; /*Instead of height we will use padding*/ padding-bottom: 320px; /*That helps bring the labels down*/ margin: 20px auto 100px auto; /*Lets add a shadow*/ box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); } /*Last thing remaining is to add transitions*/ .slider > img { position: absolute; left: 0; top: 100px; transition: all 0.5s; } .slider input[name='slide_switch'] { display: none; } .slider label { /*Lets add some spacing for the thumbnails*/ margin: 18px 0 0 18px; border: 3px solid #999; float: left; cursor: pointer; transition: all 0.5s; /*Default style = low opacity*/ opacity: 0.6; } .slider label img { display: block; } .slider label.focus { border-color: #666; opacity: 1; } </style> </head> <body> <div class="slider"> <label class="focus"> <img src="http://demo.lanrenzhijia.com/demo/50/5019/demo/images/3yiC6Yq.jpg" width="100" /> </label> <label> <img src="http://demo.lanrenzhijia.com/demo/50/5019/demo/images/40Ly3VB.jpg" width="100" /> </label> <label> <img src="http://demo.lanrenzhijia.com/demo/50/5019/demo/images/00kih8g.jpg" width="100" /> </label> <label> <img src="http://demo.lanrenzhijia.com/demo/50/5019/demo/images/2rT2vdx.jpg" width="100" /> </label> <label> <img src="http://demo.lanrenzhijia.com/demo/50/5019/demo/images/8k3N3EL.jpg" width="100" /> </label> <img src="http://demo.lanrenzhijia.com/demo/50/5019/demo/images/3yiC6Yq.jpg" id="imgBig" /> </div> <script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script> <script> var imgs = $('.slider label img').click(function () { $('#imgBig').attr('src', this.src); imgs.parent().removeClass('focus'); this.parentNode.className = 'focus' }) </script> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 3无用
悬赏问题
- ¥15 WPF 大屏看板表格背景图片设置
- ¥15 这个主板怎么能扩出一两个sata口
- ¥15 不是,这到底错哪儿了😭
- ¥15 2020长安杯与连接网探
- ¥15 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么
- ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
- ¥16 mybatis的代理对象无法通过@Autowired装填
- ¥15 可见光定位matlab仿真
- ¥15 arduino 四自由度机械臂
- ¥15 wordpress 产品图片 GIF 没法显示