<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.slider{
width: 500px;
height: 332px;
overflow: hidden;
position: relative;
}
.slider .slides{
height: 332px;
width: 2500px;
}
.slider .slide{
float: left;
width: 500px;
height: 332px;
}
.slider .slide img{
width: 500px;
height: 332px;
}
#navDiv a{
width: 15px;
height: 15px;
background-color: red;
margin: 0 5px;
float: left;
opacity: 0.5;/*设置透明*/
}
#navDiv a.active{
background-color: black;
}
#navDiv a:hover{ /*设置鼠标移入效果*/
background-color: black;
}
#navDiv{
position: absolute;
bottom: 15px;
left:200px ;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1 class="text-muted">
jQuery Basic Slide
</h1>
</div>
<div class="slider">
<ul class="slides">
<li class="slide"><img src="img/1.jpg"/></li>
<li class="slide"><img src="img/2.jpg"/></li>
<li class="slide"><img src="img/3.jpg"/></li>
<li class="slide"><img src="img/4.jpg"/></li>
<li class="slide"><img src="img/1.jpg"/></li>
</ul>
<div id="navDiv">
<a href="javascript:;" class="active"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
//1.var动态属性
var width=500;
var speed=1000;
var pause=2000; //多少时间换一次图
var interval;
//获取对应元素
var $slider=$(".slider");
var $slideContainer=$slider.find(".slides");//同=$(".slides") 用find()表现更清楚而已
var $slide=$slideContainer.find(".slide");
var $navDiv=$("#navDiv a");
var index=0;
var a=0;
//2.setInterval 设置定时器
function start(){
interval=setInterval(function(){
//2.1对.slides动画效果 左移
$slideContainer.animate({"margin-left":"-="+width},speed,function(){
//判断图片到最后一张了
index++;
if(index==$slide.length-1){
index=0;
$slideContainer.css("margin-left",0);
}
});
//2.2改变导航按钮颜色
$navDiv.removeClass("active");
var allA=document.getElementsByTagName("a");
allA[a].style.backgroundColor="";
a++;
if(a==allA.length){
a=0;
}
allA[a].style.backgroundColor="black";
},pause);
}
start();
//3.设置鼠标移入停止，移出又动起来
$slider.on({ //on()写多个函数，同bind()
mouseenter:function(){
clearInterval(interval);
interval=null;
},
mouseleave:function(){
start();
}
});
//4.设置导航按钮
//4.1点击切换图片
$navDiv.click(function(){
// alert($(this).index());
var timer=$(this).index(); //获取a数组的下标值
$slideContainer.animate({"margin-left":-(timer*width)},speed);
index=timer;//重新设置下标计数值，使得点击后依旧对应
a=timer;
//4.2点击改变颜色
//清除样式
var allA=document.getElementsByTagName("a");
allA[a].style.backgroundColor="";
$navDiv.removeClass("active");
//添加样式
$(this).addClass("active");
});
})
</script>
</html>
