我想按下面三个图标切换上面的图片怎么用JS做

Posted 2023-05-07

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我想按下面三个图标切换上面的图片怎么用JS做相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html>
<head>
    <title>鼠标移动到按钮上，显示对应图片</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<style type="text/css">
*
margin: 0;
padding: 0;

ul
list-style: none;

a
text-decoration: none;

.main
position: relative;
width: 720px;
height: 340px;
margin: 100px auto 0;

.pic
position: relative;

.pic a img
width: 720px;
height: 340px;
position: absolute;
display: none;

.btn
width: 160px;
height: 20px;
position: absolute;
bottom: 10px;
left: 280px;
background: #6C6666;
border-radius: 10px;
opacity: 0.8;

.btn ul li
float: left;


.btn ul li
margin: 2.5px 2.5px;
width: 15px;
height: 15px;
background: #fff;
text-align: center;
border-radius: 7.5px;
cursor: pointer;/*鼠标指针变成小手*/


.btn .on
background: #db192a;

</style>
    <script type="text/javascript">
$(function()
$("div.btn ul li").hover(function()
   var index = $(this).index();
$(this).addClass("on").siblings().removeClass("on");
$("div.pic img").stop(true).fadeOut();
   $("div.pic img").eq(index).stop(true).fadeIn();

,function()
)

)

    </script>

   </head>
   <body>
    <div class="main">
      <div class="pic">
        <a href="#"><img src="img/test01.jpg"/ style="display:block;"></a>
        <a href="#"><img src="img/test02.jpg"/></a>
        <a href="#"><img src="img/test03.jpg"/></a>
        <a href="#"><img src="img/test04.jpg"/></a>
        <a href="#"><img src="img/test05.jpg"/></a>
        <a href="#"><img src="img/test06.jpg"/></a>
        <a href="#"><img src="img/test07.jpg"/></a>
        <a href="#"><img src="img/test08.jpg"/></a>
      </div>
      <div class="btn">
        <ul>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
        </ul>
      </div>
    </div>

   </body>
</html>

自己改一下图片的路径就可以了。

要想改变按钮的样式，自己可以根据需要修改。

我的是鼠标移动上去就改变图片，你也可以自己改成点击事件

参考技术A 幻灯片可以考虑网上找点jquery插件。