<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link href="index.css" rel="stylesheet" type="text/css"> </head> <body> <!--neirong--> <style> .neirong_box{ width:100%; background-color:#f0f0f0; border-top:1px solid #e6e6e6; padding-top:25px; margin-top:30px;} .neirong{ width:1100px; margin:0 auto; } .pic{ width:546px; float:left; position:relative;background-color: rgb(255, 255, 255); box-shadow: 0px 0px 2.79px 0.21px rgba(191, 191, 191, 0.004);} .pic img{ width:546px; height:417px;} .dot{ position:absolute; bottom:1%; right:5%; } .dot span{ float:left; margin-right:10px;border-radius: 50%;background-color: rgb(240, 240, 240);;width: 15px;height: 15px;} .dot .current_dot{background-color:#34759e; } </style> <div class="neirong_box"> <div class="neirong"> <div class="pic"> <img src="img/b0.png" alt="" /> <img src="img/b2.png" alt="" /> <img src="img/b3.png" alt="" /> <div class="dot"> <span></span> <span></span> <span></span> </div> </div> </div> </div> <script src="jquery.js"></script> <script > //neirong //$(function(){ // $(".dot span:eq(0)").addClass(" current_dot") // $(".pic img").hide().first().show() // var n=0 // $(".dot span").mouseenter(function(){ // // // n=$(this).index() // $(".pic img").hide().eq(n).show() // }) // //$(".dot span").mouseenter(function(){ // $(this).addClass(" current_dot") // .siblings().removeClass(" current_dot") // }) // }) // 简洁压缩版 $(function(){ $(".dot span:eq(0)").addClass(" current_dot") $(".pic img").hide().first().show() $(".dot span").mouseenter(function(){ $(".pic img").hide().eq($(this).index()).show() $(this).addClass(" current_dot") .siblings().removeClass(" current_dot") }) }) </script> </body> </html>
点击哪个按钮对应图片显示,按钮对应颜色显示
最新推荐文章于 2021-06-17 02:59:31 发布