jQuery综合应用设计实例——手动切换图片特效的设计与实现

最新推荐文章于 2024-05-06 10:59:29 发布

美女吃了

最新推荐文章于 2024-05-06 10:59:29 发布

阅读量588

点赞数 1

分类专栏： jQuery 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_52955054/article/details/124510408

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

功能要求：使用jQuery实现手动切换图片特效。当用户将鼠标悬浮于左侧的文字上时文字变成红色，并且右侧图片自动切换到对应的画面。

通过HTML文件和CSS文件实现。

效果图如下：

图片文件层次结构：

具体代码如下：

jQuery手动切换图片特效.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery手动切换图片特效的设计与实现</title>
		<link rel="stylesheet" href="css/ppt2.css">
        <script src="js/jquery-1.12.3.min.js"></script>
    </head>
    <body>
	    <!--标题-->
        <h3>湖南五大红色旅游景点</h3>
		<!--水平线-->
        <hr>
		<!--图片轮播区域-->
        <div class="ppt-container">
            <ul>
                <li onmouseover="showImage(1)">韶山</li>
				<hr>
                <li onmouseover="showImage(2)">岳麓山</li>
				<hr>
                <li onmouseover="showImage(3)">花明楼</li>
				<hr>
				<li onmouseover="showImage(4)">芷江受降旧址和纪念馆</li>
				<hr>
                <li onmouseover="showImage(5)">彭德怀故居和纪念馆</li>
				<hr>
            </ul>
			<img id="pptImage" src="image/ppt2/3.jpg" />
        </div>
        <script type="text/javascript">
		//显示指定名称的图片
			function showImage(name){
				$("#pptImage").attr("src","image/ppt2/"+name+".jpg");
			}
        </script>
	</body>
</html>

ppt2.css

body{
	background-color:silver;
	text-align:center;	
}

/*图片轮播区域样式设置*/
.ppt-container {
    width: 800px;
    height: 400px;
    padding: 0px;
	margin:auto;
}

/*图片样式设置*/
.ppt-container img {
   float:left;
   height:100%;
   width:80%;
   vertical-align:middle;
}

/*列表元素样式设置*/
ul {
    list-style: none;
	float:left;
	height:100%;
	width:20%;
	background-color: rgba(255,255,255,0.8);
	margin:0;
	padding:0;
	font-size: small;
}
/*列表选项元素样式设置*/
li {
	margin-top:25%;
	margin-left:10px;
	padding-left:10px;
    font-family: "微软雅黑 Light";
	text-align:left;
}
li:hover{
	color:red;
}
/*水平线样式设置*/
hr{
	width:80%;
}