index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> 广告图片轮播切换</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="adver" id="adver">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="arrowLeft" id="left"><</div><div class="arrowRight" id="right">></div>
</div>
<!-- 制作广告图片轮播切换效果，默认第1个数字背景颜色为橙色，其他背景为#333333，数字颜色为白色
鼠标移至图片上出现左右箭头，鼠标移出图片时，左右箭头消失
单击左历右箭头时，显示上一个/下一个图片，当前数字背景为橙色，其他数字背景为#333333，第一个/最后一个图片显示时，单击箭头时弹出提示
笔记：
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
提示： 1000 毫秒= 1 秒。
提示： 如果你只想执行一次可以使用 setTimeout() 方法。
语法
setInterval(code, milliseconds);
setInterval(function, milliseconds, param1, param2, ...)
返回值： 返回一个 ID（数字），可以将这个ID传递给clearInterval()，clearTimeout() 以取消执行。
-->
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
//使用数组保存网页中图片
var img = ["images/adver01.jpg","images/adver02.jpg","images/adver03.jpg",
"images/adver04.jpg","images/adver05.jpg","images/adver06.jpg"];
var i = 0;
var timer = null;//声明一个全局定时器
$("#adver").mouseover(function(){
$(this).children("div").show();
// 鼠标移入 暂停自动轮播
clearInterval(timer);
});
$("#adver").mouseout(function(){
$(this).children("div").hide();
// 鼠标移开 记录轮播
interval()
});
/* 轮播动画 */
function move(flag){
// flag = true时 切换上一张;反之下一张;
if(flag){
i--;
/* 解决负值问题
* i 的值不能为负
* 0 0.jpg
* -1 5(5表示img图片数组的索引下标，表示第六图片 adver06.jpg)
* -2 4
* -3 3
*/
if(i < 0){
i += img.length;
}
//index的值不能超过5（数组长为6）
var index = i%img.length;
console.log("index: "+index);
var imgs = img[index];
console.log("下一张"+index);
console.log("url"+'('+imgs+')');
var index = parseInt(index);
$("#adver").css("background","url"+'('+imgs+')');
$("li:nth-of-type("+(index+1)+")").css("background","orange");
// 设置其他 li的背景
$("li:nth-of-type("+(index+1)+")").siblings().css("background","#333333");
}
else{
i++;
var index = i%img.length;
console.log("index: "+index);
var imgs = img[index];
console.log("下一张"+index);
console.log("url"+'('+imgs+')');
var index = parseInt(index);
// (selector).animate({styles},speed,easing,callback)
$("#adver").css("background","url"+'('+imgs+')');
$("li:nth-of-type("+(index+1)+")").css("background","orange");
// 设置其他 li的背景
$("li:nth-of-type("+(index+1)+")").siblings().css("background","#333333");
}
}
// 指示器
var lis = $("li");
lis.css("cursor","pointer");
lis.click(function(){
//获取当前元素的索引
index = $(this).index();
var imgs = img[index];
$("#adver").css("background","url"+'('+imgs+')');
$("li:nth-of-type("+(index+1)+")").css("background","orange");
// 设置其他 li的背景
$("li:nth-of-type("+(index+1)+")").siblings().css("background","#333333");
});
/* $.each(lis, function(index, value) {
//alert($(this).index());
lis[index].click(function(){
alert($(this).val()) ;
});
//alert(index + ': ' + value);
});
*/
console.log(lis);
//设置左右箭头的点击事件
$("#left").click(function(){
move(true);
});
$("#right").click(function(){
move();
});
// 自动轮播
function interval() {
timer = setInterval(move,2000);
}
interval();
});
</script>
</body>
</html>
style.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;
}
img
转载：https://blog.csdn.net/qq_42324086/article/details/102491693
查看评论