css代碼：
/* 整個輪播圖 */
.banner{
width: 520px;
height: 280px;
overflow: hidden;
margin:10% auto;
position: relative;
}
/* 圖檔部分 */
/* ul */
.banner-img{
/* 寬度其實是不符合條件的,需要使用js去控制 */
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.banner-img li{
width: 520px;
height: 100%;
float: left;
}
.banner-img li a{
width: 100%;
height: 100%;
}
.banner-img li a img{
width: 100%;
height: 100%;
}
/* 實作按鈕 */
.banner .banner-btn{
position: absolute;
height:40px;
width: 100%;
/* background: red; */
top: 50%;
margin-top: -20px;
display: none;
}
/* 滑鼠移入顯示 */
.banner:hover .banner-btn{
display: block;
}
.banner .banner-btn a{
display: block;
width: 40px;
height: 40px;
background: green;
overflow: hidden;
}
.banner .banner-btn .nexBtn{
float: right;
}
.banner .banner-btn a{
background-color: #000;
opacity: 0.3;
filter: alpha(opcity=30);
border-radius: 5px;
}
.banner .banner-btn i{
margin-top: 8px;
display: block;
width: 100%;
height: 24px;
/* 使用一下精靈圖,面包屑圖 */
background: url(http://gtms01.alicdn.com/tps/i1/T1szNBFzlmXXX8QSDI-400-340.png);
}
/* 左邊的 */
.banner .prevBtn i{
background-position: -190px 0;
}
/* 右邊的 */
.banner .nexBtn i{
background-position: -190px -24px;
}
/* 下面的小圓圈 */
.banner-circle{
position: absolute;
left:50%;
/* margin-left: ; */
height:13px ;
bottom: 5px;
border-radius:10px;
/* opacity: 0.3;
/* IE相容 */
/* filter: alpha(opcity=30); */
background:rgba(255,255,255,0.3);
}
.banner-circle li{
width: 9px;
height: 9px;
margin: 2px;
float: left;
}
.banner-circle li a{
display: block;
width: 9px;
height: 9px;
border-radius: 50%;
background:rgba(255,255,255,0.8);
}
.banner-circle .selected a{
background: rgba(255,0,0,1);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/reset.css"/>
<link rel="stylesheet" type="text/css" href="./css/banner.css"/>
</head>
<body>
<div class="banner">
<!-- 放置圖檔 -->
<ul class="banner-img">
<li><a href="#"><img src="./img/0.jpg" ></a></li>
<li><a href="#"><img src="./img/1.jpg" ></a></li>
<li><a href="#"><img src="./img/2.jpg" ></a></li>
<li><a href="#"><img src="./img/3.jpg" ></a></li>
<li><a href="#"><img src="./img/4.jpg" ></a></li>
<li><a href="#"><img src="./img/2.jpg" ></a></li>
</ul>
<!-- 放置兩個前後按鈕 -->
<div class="banner-btn">
<a href="javascript:;" class="nexBtn"><i></i></a>
<a href="javascript:;"class="prevBtn"><i></i></a>
</div>
<!-- 放置焦點 小圓圈 -->
<ul class="banner-circle">
<!-- 計劃是使用js的dom操作去添加集體的個數的小圓圈 -->
</ul>
</div>
</body>
<script src="./js/jquery3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
//擷取标簽
// 最大的輪播子產品 ; 這裡變量名稱裡面的$其實就是一個普通的字元
var $banner = $('.banner');
// 擷取圖檔的父級ul
var $banner_ul = $('.banner-img');
// 按鈕的大塊
var $btn = $('.banner-btn');
// 擷取按鈕的a标簽
var $btn_a = $btn.find('a');
console.log($btn_a);
// 定義一些有可能會使用到的變量
// 定時器
var timer = null;
// 正在展示的頁數
var page = 1;
// 運動的方向
var btnClass = null;
// 擷取每一個li的寬度.也就是擷取banner的寬度 輪播圖的寬度
var v_width = $banner.width();
// ul的寬度根據li的個數決定
// 擷取li的個數
var page_count = $banner_ul.find('li').length;
//設定ul的寬度
$banner_ul.width(v_width*page_count);//jquey設定元素的寬度的方法
// 操作小圓圈
var banner_cir = '<li class="selected"><a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ></a></li>';
for (var i = 0; i < page_count-1; i++) {
// 這裡隻是一個所有的小圓點拼接起來的字元串，還沒有添加到頁面中
banner_cir += '<li><a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ></a></li>'
}
//添加小圓圈到頁面中
$('.banner-circle').append(banner_cir);
//計算移動多少距離可以使得所有的小圓點居中
var circle_left = $('.banner-circle').width() * 0.5;
//通過margin-left設定所有的小圓點居中
$('.banner-circle').css('marginLeft',circle_left*-1);
//obj 讓誰動
//dir 向那個方向運動
function move(dir){
//正在運動的物體， 不能進行運動,如果正在動畫，move對你不生效
if(!$banner_ul.is(":animated")){//取反 正在運動 就是不運動
//判斷進行運動的方向
if(dir == 'prevBtn'){
//判斷是否為第一個圖檔 需要單獨處理第一張到第五張的請況
if(page==1){
$banner_ul.animate({
left: (page_count-1)*v_width*-1
});
page = page_count;
//處理小紅點的移動
circleMove();
}else{
//其他情況比較規律，每一次都是過一個圖檔的距離
$banner_ul.animate({
left: $banner_ul.position().left + v_width
},"slow");
page--;
circleMove();
}
}else{
//處理最後一張的特殊情況
if(page==page_count){
$banner_ul.animate({
left:0
})
page=1;
circleMove();
}else{
$banner_ul.animate({
left: $banner_ul.position().left - v_width
},"slow");
page++;
circleMove();
}
}
}
}
function circleMove(){
$('.banner-circle li').eq(page-1).addClass('selected').siblings().removeClass('selected');
}
// 滑鼠移入
$banner.mousemove(function(){
// 清除定時器
clearInterval(timer);//連結操作
}).mouseout(function(){
timer = setInterval(move,1000);
}).trigger('mouseout'); //一進來就觸發一次滑鼠移出效果，讓頁面直接動起來
// 動起來
// timer = setInterval(move,1000);
// 左右按鈕的滑鼠移入移出以及點選
$btn_a.mouseover(function(){
$(this).animate({
'opacity':0.6 //jquey已經幫我們考慮了相容
},'fast')
}).mouseleave(function(){
$(this).animate({
'opacity':0.3
},'fast')
}).click(function(){
btnClass = $(this).attr('class');
clearInterval(timer);
timer = setInterval(move(btnClass),1000);
});
//點選小圓圈 這些小圓圈都是動态添加的
// $('.banner-circle li').click(function(){
// console.log('111')
// })
//事件動态綁定機制
$('.banner-circle li').on('click',function(){
// 擷取要展示的圖檔的編号
var index = $('.banner-circle li').index(this);
// 讓banner動起來
$banner_ul.animate({
left: index * v_width * -1
}, 'slow');
page = index + 1;
circleMove();
})
});
</script>
</html>
![Javascript建構Bingo卡片遊戲[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)