使用js開發相對簡單，都能看懂。先上圖，喜歡的話下面是全部源碼
鼠標離開輪播圖自動定時播放，左右箭頭消失
點擊小圓點圖片跟著一起換圖
鼠標離開左右箭頭<>出現，輪播圖暫停輪放
HTML部分
好久沒更新博客了，一直在學習新東西，在遇到一些自己的學習中遇到的一些關于HTML和Android中交互所要必學的都想分享出來，讓更多人方便學習，少走更多的彎路，快速成長為編程大牛。下面是仿京東輪播圖的所有代碼和效果圖，希望能對有需求的你有所幫助......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
//引入外部CSS
<link rel="stylesheet" type="text/css" href="css/lbt.css"/>
</head>
<body>
<div id="box">
<ul id="list">
<li class="li">1</li>
<li class="li">2</li>
<li class="li">3</li>
<li class="li">4</li>
<li class="li">5</li>
<li class="li">6</li>
<li class="li">7</li>
<li class="li">8</li>
</ul>
<div id="leftbt"><</div>
<div id="rightbt">></div>
</div>
<!--引入外部js-->
<script type="text/javascript" src="js/lunbotu.js"></script>
</body>
</html>
js部分
//獲取所有的li
var jsLis = document.getElementsByClassName("li");
//img節點
var jsImg = document.getElementById("img");
//當前顯示的圖片
var currentPage = 0;
//背景div
var jsBox = document.getElementById("box");
//左右按鈕
var jsLeftBtn = document.getElementById("leftbt");
var jsRightBtn = document.getElementById("rightbt");
//第一個小圓點初始化成紅色
jsLis[0].style.backgroundColor = "red";
//創建定時器播放圖片
var pTimer = setInterval(func,1000);
function func(){
currentPage++;
if(currentPage == 8){
currentPage = 0;
}
//修改圖片
jsImg.src = "img/"+currentPage+".jpg";
//清空所有小圓點的顏色
for (var i = 0; i < jsLis.length; i++) {
jsLis[i].style.backgroundColor="#aaa";
}
//修改小圓點的顏色
jsLis[currentPage].style.backgroundColor = "red";
}
//給box添加鼠標進入事件
jsBox.addEventListener("mousemove",function(){
//停止定時器 即銷毀 所以下方還得在一次啟動
clearInterval(pTimer);
jsLeftBtn.style.display = "block";
jsRightBtn.style.display = "block";
},false);
jsBox.addEventListener("mouseout", function(){
//啟動定時器
pTimer = setInterval(func, 1000);
jsLeftBtn.style.display = "none";
jsRightBtn.style.display = "none";
}, false);
//左右按鈕
jsLeftBtn.addEventListener("mouseover", function(){
jsLeftBtn.style.backgroundColor = "rgba(0,0,0,0.6)";
}, false);
jsRightBtn.addEventListener("mouseover", function(){
jsRightBtn.style.backgroundColor = "rgba(0,0,0,0.6)";
}, false);
jsLeftBtn.addEventListener("mouseout", function(){
jsLeftBtn.style.backgroundColor = "rgba(0,0,0,0.2)";
}, false);
jsRightBtn.addEventListener("mouseout", function(){
jsRightBtn.style.backgroundColor = "rgba(0,0,0,0.2)";
}, false);
//鼠標移入顯示的左邊按鈕<
jsLeftBtn.addEventListener("click",function(){
currentPage--;
if(currentPage == -1){
currentPage = 7;
}
jsImg.src = "img/"+currentPage+".jpg";
//清空所有小圓點的顏色
for (var i = 0; i < jsLis.length; i++) {
jsLis[i].style.backgroundColor="#aaa";
}
//修改小圓點的元素
jsLis[currentPage].style.backgroundColor = "red";
},false);
//右邊按鈕>
jsRightBtn.addEventListener("click",function(){
currentPage++;
if(currentPage == 8){
currentPage = 0;
}
jsImg.src = "img/"+currentPage+".jpg";
for (var i = 0; i < jsLis.length; i++) {
jsLis[i].style.backgroundColor="#aaa";
}
jsLis[currentPage].style.backgroundColor = "red";
},false);
//每一個小圓點都添加鼠標移入事件
for (var i = 0; i < jsLis.length; i++) {
//方法一：
// jsLis[i].onmouseover = function() {
// //當前元素節點的文本節點
// //在事件函數中，this代表對應的元素節點
// currentPage = parseInt(this.innerHTML) - 1;
// jsImg.src = "img/"+currentPage + ".jpg";
// for (var i = 0; i < jsLis.length; i++) {
// jsLis[i].style.backgroundColor = "#aaa";
// }
// jsLis[currentPage].style.backgroundColor = "red";
// };
//方法二：此處使用閉包，因為由于閉包會攜帶包含它的函數的作用域，因此會比其他函數占用更多的內存。過度使用閉包可能會導致內存占用過多。對于性能優化方面，我推薦使用方法一
jsLis[i].onmouseover = (function(x){
function m(){
currentPage = x;
jsImg.src = "img/"+currentPage + ".jpg";
for (var i = 0; i < jsLis.length; i++) {
jsLis[i].style.backgroundColor = "#aaa";
}
jsLis[currentPage].style.backgroundColor = "red";
}
return m;
})(i);
}
CSS部分
這邊就沒什么好說的了都是基本屬性 只要認真點就不會出錯的，我是根據圖片的大小編排div的，你也可以根據自己的需求實際采用
#box{
width: 790px;
height: 340px;
/*background-color: red;*/
margin: 0 auto;
position: relative;
}
#list{
list-style: none;
bottom: 5px;
left: 240px;
position: absolute;
}
.li{
float: left;
width: 20px;
height: 20px;
font-size: 20px;
background-color: #aaa;
margin-right: 10px;
text-align: center;
line-height: 20px;
border-radius: 50%;
}
#leftbt{
position: absolute;
width: 50px;
height: 80px;
left: 0px;
top: 130px;
background-color: rgba(0,0,0,0.2);
font-size: 40px;
color: white;
line-height: 80px;
text-align: center;
/*不顯示*/
display: none;
}
#rightbt{
position: absolute;
width: 50px;
height: 80px;
right: 0px;
top: 130px;
background-color: rgba(0,0,0,0.2);
font-size: 40px;
color: white;
line-height: 80px;
text-align: center;
display: none;
}
