为了工作和平时项目的需要，在自己工作空余时间自己写的一个css样式
同时也是为了巩固知识。
原生js实现无缝滚动轮播
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生js轮播图-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
margin:0px;
padding:0px;
}
#benner {
width:790px;
height:340px;
margin-left:15%;
margin-top:10px;
}
#benner .imga {
display:none;
}
#benner .img .active {
display:block;
}
#benner .title {
width:;
height:16px;
background-color:rgba(226,226,226,0.6);
border-radius:30px;
margin-top:-35px;
float:left;
margin-left:40%;
margin-right:40%;
padding:6px 0px 0px 10px;
position:relative;
}
#benner .title .nr {
list-style:none;
width:10px;
height:10px;
background:#fff;
border-radius:10px;
float:left;
margin-right:10px;
margin-bottom:0px;
}
#benner .title .active {
background:#db192a;
}
.img>img{
width:790px;
height:340px;
}
</style>
</head>
<body>
<div id="benner">
<div class="img">
<img src="http://img1.imgtn.bdimg.com/it/u=2422436610,701962099&fm=26&gp=0.jpg" class="imga">
<img src="http://img3.imgtn.bdimg.com/it/u=3267432721,2201720082&fm=26&gp=0.jpg" class="imga">
<img src="http://img0.imgtn.bdimg.com/it/u=3406027490,3874613918&fm=26&gp=0.jpg" class="imga">
<img src="http://img3.imgtn.bdimg.com/it/u=3267432721,2201720082&fm=26&gp=0.jpg" class="imga">
<img src="http://img1.imgtn.bdimg.com/it/u=2422436610,701962099&fm=26&gp=0.jpg" class="imga">
<img src="http://img3.imgtn.bdimg.com/it/u=3267432721,2201720082&fm=26&gp=0.jpg" class="imga">
</div>
<ul class="title">
<li class="nr active"></li>
<li class="nr"></li>
<li class="nr"></li>
<li class="nr"></li>
<li class="nr"></li>
<li class="nr"></li>
</ul>
</div>
<script>
window.onload = function() {
benner('#benner', '.nr', '.imga')
function benner(parent, controller, mod) {
var num = 0;
var controller = $(controller);
var mod = $(mod);
var benner = $(parent);
var autoPlayTime = 2000;
var imgNum = mod.length - 1;
var auto;
autoPlay();
//根据传进来的名字获取这个名字所对应的对象
function $(name) {
if (name[0] == '#') {
return document.getElementById(name.substr(1));
} else if (name[0] == '.') {
return document.getElementsByClassName(name.substr(1));
} else {
return document.getElementsByTagName(name);
}
}
//实现鼠标划过圆点,变化图片的效果
//function change(controller, mod){
//遍历控制器,绑定鼠标划过事件
for (var i = 0; i < controller.length; i++) {
//给控制器加个索引,并把i值赋值给索引
controller[i].index = i;
//给所有的控制器都加划过事件
controller[i].onmouseover = function() {
for (var j = 0; j < controller.length; j++) {
//将所有控制器改为默认样式
controller[j].className = 'nr';
}
//改变所选的控制器样式
this.className = 'nr active';
//将模型改为默认样式
for (var x = 0; x < mod.length; x++) {
mod[x].className = 'imga';
}
//改变所选控制器对应的模型的样式
mod[this.index].className = 'imga active';
}
}
//}
//绑定鼠标移入,暂停播放图片
benner.onmouseover = function() {
clearInterval(auto);
}
//绑定鼠标离开,继续播放
benner.onmouseleave = function() {
autoPlay();
}
//指定播放那个图片
function play(num) {
for (var j = 0; j < controller.length; j++) {
controller[j].className = 'nr';
}
controller[num].className = 'nr active';
for (var x = 0; x < mod.length; x++) {
mod[x].className = 'imga';
}
mod[num].className = 'imga active';
}
//自动播放
function autoPlay() {
auto = setInterval(function() {
if (num > imgNum) {
num = 0;
}
play(num);
num++;
}, autoPlayTime)
}
}
}
</script>
</body>
</html>