jQuery选项卡鼠标滑动切换右侧图片js特效代码

下载地址

一款带背景颜色变化的垂直选项卡图片滑动切换效果代码。$(".tab .menus li").each(function(){ $(".tab .menus li").mouseover(function(){ $(".tab .menus li").removeClass("bg"); $(this).addClass("bg"); var index = $(this).index(); var arr = [ "assets/bg1.png", "assets/bg2.png", "assets/bg3.png", "assets/bg4.png", "assets/bg5.png", "assets/bg6.png", "assets/bg7.png", ] // 背景图片 不需要注释即可 $(".tab .scroll").css("margin-top",-index*800+"px"); $(".tab").css("background-image","url("+arr[index]+")")// 背景图片 不需要注释即可 })})

b4a47e881ccf9afe60b070cc1f848349161978.jpg

dd:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery选项卡图片切换是一种常见的网页设计技术,它可以实现在一个页面上切换不同的内容和图片展示。以下是一种常见的实现方式: 1. HTML结构:首先,在HTML中创建一个包含选项卡标题和内容的容器。每个选项卡标题对应一个内容区域,可以使用无序列表(ul)和列表项(li)来创建选项卡标题,使用div元素来创建内容区域。 ```html <div class="tabs"> <ul class="tab-titles"> <li class="active">Tab 1</li> <li>Tab 2</li> <li>Tab 3</li> </ul> <div class="tab-content"> <div class="tab-pane active"> <img src="image1.jpg" alt="Image 1"> </div> <div class="tab-pane"> <img src="image2.jpg" alt="Image 2"> </div> <div class="tab-pane"> <img src="image3.jpg" alt="Image 3"> </div> </div> </div> ``` 2. CSS样式:为选项卡容器和内容区域设置合适的样式,例如设置选项卡标题为水平排列,内容区域隐藏除当前选项卡外的内容。 ```css .tabs { width: 100%; } .tab-titles { list-style: none; padding: 0; margin: 0; } .tab-titles li { display: inline-block; padding: 10px; background-color: #ccc; cursor: pointer; } .tab-titles li.active { background-color: #f00; color: #fff; } .tab-content { display: flex; } .tab-pane { flex: 1; display: none; } .tab-pane.active { display: block; } ``` 3. jQuery代码:使用jQuery来实现选项卡切换效果。当点击选项卡标题时,切换对应的内容区域显示。 ```javascript $(document).ready(function() { $('.tab-titles li').click(function() { var index = $(this).index(); $('.tab-titles li').removeClass('active'); $(this).addClass('active'); $('.tab-pane').removeClass('active'); $('.tab-pane').eq(index).addClass('active'); }); }); ``` 以上代码实现了一个简单的jQuery选项卡图片切换效果。点击不同的选项卡标题时,对应的内容区域会显示相应的图片

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值