jQuery實現(xiàn)選項卡切換圖片

更新時間：2022年01月25日 09:38:21 作者：丁七歲

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)選項卡切換圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery實現(xiàn)選項卡切換圖片的具體代碼，供大家參考，具體內(nèi)容如下

效果：

弄出來這個效果，你需要找4張大小相同的圖片，大小不一樣弄出來效果會很難看

代碼：

<!DOCTYPE html>
<html lang="ch">
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title>使用jQuery實現(xiàn)選項卡切換圖片</title>
? ? ? ? <style>
? ? ? ? ? ? *{
? ? ? ? ? ? ? ? margin: 0;
? ? ? ? ? ? ? ? padding: 0;
? ? ? ? ? ? }
? ? ? ? ? ? .box{
? ? ? ? ? ? ? ? width: 533px;
? ? ? ? ? ? ? ? height: 350px;
? ? ? ? ? ? ? ? border: 1px solid plum;
? ? ? ? ? ? ? ? margin: 50px auto;
? ? ? ? ? ? }
? ? ? ? ? ? .nav>li{
? ? ? ? ? ? ? ? list-style: none;
? ? ? ? ? ? ? ? width: 133.25px; /*總寬度除以4得到的*/
? ? ? ? ? ? ? ? height: 50px;
? ? ? ? ? ? ? ? background: #8000ff;
? ? ? ? ? ? ? ? text-align: center;
? ? ? ? ? ? ? ? line-height: 50px;
? ? ? ? ? ? ? ? float: left;
? ? ? ? ? ? }
? ? ? ? ? ? .nav>.current{
? ? ? ? ? ? ? ? background: #69ff8f;
? ? ? ? ? ? }
? ? ? ? ? ? .content>li{
? ? ? ? ? ? ? ? list-style: none;
? ? ? ? ? ? ? ? display: none;
? ? ? ? ? ? }
? ? ? ? ? ? .content>.show{
? ? ? ? ? ? ? ? display: block;
? ? ? ? ? ? }
? ? ? ? </style>
? ? ? ? <script src="js/jquery-1.12.4.js"></script>
? ? ? ? <script>
? ? ? ? ? ? $(function () {
? ? ? ? ? ? ? ? // 監(jiān)聽選項卡的移入事件
? ? ? ? ? ? ? ? $(".nav>li").mouseenter(function () {
? ? ? ? ? ? ? ? ? ? // 修改被移入選項卡的背景顏色
? ? ? ? ? ? ? ? ? ? $(this).addClass("current");
? ? ? ? ? ? ? ? ? ? // 還原其它兄弟選項卡的背景顏色
? ? ? ? ? ? ? ? ? ? $(this).siblings().removeClass("current");
? ? ? ? ? ? ? ? ? ? // 獲取當前移出選項卡的索引
? ? ? ? ? ? ? ? ? ? var index = $(this).index();
? ? ? ? ? ? ? ? ? ? // 根據(jù)索引找到對應(yīng)的圖片
? ? ? ? ? ? ? ? ? ? var $li = $(".content>li").eq(index);
? ? ? ? ? ? ? ? ? ? // 隱藏非當前的其它圖片
? ? ? ? ? ? ? ? ? ? $li.siblings().removeClass("show");
? ? ? ? ? ? ? ? ? ? // 顯示對應(yīng)的圖片
? ? ? ? ? ? ? ? ? ? $li.addClass("show");
? ? ? ? ? ? ? ? });
? ? ? ? ? ? });
? ? ? ? </script>
? ? </head>
? ? <body>
? ? ? ? <div class="box">
? ? ? ? ? ? <ul class="nav">
? ? ? ? ? ? ? ? <li class="current">圖片1</li>
? ? ? ? ? ? ? ? <li>圖片2</li>
? ? ? ? ? ? ? ? <li>圖片3</li>
? ? ? ? ? ? ? ? <li>圖片4</li>
? ? ? ? ? ? </ul>
? ? ? ? ? ? <ul class="content">
? ? ? ? ? ? ? ? <li class="show"><img src="img/111.jpg" alt=""></li>
? ? ? ? ? ? ? ? <li><img src="img/222.jpg" alt=""></li>
? ? ? ? ? ? ? ? <li><img src="img/333.jpg" alt=""></li>
? ? ? ? ? ? ? ? <li><img src="img/444.jpg" alt=""></li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? </body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: