利用html+Jquery实现图片库效果 图片id为img1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的家乡</title>
<link rel="stylesheet"href="c.css">
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<div><h1 id="h1">我的家乡——辽宁朝阳</h1></div>
<hr>
<h2 class="h2">美丽朝阳 秀美家乡</h2>
<div id="box2">
<ul>
<li><a href="">首页</a></li>
<li><a href="">家乡介绍</a></li>
<li><a href="">家乡资讯</a></li>
<li><a href="">家乡风光</a></li>
<li><a href="">家乡建设</a></li>
<li><a href="">在线咨询</a></li>
</ul>
</div>
<div class="wrapper">
<div class="contain">
<img src="images/a.jpg">
<img src="images/b.jpg">
<img src=" images/c.jpg">
<img src="images/d.jpg">
<img src="images/e.jpg">
</div>
<div class="btn">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<a href="javascript:void(0);"><</a>
<a href="javascript:void(0);">></a>
</div>
<h1 style="background-color: #07d707;"><a href=""style="color: #fff;">家乡介绍</a></h1>
<div id="box3">
<div><img src="images/g.jpg"id="img1"></div>
<div>
<p id="p1">
朝阳是中国东北与中原地区政治、经济、文化交流的枢纽地带，是多民族的东北历史名城和历代塞外战略要地。十六国时期慕容鲜卑始建龙城（朝阳城前身）为三燕都城，北魏至隋唐时期设营州，辽金时期置兴中府 ，元代设兴中州，明洪武年间置营州卫，清末置朝阳府。1984年6月30日，朝阳升为省辖市。朝阳东连沈阳都市圈，南临渤海之滨，西接京津冀经济圈，北依内蒙古腹地，是东北地区重要门户之一。三燕王朝均以龙城（朝阳）为都城或陪都，因此龙城又被称为“三燕古都”。三燕时期所形成的以马具和步摇等为代表的文化被称为“三燕文化”，境内有鸟化石国家地质公园、凤凰山、大黑山、浴龙谷等景点。
</p>
</div>
</div>
<div id="box4">
<ul id="u1">
<li><img src="images/fenghuang.jpg"><span>凤凰山</span></li>
<li><img src="images/lingfeng.jpg"><span>凌凤大桥</span></li>
<li><img src="images/murong.jpg"><span>慕容街</span></li>
<li><img src="images/huaishu.jpg"><span>槐树洞</span></li>
<li><img src="images/bird.jpg"><span>鸟化石国家地址公园</span></li>
<li><img src="images/dalinghe.jpg"><span>大凌河</span></li>
</ul>
</div>
<div id="greeting"></div>
<script>
//图片库效果
$(document).ready(function(){
$("#img1").click(function(){
var img1=$("img1");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
//图片翻转
$(function(){
$('ul li').hover(function () {
var $img = $(this).children('img');
$img.stop().animate({
height : 0,
top : '35px'
},500,function(){
$img.hide();
$img.next('span').show().animate({
height : '72px',
top : 0
},500)
})
}, function () {
var $span = $(this).children('span');
$span.stop().animate({
height : 0,
top : '35px'
},500,function(){
$span.hide();
$span.prev('img').show().animate({
height : '450px',
top : 0
},500)
})
})
})
//问候语
$(document).ready(function(){
$("#greeting").ready(function(){
var div=$("#greeting");
div.animate({left:"50%"},"slow");
div.animate({fontSize:"3em"},"slow");
},$("#greeting").click(function(){
$("#greeting").toggle();
}))
})
//设置根据时间不同的问候语
//获取日期
var currentDate=new Date();
//获取时间
var currentHour=currentDate.getHours();
//根据时间不同显示不同的问候语
if(currentHour>=6&¤tHour<8){
$("#greeting").text("早上好");
}else if(currentHour>=8&¤tHour<12){
$("#greeting").text("上午好");
}else if(currentHour==12){
$("#greeting").text("中午好");
}else if(currentHour>=12&¤tHour<=18){
$("#greeting").text("下午好");
}else{
$("#greeting").text("晚上好");
}
//鼠标滑过文字上放大变色，鼠标离开文字，恢复原状
$(document).ready(function(){
$("#p1").mousemove(function(){
$("p").css({"font-size":"20px","color":"blue"})
}),$("#p1").mouseleave(function(){
$("p").css({"font-size":"large","color":"black"})
})
})
//实现图片切换
//设置索引
var index=0;
// 点击上一张
$("a:first").click(function(){
prev_pic();
})
// 点击下一张
$("a:last").click(function(){
next_pic();
})
// 悬浮停止
$(".wrapper").mouseover(function(){
clearInterval(id);
});
$(".wrapper").mouseout(function(){
autoplay();
})
// 下一张
function next_pic(){
index++;
if(index>4){
index=0;
}
addStyle();
}
// 上一张
function prev_pic(){
index--;
if(index<0){
index=4;
}
addStyle();
}
// 控制图片显示隐藏,小圆点背景色
function addStyle(){
$("img").eq(index).fadeIn();
$("img").eq(index).siblings().fadeOut();
$("span").eq(index).addClass("active");
$("span").eq(index).siblings().removeClass("active");
}
// 自动轮播
var id;
autoplay();
function autoplay(){
id=setInterval(function(){
next_pic();
},1000)
}
</script>
</body>
</html>
