HTML(HBuilder)作业题9- 右点击左大图（jquery）

问：点击右面小图（带透明度），放大展示图片

答：$(" ").click(function()

$(" ").html($html)

目录

1.css样式（style）

2.展示部分

3.jquery代码部分（script）

---

1.css样式（style）

    <style>
        #bg {
			border-radius: 5px;
			width: 800px;
			height: 700px;}

		#da {
			margin: 0 auto;
			height: 550px;
			border: 1px solid yellowgreen;
			width: 550px;
			float: left;}

		#img {
			display: none;
			width: 550px;
			background-color: yellowgreen;}

		#xiao {
			height: 500px;
			margin: 0 auto;
			float: left;}

		li {
			border: 1px solid #007788;
			width: 100;
			height: 100px;
			padding: 7px;
			margin: 10px;
			list-style: none;
			opacity: 0.25;/* 透明度 */}
    <style>

2.展示部分

        <div id="bg">
			<div id="da">
				<div id="img">

				</div>
			</div>
			<div id="xiao">
				<li><img src="1.png" width="100"></li>
				<li><img src="2.png" width="100"></li>
				<li><img src="3.png" width="100"></li>
				<li><img src="4.png" width="100"></li>
			</div>
		</div>

3.jquery代码部分（script）

        <script>            
            $(function() {
				$("#img").html("<img src='1.png' width='550'>").fadeIn(500);
				$("li:first").css({
					"opacity": "1",
					"background-color": "yellowgreen"
				});
				// li单击时候的事件
				$("li").click(function() {
					lunhuan($(this));//执行函数lunhuan
				})
				//轮换函数
				function lunhuan(index) {
					$("#img").hide();
					$(index).css({//被点击的小图透明度opacity变1
						"opacity": "1",
						"background-color": "yellowgreen"//添加黄绿色背景
					});
					$(index).siblings().css({
						"opacity": "0.3",//未点击的小图透明度opacity变回0.3
						"background-color": ""//取消背景
					});
					var $src = $(index).children("img").attr("src");
					//设置变量$src为这个位置index下children的图片img的资源src
					$html = "<img src='" + $src + "' width='550'>";
					//'" + $src + "' 为图片地址
					$("#img").html($html).fadeIn(500);
					//在#img下增加html命令$html
					//fadeIn：500ms增大透明度

				}
				//模拟单击事件，自动轮播
				//可以省略
				$i = 1;
				var $auto = setInterval(function() {
					$("li").eq($i).trigger("click");//第 $i张图片li为click
					$i++;//i++
					if ($i == 4) {
						$i = 0;//每4个后轮回为第0个
					}
				}, 3000)
			})
        <script>

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

菜鸟古古 2022-1-6 18:21:14