问：图片切换

答：

1.利用jquery

2.利用addClass.removeClass

目录

 1.css样式（style）

2.展示部分

3.jquery代码部分（script）

 1.css样式（style）

    <style>
			.picture{
				width: 301px;
			}
			div ul li{
				list-style: none;                //去除li前面的点·
				float: left;                     //左浮动
				border-left: red solid 2px;
				border-top:red solid 2px;
				border-bottom: red solid 2px;
				width: 97px;
				text-align: center;              //文字行居中对齐
				line-height: 50px;               //行高
				background-color: aqua;
			}
			.Xuanzhong{background-color: #55ff00;}
			div ul{padding-left: 0px;}
				
			#last_li{border-right: red solid 2px;}
			.head{width: 305px;}
			.Xianshi{display: block;}
			.Yincang{display: none;}
		</style>

2.展示部分

        <div class="head">
			<ul>
				<li class="Xuanzhong">图片1</li>
				<li>图片2</li>
				<li id="last_li">图片3</li>
			</ul>
		</div>
		<div class="picture">
			<img class="Xianshi" src="img/图片%20(1).bmp" />
			<img class="Yincang" src="img/图片%20(2).bmp"/>
			<img class="Yincang" src="img/图片%20(3).bmp"/>
		</div>

3.jquery代码部分（script）

<script>
	$(document).ready(function(){
			$("li").hover(function(){
				$(this).addClass("Xuanzhong").siblings("li").removeClass("Xuanzhong")
				$("img").removeClass()
                $("img").eq($(this).index()).addClass("Xianshi").//续上 下一行siblings
                siblings("img").addClass("Yincang")
				})
			})
</script>

------------分割线---------------

菜鸟古古 2022-1-4 10:36:44

                2022-1-6 18:29:49 添加分类