<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery 轮播图</title>
<style type="text/css">
*{
margin: 0;padding: 0;list-style: none;
}
/*设置轮播区域样式*/
#main{
width: 660px;
height: 260px;
margin:0 auto;
background-color: #ccc;
margin-top: 50px;
position: relative;
}
/*设置轮播图片的大小*/
#main .img img{
width: 100%;
height: 100%;
position: absolute;
}
/*设置需要改变图片的运用的类*/
.display-img{
display: none;
}
.display-block{
display: block;
}
/*设置button 区域的位置*/
.button{
position: absolute;
bottom:10px;
right: 20px;
}
/*设置button的原始样式*/
button{
margin-right: 10px;
height: 10px;
width: 10px;
border-radius: 100%;
background-color: transparent;
border: 1px white solid;
outline: none;/* 取消外边框*/
}
/*改变button 样式的类*/
.achive{
background-color: white;
}
/*设置下一张/上一张的位置样式*/
#pre{
width: 100%;
position: absolute;
top: 105px;
left: 0;
}
/*设置pre图片的占位大小*/
#pre img{
width: 50px;
height: 50px;
}
/*定位上一张的控制的位置*/
#pre img:first-child{
float: left;
}
/*定位下一张 控制的位置*/
#pre img:last-child{
float: right;
}
</style>
</head>
<body>
<div id="main">
<div class="img">
<img src="images/1.jpg" alt="" class="display-img display-block">
<img src="images/2.jpg" alt="" class="display-img">
<img src="images/3.jpg" alt="" class="display-img">
<img src="images/4.jpg" alt="" class="display-img">
<img src="images/5.jpg" alt="" class="display-img">
</div>
<div class="button">
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
<div id="pre">
<img src="images/pre2.png" alt="" class="pre1">
<img src="images/pre.png" alt="" >
</div>
</div>
<script src="jquery.js"></script>
<!-- 引用jquery 3.x.x 文件 -->
<script>
// 用改变索引的方式改变图片
var index = 0; //用于改变图片的索引基数
var btn = $('button');//获取 button 句柄
var img = $('.img img'); //img句柄
var pre = $('#pre img'); //上一张下一张 控制句柄
var timer = null; //用于setInterval存储
// 改变图片的函数
// 在外部封装函数 注意在jquery 函数的调用方式
function changeImg(index){
btn.removeClass('achive');//清除图片的achive 的类 achive de 类样式
img.removeClass('display-block');//清除img 的类样式
btn.eq(index).addClass('achive'); //添加相应的类样式
img.eq(index).addClass('display-block'); //添加相应的类样式
}
$(function(){
// var index = 0;
// var btn = $('button');
// var img = $('.img img');
// var pre = $('#pre img');
// var main = $('#main');
// var timer = null;
$('#main').hover(
// mouseover 图片停止 index 停止加法
// mouseover函数开始
function(){
clearInterval(timer);
},
// mouseout index 做加法 N 秒的加法
// //mouseout函数开始
function(){
timer = setInterval(function(){
index = index + 1;
if (index > img.length-1) {
index = 0;
}
changeImg(index);//调用改变图片函数
},3000) //每n秒调用一次函数
})
// 调用 mouseout 让index 加法
$('#main').mouseout();//自身调用 当页面加载完成 可以自行启动
// btn 索引 对应img元素的索引
btn.click(function(event){
var target = $(event.target);
var btn1 = document.querySelectorAll('button');
for (var i = 0; i < btn1.length; i++) {
btn1[i].id = i;
index = this.id;
}
changeImg(index);//调用改变图片函数
})
// 箭头改变索引 改变图片
// 点击一次 index -1
pre.eq(0).click(function(){
index =index - 1;
if (index < 0) {
index = img.length -1;
}
changeImg(index);//调用改变图片函数
})
// 点击一次 index+ 1
pre.eq(1).click(function(){
index = index + 1;
if (index > img.length-1) {
index = 0;
}
changeImg(index);//调用改变图片函数
})
})
</script>
</body>
</html>
浅白黄
相关分类