您的位置：首页 > 其它

点击哪个按钮对应图片显示，按钮对应颜色显示

2017-09-23 11:38 573 查看 
<!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>




                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航