html:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" href="static/css/lun_bo_style1.css" target="_blank" rel="external nofollow" >
<script src="static/js/lun_bo_js1.js"></script>
</head>
<body>
<div id="wrap">
<ul>
<li class="active"><a><img src="static/imgs/1.jpg"></a></li>
<li><a><img src="static/imgs/2.jpg"></a></li>
<li><a><img src="static/imgs/3.jpg"></a></li>
<li><a><img src="static/imgs/4.jpg"></a></li>
<li><a><img src="static/imgs/5.jpg"></a></li>
<li><a><img src="static/imgs/6.jpg"></a></li>
<li><a><img src="static/imgs/7.jpg"></a></li>
<li><a><img src="static/imgs/8.jpg"></a></li>
</ul>
<div id="list-num">
<ul>
<li class="list-active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="left"> < </div>
<div id="right"> > </div>
</div>
</body>
</html>
css:
body,div,ul,li,a,img,html{
margin:0;
padding:0;
}
li{
list-style:none;
}
a{
text-decoration:none;
}
#wrap{
width:790px;
height:340px;
margin:40px auto;
border:1px solid #ccc;
position:relative;
}
#wrap>ul>li{
opacity:0;
position:absolute;
top:0;
left:0;
transition:opacity 0.4s linear;
}
#wrap>ul>.active{
opacity:1;
}
#list-num{
width:150px;
height:16px;
background:rgba(255,255,255,0.3);
border-radius:16px;
position:absolute;
bottom:20px;
left:50%;
margin-left:-75px;
}
#list-num>ul>li{
width:11px;
height:11px;
border-radius:11px;
background:rgba(255,255,255,0.6);
float:left;
margin-left:7px;
margin-top:2.5px;
}
#list-num>ul>.list-active{
background:red;
}
#right,#left{
width:30px;
height:60px;
color:#fff;
font-size:24px;
background:rgba(0,0,0,0.3);
position:absolute;
top:50%;
margin-top:-30px;
line-height:60px;
text-align:center;
cursor:pointer;
display:none;
}
#right{
right:0;
}
#right:hover,#left:hover{
background:rgba(0,0,0,0.6);
}
js:
window.onload = function(){
// 获取最外层div
var oDiv = document.getElementById("wrap");
// 通过div得到图片的li(通过children子元素获得;children[0]得到的是div的第一个子元素)
var lis = oDiv.children[0].children;
// 获取小圆点外div
var oDiv1 = document.getElementById("list-num");
var lists = oDiv1.children[0].children;
// console.log(lists);
// 设一个index代表li的第一个索引
var index = 0;
var len = lis.length;
// 焦点图自动切换;
var run;
function playgo(){
// 因为下段代码会循环执行,所以用定时器,一直执行下去;
run = setInterval(function(){
// 上一个li去掉class为active 下一个增加class
// 下边小圆点的效果;
//1.小圆点跟着焦点图切换背景颜色;小圆点的index与上边的li是一样的
removeClass(index);
index++;//++后就是下一个div
if(index == len){
index = 0;
}
addClass(index);
},2000);
}
playgo();
//鼠标移到外边大的div上的时候焦点图停止切换;
// 焦点图停止切换即停止上边的定时器;鼠标滑到div上的时候,左右按钮出现;
oDiv.onmouseover = function(){
clearInterval(run);
left.style.display = "block";
right.style.display = "block";
}
// 鼠标离开div定时器开启;
oDiv.onmouseout = function(){
playgo();
left.style.display = "none";
right.style.display = "none";
}
for(var i = 0;i<lists.length;i++){
lists[i].onmouseover = (function(i){
return function(){
removeClass(index);
index = i;
addClass(index);
}
})(i);
}
//鼠标点击左边按钮的效果;
left.onclick = function(){
removeClass(index);
index--;
if(index < 0){
index = len-1;
}
addClass(index);
}
//鼠标点击右边按钮的效果;
right.onclick = function(){
removeClass(index);
index++;
if(index == len){
index = 0;
}
addClass(index);
}
function removeClass(i){
lis[i].removeAttribute("class");
lists[i].removeAttribute("class");
}
function addClass(i){
lis[i].setAttribute("class","active");
lists[i].setAttribute("class","list-active");
}
}
个人总结,希望对你们有用;