HTML——利用 JQuery 实现轮播图效果

YuStart

于 2021-05-10 08:59:13 发布

阅读量611

点赞数 1

CC 4.0 BY-SA版权

分类专栏：作业文章标签： js java html javascript

本文链接：https://blog.youkuaiyun.com/YuStart/article/details/116584667

作业专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及jQuery实现的图片轮播广告效果。通过编写代码实现了图片自动轮播、手动切换及无限循环播放等功能，并配合底部指示器进行同步显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源代码展示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="adver">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="arrowLeft" ><</div>
	<div class="arrowRight">></div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/carousel.js"></script>
</body>
</html>

CSS部分

ul,li{padding: 0;margin: 0; list-style: none;}
.adver{margin: 0 auto; width: 700px; overflow: hidden; height: 454px; position: relative; background: url("../images/adver01.jpg");}
ul{position: absolute; bottom:10px; z-index: 100; width: 100%; text-align: center;}
ul li{display: inline-block; font-size: 10px; line-height: 20px; font-family: "微软雅黑"; margin: 0 1px; width: 20px; height: 20px; border-radius: 50%; background: #333333; text-align: center; color: #ffffff;}
.arrowLeft,.arrowRight{
    position: absolute;
    width: 30px;
    background:rgba(0,0,0,0.2);
    height: 50px;
    line-height: 50px;
    text-align: center;
    top:200px;
    z-index: 150;
    font-family: "微软雅黑";
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    display: none;
}
.arrowLeft{left: 10px;}
.arrowRight{right: 10px;}
li:nth-of-type(1){
    background: orange;
}

制作目标

当鼠标经过图片盒子时，让左右按钮显示，默认状态下为隐藏
单击左右按钮，让图片发生改变，且可无限循环播放图片
切换图片时，使轮播图区域下方的小圆豆同时发生改变
默认状态下，图片每隔1.5秒自动轮播图片
当鼠标单击任何一个按钮，轮播图暂停3秒自动轮播，再继续自动轮播

制作步骤

选中类名为 adver 的盒子，创建鼠标 经过、移出 事件，让按钮显示或隐藏
声明3个变量，一个用于图片列表下标，一个为轮播图图片容器，另一个为定时器
创建左按钮、右按钮函数，编写代码（同时让小圆豆产生变化）
创建启动定时器方法
默认启动定时器
创建左右按钮点击事件
- 关闭定时器
- 定时3秒后重新启动定时器方法
- 按钮切换图片功能（利用图片容器下标）

代码展示

$(".adver").mouseover(function () {
	$(".arrowRight").show();
	$(".arrowLeft").show();
}).mouseout(function () {
	$(".arrowRight").hide();
	$(".arrowLeft").hide();
})




$(document).ready(

	function () {
		var i = 0;
		//轮播图片数组
		var images = new Array("adver01.jpg", "adver02.jpg", "adver03.jpg", "adver04.jpg", "adver05.jpg", "adver06.jpg");

		var interval = null; //定义一个定时器

		//启动定时器方法
		function run() {
			interval = setInterval(right, "1500"); //定时的设置
		}
		//左边按钮
		function left() {

			if (i == 0) {
				i = images.length - 1;
				$(".adver").css("background", "url(images/" + images[i] + ")");
				$("li").eq(i).css("background", "orange"); //下一个 li 位置
				$("li").eq(i).siblings().css("background", "#333333"); //去掉刚刚的 li 颜色
			} else {
				i--;
				$(".adver").css("background", "url(images/" + images[i] + ")");
				$("li").eq(i).css("background", "orange"); //下一个 li 位置
				$("li").eq(i).siblings().css("background", "#333333"); //去掉刚刚的 li 颜色
			}
		}
		//右边按钮
		function right() {

			if (images.length - 1 == i) {
				i = 0;
				$(".adver").css("background", "url(images/" + images[i] + ")");
				$("li").eq(i).css("background", "orange"); //下一个 li 位置
				$("li").eq(i).siblings().css("background", "#333333"); //去掉刚刚的 li 颜色
			} else {
				i++;
				$(".adver").css("background", "url(images/" + images[i] + ")");
				$("li").eq(i).css("background", "orange"); //下一个 li 位置
				$("li").eq(i).siblings().css("background", "#333333"); //去掉刚刚的 li 颜色
			}
		}

		//默认启动定时器
		run();

		//左按钮单击事件
		$(".arrowLeft").click(function () {
			clearTimeout(interval); //关闭定时器
			window.setTimeout(run, 3000); //等待3秒继续自动轮播
			left(); //调用左边按钮方法
		});

		//右按钮单击事件
		$(".arrowRight").click(function () {
			clearTimeout(interval); //关闭定时器
			window.setTimeout(run, 3000); //等待3秒继续自动轮播
			right(); //调用右边按钮方法
		});
	}
)