使用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;
}
