编辑html代码
使用数据存入图片,操作数据的下标,设定setInterval方法,每隔几秒执行一次
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> 广告图片轮播切换</title>
<link rel="stylesheet" href="css/style.css">
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="adver" onmouseover="over();" onmouseout="out();">
<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>
</div>
<script>
//全局变量,用来存储索引
var imageNum = 1;
//全局变量用来存储setinterval的方法对象
var time = null;
//定义左右按键事件
function over() {
$(".arrowLeft,.arrowRight").show();
}
function out() {
$(".arrowLeft,.arrowRight").hide();
}
//创建图片数组
function getImagesStr(num) {
var imagesStr = new Array();
for (var i = 0; i < 6; i++) {
imagesStr[i] = "images/adver0" + (i + 1) + ".jpg";
}
return imagesStr[num - 1];
}
//设置背景图片,控制全局变量
function switchIamges(number) {
if (number <= 0) {
number = 6
}
if (number > 6) {
number = 1;
}
imageNum = number;
$(".adver").css("background", "url('" + getImagesStr(number) + "')");
$("li").css({ "backgroundColor": "#333333", "color": "white" });
$(".adver ul li:eq('" + (number - 1) + "')").css({ "backgroundColor": "#FFA403", "color": "white" });
}
$(document).ready(function () {
//定义左右按键单击事件
$(".arrowRight").click(function () {
imageNum++;
switchIamges(imageNum);
});
$(".arrowLeft").click(function () {
imageNum--;
switchIamges(imageNum);
});
//加载页面就进行动画操作,图片轮流播放
startImages();
//定义左右按键事件
$(".arrowRight").mouseover(function () {
stopimages();
});
$(".arrowRight").mouseout(function () {
startImages();
});
$(".arrowLeft").mouseover(function () {
stopimages();
});
$(".arrowLeft").mouseout(function () {
startImages();
});
//获取数字按钮对象,定义事件
$(".adver ul li").mouseover(function () {
stopimages();
var liNum = $(this).text();
var vLiNum = parseInt(liNum);
switchIamges(vLiNum);
});
$(".adver ul li").mouseout(function () {
startImages();
var liNum = $(this).text();
var vLiNum = parseInt(liNum);
switchIamges(vLiNum);
});
});
//图片自动轮播
function imagesAuto() {
imageNum++;
switchIamges(imageNum);
}
//定义事件,每隔多少毫秒执行一次
function startImages() {
time = setInterval("imagesAuto()", 2000);
}
//定义停止事件,调用该方法则停止轮播
function stopimages() {
clearInterval(time);
}
</script>
</body>
</html>
在这里的数组图片,我只是使用图片名字差不多的图片,进行存入数组,根据图片的名字进行轮播
对于css,可以随意
只是分享这个思维
提供以后反复看,有效提高对于数组的玩法
2018-10-30更新
<script type="text/javascript">
/*送餐的起手 */
Img = new Array("${AppRootPath}/static/Desk/image/1_1.jpeg","${AppRootPath}/static/Desk/image/1_2.jpeg","${AppRootPath}/static/Desk/image/1_3.jpeg","${AppRootPath}/static/Desk/image/1_4.jpeg","${AppRootPath}/static/Desk/image/1_5.jpeg","${AppRootPath}/static/Desk/image/1_6.jpeg","${AppRootPath}/static/Desk/image/1_7.jpeg","${AppRootPath}/static/Desk/image/1_8.jpeg");
size = Img.length;
i = 0;
function chImg(){
picID.src = Img[i];
i++;
if (i>=size) i = 0;
}
function startSwitch() {
time = setInterval("chImg()", 100);
}
$(function () {
startSwitch();
startSwitchp();
});
/* 广告的轮播 */
Imgp = new Array("${AppRootPath}/static/Desk/image/shop1.jpg","${AppRootPath}/static/Desk/image/shop2.jpg","${AppRootPath}/static/Desk/image/shop3.jpg","${AppRootPath}/static/Desk/image/shop5.jpg");
hrefp = new Array("shop?shopId=6","shop?shopId=8","shop?shopId=7","shop?shopId=9");
sizep = Imgp.length;
f = 0;
function chImgp(){
picIDp.src = Imgp[f];
picIDa.href=hrefp[f];
f++;
if (f>=sizep) f = 0;
}
function startSwitchp() {
time = setInterval("chImgp()", 2000);
}
</script>
以上有两个动态图的jq代码
先定义一个数组
之后取得数组的长度
定义一个变量
之后再定义一个方法
在这个方法中,使用jq的方法,使用节点的id.节点的属性设置属性的值
在这里的img[i]获取数组中的值给src.设置src的值
之后i++;
判断i是否大于等于size,就是是否大于数组的长度,为了使图片可以来回轮播.所以设置当i大于等于size的时候,将i的值设置为0,从0开始进行来回轮播
之后再定义一个方法
在这个方法中,使用了setInterval的方法,表示时隔一段时间执行一次chImg()的方法,
在chImg()中,我在上面也有说明,这里截图整体
setInterval("chImg()", 100);
这段代码表示每隔0.1秒执行一次上面chImg().因为这里是动画,所以设置时隔时间比较短
之后写入jq的reday()方法中,在页面打开的时候就执行的主入口,
在这个主入口中的`startSwitchp();方法,
也是一致的.这里我们为了实现点击图片可以查询相关的商家资料,所以我们加入了设置了href的属性,
也是使用了相同的方法设置节点href的属性值
也是使用setInterval()的方法设置每隔多少时间执行一次,
`
在这个方法中,在主入口也有加入,所以在打开页面的时候就会执行
在jsp中的代码编写
