常见的轮播图（jQuery）

最新推荐文章于 2023-07-16 16:45:03 发布

Brave_TY

最新推荐文章于 2023-07-16 16:45:03 发布

阅读量353

点赞数 1

本文链接：https://blog.csdn.net/Brave_TY/article/details/79524444

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易的图片轮播</title>
<script src="page-transitions/js/jquery-3.2.1.js"></script>
<style>
* {
margin:0px;
padding:0px;
}
ul li {
list-style:none
}
#slide {
margin:0px auto;
position:relative;
}
.slide_img li {
position:absolute;
display:none;
top:0px;
left:0px
}
.dotted {
width:100%;
position:absolute;
bottom:10px;
left:0px;
font-size:0px;
text-align:center;
}
.dotted li {
width:16px;
height:16px;
background:rgba(255,255,255,0.5);
font-size:14px;
line-height:16px;
text-align:center;
display:inline-block;
margin:0px 5px;
cursor:pointer;
border-radius:50%;
}
.dotted li span {
display:inline-block;
width:8px;
height:8px;
margin-top:4px;
background:rgba(255,255,255,0.8);
border-radius:50%;
}
.dotted .active {
background:rgba(255,255,255,0.8);
}
.left,.right {
height:50px;
width:30px;
background:rgba(255,255,255,0.5);
position:absolute;
top:0px;
display:none;
cursor:pointer;
text-align:center;
line-height:50px;
font-family:"宋体";
font-weight:bold;
}
.right {
right:0px;
}
</style>
</head>
<body>
<div id="slide">
<ul class="slide_img">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg></li>
</ul>
</div><script>
$(document).ready(function() {

function Slide(sTime) {
var $arrow = true; //是否启用左右箭头 true为启用
var $numb = false; //是否启用数字 true为启用
$('#slide,#slide img').css('width', '500px').css('height', '300px'); //容器宽高
//创建li
$('#slide').append('<ul class="dotted"></ul><div class="left"><</div><div class="right">></div>');
for (var j = 0; j < $('.slide_img li').length; j++) {
if ($numb) {
$('.dotted').append('<li>' + (j + 1) + '</li>');
} else {
$('.dotted').append('<li><span></span></li>');
}
}
$('.slide_img li').first().show();
$('.dotted li').first().addClass('active');
//通过点击li 切换
$('.dotted li').mouseover(function() {
$(this).addClass("active").siblings('li').removeClass('active');
var index = $(this).index();
i = index;
$('.slide_img li').eq(index).fadeIn().siblings('li').fadeOut();
});

//移动函数
function move() {
i++;
if (i == $('.dotted li').length) {
i = 0;
}
change()
}

function change() {
$('.dotted li').eq(i).addClass("active").siblings('li').removeClass('active');
$('.slide_img li').eq(i).fadeIn().siblings('li').fadeOut();
}
//自动轮播
//alert(($('#slide').height()-$('.left').height()));
var i = 0;
var t = setInterval(move, sTime);
//鼠标移动到容器内
$('#slide').hover(function() {
clearInterval(t);
if ($arrow) {
$('.left,.right').css('top', ($('#slide').height() - $('.left').height()) / 2);
$('.left,.right').fadeIn();
}
}, function() {
t = setInterval(move, sTime);
$('.left,.right').fadeOut();
});
//左箭头
$('.left').click(function() {
i = i - 1;
if (i == -1) {
i = $('.slide_img li').length - 1;
}
change()
});
//右箭头
$('.right').click(function() {
i = i + 1;
if (i == $('.slide_img li').length) {
i = 0;
}
change()
});

}
Slide(3000);
});</script>
</body>
</html>