用jquery实现轮播图非常简单的啦！
有没有想过用原生js实现轮播图呢？？？
今天琢磨了一下，摸索出来一个，就和大家一起分享咯！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
.carousel{
width: 549px;
height: 412px;
border: 1px solid #000;
box-sizing:border-box;
margin:10px auto;
overflow: hidden;
position: relative;
}
.carousel .imgs li{
position: absolute;
left:0;
top:0;
opacity: 0;
filter:alpha(opacity=0);
/*过渡实现动画*/
transition:all 1s linear 0s;
}
.carousel .imgs li.active{
opacity:1;
filter:alpha(opacity=100);
}
.carousel .btns{
position: absolute;
top:50%;
margin-top: -10px;
width: 549px;
height: 20px;
line-height: 20px;
font-size: 20px;
font-weight: bold;
}
.carousel .btns span{
position: absolute;
display:block;
width: 20px;
height: 20px;
}
.carousel .btns span.leftBtn{
left:20px;
}
.carousel .btns span.rightBtn{
right:20px;
}
.carousel .circles{
width: 140px;
height: 20px;
position: absolute;
bottom: 20px;
left:50%;
margin-left: -70px;
}
.carousel .circles li{
width: 20px;
height: 20px;
margin-right: 10px;
box-sizing:border-box;
border: 1px solid #000;
border-radius: 50%;
float: left;
background-color: #ddd;
}
.carousel .circles li:last-child{
margin-right:0;
}
.carousel .circles li.active{
background-color: pink;
}
</style>
</head>
<body>
<div class="carousel" id="carousel">
<ul class="imgs" id="imgs">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="btns">
<span class="leftBtn" id="leftBtn"><</span>
<span class="rightBtn" id="rightBtn">></span>
</div>
<ol class="circles" id="circles">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script type="text/javascript">
var carousel=$("carousel");
var imgs=$("imgs");
var imgs_list=imgs.getElementsByTagName("li");
var circles=$("circles");
var circles_list=circles.getElementsByTagName("li");
var amount=circles_list.length;
var leftBtn=$("leftBtn");
var rightBtn=$("rightBtn");
var idx=0;
//写一个函数，通过id获取元素，避免每次获取元素时都要输入document.getElementById
function $(id){
return document.getElementById(id);
}
// 设置一个定时器让轮播图自动播放
var timer=setInterval(rightBtnfun,1000);
// 鼠标进入轮播图停止自动播放
carousel.onmouseenter=function(){
clearInterval(timer);
}
// 鼠标离开轮播图开始自动播放
carousel.onmouseleave=function(){
// 设表先关
clearInterval(timer);
timer=setInterval(rightBtnfun,1000);
}
// 右按钮点击事件
rightBtn.onclick=rightBtnfun;
function rightBtnfun(){
// 点击前的图片去除className=active时的样式，也就是图片消失（透明度为0），小圆点去除className=active时的样式
imgs_list[idx].className="";
circles_list[idx].className="";
//信号量改变
idx++;
if(idx>amount-1){
idx=0;
}
//给当前的图片添加特殊样式,也就是添加className=active
imgs_list[idx].className="active";
circles_list[idx].className="active";
}
leftBtn.onclick=function(){
imgs_list[idx].className="";
circles_list[idx].className="";
idx--;
if(idx<0){
idx=amount-1;
}
imgs_list[idx].className="active";
circles_list[idx].className="active";
}
// 小圆点点击事件
// 因为有函数，存在闭包的影响，要想i变化的同时所有图片和小圆点同时发生相应的变化，就需要使用iife,使其立即执行
for(var i=0;i<=amount-1;i++){
(function(i){
circles_list[i].onclick=function(){
// 对应与排他
// 先整体设置共同样式，再给个别元素设置特殊样式
for(var j=0;j<amount;j++){
circles_list[j].className="";
imgs_list[j].className="";
}
circles_list[i].className="active";
imgs_list[i].className="active";
}
})(i);
}
</script>
</body>
</html>
想要看效果的亲把图片换一下就ok咯！这里就不提供原图啦。:-D:-D:-D:-D:-D:-D
在下也只是一个初学者，水平有限，各位码友不吝赐教哦！
抱拳感谢！
觉得对你有用的、喜欢的……就不吝点赞吧！
