html 轮播图
2023-07-18 06:24
1、最近突然要做一个轮播图,原来做的一个demo轮播图不怎么适合:
$(".apl_home_layered ul li").eq(index).fadeIn(500).siblings().hide();
2、然后,自己就凑合的写了一个(记得引入图片路径)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>轮播图</title>
<script
typet="text/javascript"
src="http://code.jquery.com/jquery-latest.js"
></script>
<!-- css 样式-->
<style type="text/css">
ul,
li,
img {
border: 0px;
list-style-type: none;
}
.apl_home_img_first {
width: 800px;
height: 600px;
}
.home_slideshow {
position: relative;
}
.apl_home_layered ul li {
display: none;
}
.home_hoves {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
}
.home_hover {
cursor: pointer;
position: relative;
display: inline-block;
width: 12px;
height: 12px;
margin: 12px;
border-radius: 8px;
background: #227FF;
opacity: 0.7;
}
</style>
</head>
<body>
<div class="apl_home_layered home_slideshow">
<ul>
<li style="display: block">
<a href="#"
><img
id="home_first_img"
src="images/spring.jpg"
class="apl_home_img_first"
alt="1"
/></a>
</li>
<li>
<a href="#"
><img
id="home_first_img"
src="images/summer.jpg"
class="apl_home_img_first"
alt="2"
/></a>
</li>
<li>
<a href="#"
><img
id="home_first_img2"
src="images/autumn.jpg"
class="apl_home_img_first"
alt="3"
/></a>
</li>
<li>
<a href="#"
><img
id="home_first_img3"
src="images/winter.jpg"
class="apl_home_img_first"
alt="4"
/></a>
</li>
</ul>
<p class="home_hoves">
<span class="home_hover"></span>
<span class="home_hover"></span>
<span class="home_hover"></span>
<span class="home_hover"></span>
</p>
</div>
</body>
<script>
var index = 0; //标记
var time; //定时器
$(document).ready(function () {
var len = $(".apl_home_layered ul li").length;
//循环
function showstart() {
index++;
if (index == len) {
index = 0;
} //加载到最后一张,重新开始
$(".apl_home_layered ul li").eq(index).fadeIn(500).siblings().hide();
var i = $(".home_hoves span")
.eq(index)
.css("background-color", "#227FFE")
.siblings()
.css("background-color", "#777"); //得到该节点并设置背景样式,其它的兄弟节点设置背景样式
}
//定时
function action() {
time = setInterval(function () {
showstart();
}, 5000); //定时加载showstart()方法
}
//鼠标移入
$(".home_hoves span").mouseover(function () {
$(this)
.css("background-color", "#227FFE")
.siblings()
.css("background-color", "#777");
var s = $(this).index();
$(".apl_home_layered ul li").eq(s).fadeIn(500).siblings().hide();
//console.log(s);
clearInterval(time); //移除定时器
});
//鼠标移出
$(".home_hoves span").mouseout(function () {
action(); //加载定时器
});
action(); //初始化加载action()方法
});
</script>
</html>
3、之前的轮播图:(这个是原生的,没用到jQuery,记得引入图片路径)
<html>
<head>
<title>轮播图</title>
</head>
<body align="center" onload="start()">
<img id="imgs" src="images/spring.jpg" width="400px" height="400px" /><br />
<span
style="cursor: pointer; color: red"
onmouseover="stop(0)"
onmouseleave="start()"
>春天</span
>
<span
style="cursor: pointer; color: green"
onmouseover="stop(1)"
onmouseleave="start()"
>夏天</span
>
<span
style="cursor: pointer; color: yellow"
onmouseover="stop(2)"
onmouseleave="start()"
>秋天</span
>
<span
style="cursor: pointer; color: purple"
onmouseover="stop(3)"
onmouseleave="start()"
>冬天</span
>
</body>
<script>
var index = 0;
function showstart() {
var image = [
"images/spring.jpg",
"images/summer.jpg",
"images/autumn.jpg",
"images/winter.jpg"
];
var a = document.getElementsByTagName("img");
a[0].src = image[index];
index++;
if (index == 4) {
index = 0;
}
}
var time;
function start() {
time = setInterval("showstart()", 1000);
}
function stop(i) {
clearInterval(time);
index = i;
showstart();
}
</script>
</html>
4、拥有一个自己的主观思想,生活就很简单(生活不是学习,是调节)
生活中,有忧伤就有快乐;而我,是在快乐中忧伤;独行的路上,不是在享受着快乐,而是忍受着孤独,增强韧性,品味心声!
5、在工作中,会使用一个轮播的插件更好:swiper