這裏是html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京東輪播圖</title>
<!--只引入css-->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--底部的模塊-->
<div class="banner">
<!--輪播圖的內容-->
<ul class="content">
<li><a href="###"><img src="img/1.jpg" alt=""></a></li>
<li><a href="###"><img src="img/2.jpg" alt=""></a></li>
<li><a href="###"><img src="img/3.jpg" alt=""></a></li>
<li><a href="###"><img src="img/4.jpg" alt=""></a></li>
<li><a href="###"><img src="img/5.jpg" alt=""></a></li>
<li><a href="###"><img src="img/6.jpg" alt=""></a></li>
<li><a href="###"><img src="img/7.jpg" alt=""></a></li>
<li><a href="###"><img src="img/8.jpg" alt=""></a></li>
<!--這裏記得更換圖片路徑(＾Ｕ＾)ノ~ＹＯ-->
</ul>
<!--左右按鈕-->
<div class="button">
<div class="left"></div>
<div class="right"></div>
</div>
<!--輪播圖指示器 小圓點-->
<ul class="dot">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<!--引入js文件-->
<script src="js/jingdong.js"> </script>
這裏是js文件
//1.獲取所有的圖片
var imgs = document.querySelectorAll(".content>li");
//2.獲取所有的圓點
var dots = document.querySelectorAll(".dot li");
//3.左按鈕
var leftBtn = document.querySelector(".left");
//4.右按鈕
var rightBtn = document.querySelector(".right");
//補充變量 存儲當前正在顯示的圖片的下標
var index = 0;//默認第一張
//避免過度的快速點擊,設置是否可以點擊
var isClick = true;
//右側按鈕
rightBtn.onclick = function () {
if ( !isClick){
return;
}
isClick = false;
//延遲0.5秒執行
setTimeout(function () {
isClick = true;
}, 500);
// ----------------
//先隱藏當前顯示的圖片
imgs[index].style.opacity = 0;
//圓點
dots[index].style.backgroundColor = '#fff';
//下標增加
index++;
//判斷下標 不要越界,一共8張 最大下標到7 從0開始
if(index == 8){
index = 0;
}
//切換新圖片
imgs[index].style.opacity = 1;
dots[index].style.backgroundColor = "#dc192c";
};
//左側按鈕
leftBtn.onclick = function () {
if (!isClick) {
return;
}
isClick = false;
//延遲
setTimeout(function () {
isClick = true;
}, 500);
// -----------------------
imgs[index].style.opacity = 0;
dots[index].style.backgroundColor = '#fff';
index--;
if (index == -1){
index = 7;
}
imgs[index].style.opacity = 1;
dots[index].style.backgroundColor = "#dc192a";
};
//------------------------
//自動滾動
//獲取底部的banner
var banner = document.querySelector(".banner");
//設置自動函數
function autoChange() {
imgs[index].style.opacity = 0;
dots[index].style.backgroundColor = "#fff";
index++;//默認向右滾動
if (index == 8){
index = 0;
}
//顯示新的一張 和圓點
imgs[index].style.opacity = 1;
dots[index].style.backgroundColor = "#dc192a";
}
//自動切換--開啓計時器
var timer = setInterval(autoChange, 1000);
//監測鼠標觸摸banner的事件
banner.onmouseenter = function () {
//關閉計時器
clearInterval(timer);
};
//鼠標離開banner
banner.onmouseleave = function () {
//重新開始計時器
timer = setInterval(autoChange, 1000);
};
//鼠標經過小圓點 8個園點都可切換圖片 所以每個圓點的功能都一樣
for (var i = 0; i < 8; i++){
dots[i].onmousemove = function () {
//隱藏當前圖片
imgs[index].style.opacity = 0;
dots[index].style.backgroundColor = '#fff';
//this: 代表當前當前觸發事件元素
for(var j = 0; j < 8; j++){
if(dots[j] == this){
//j就是當前觸摸的圓點的下標
index = j;
break;//結束循環
}
}
//新的位置
imgs[index].style.opacity = 1
dots[index].style.backgroundColor = '#dc192a';
};
}
這裏是css代碼
*{
margin:0;
padding:0;
}
/*底部banner模塊*/
.banner {
width: 790px;
height: 340px;
border: 5px solid gold;
margin: 50px auto;
/*定位 讓子級在使用絕對定位的時候 以父級爲參考*/
position: relative;/*不脫離文檔流 對網頁標籤無影響*/
}
/*高清 ** 大圖 */
.content {
list-style:none;/*去除列表自帶圓點*/
position: relative;
}
.content > li{
position: absolute;
top:0;
left:0;
/*先全部隱藏*/
opacity:0;
/*添加切換圖片的過渡動畫*/
transition:opacity 0.5s;
}
.content>li:nth-child(1){
opacity:1;
}
/*按鈕*/
.button {
padding-top: 140px;
position: relative;
}
.left,.right {
width: 30px;
height: 60px;
position: absolute;
background-color: rgba(0,0,0,0.1);
opacity:0;
}
/*鼠標劃入就顯示*/
/****** hover後面不可使用羣組性的選擇器*/
.banner:hover .button>.left {
opacity:1;
}
.banner:hover .right{
opacity:1;
}
/*鼠標劃入按鈕 顏色加深*/
.left:hover, .right:hover{
background-color: rgba(0,0,0,0.5);
}
/*添加背景圖片 箭頭 > */
.left {
left:0;
background-image: url("../img/left.png");
background-repeat: no-repeat;
background-position: center;
}
.right {
right:0;
background-image: url("../img/right.png");
background-repeat: no-repeat;
background-position: center;
}
/*----------*/
/*小圓點*/
.dot {
list-style:none;
position: absolute;
left: 50%;
bottom: 30px;
background-color: rgba(255, 255,255, 0.3);
border-radius: 12px;
padding:5px;
margin-left: -94px;
}
.dot li {
width:12px;
height: 12px;
border-radius: 6px;
background-color: white;
float: left;
margin-left: 5px;
margin-right: 5px;
}
.dot li:nth-child(1){
background-color: #dc192a;
}