html:
<div class="b_lswiper">
<div id="box" class="all">
<div class="inner">
<ul>
<!--node 循环图片-->
{% for key,item in listBanner %}
<li>
<a href={
{item.jumpUrl}}>
<img src={
{item.bannerUrl}} alt="" class="b_swiperimg">
<span class="s_text">{
{item.bannerTitle}}</span></a>
</li>
{% endfor %}
</ul>
<!--里面存放小圆点-->
<ol></ol>
</div>
<div class="focusD" id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
</div>
js:
// 轮播图
var index = 0;
var box = my ( " b o x " ) ; / / 获 取 最 外 面 的 d i v v a r i n n e r = b o x . c h i l d r e n [ 0 ] ; / / 获 取 相 框 v a r i m g W i d t h = i n n e r . o f f s e t W i d t h ; / / 获 取 去 相 框 的 宽 度 v a r u l O b j = i n n e r . c h i l d r e n [ 0 ] ; / / 获 取 u l v a r l i s t = u l O b j . c h i l d r e n ; / / 获 取 u l 中 所 有 的 l i v a r o l O b j = i n n e r . c h i l d r e n [ 1 ] ; / / 获 取 o l v a r a r r = m y ("box"); //获取最外面的div var inner = box.children[0]; //获取相框 var imgWidth = inner.offsetWidth; //获取去相框的宽度 var ulObj = inner.children[0]; // 获取ul var list = ulObj.children; //获取ul中所有的li var olObj = inner.children[1]; //获取ol var arr = my ("box");//获取最外面的divvarinner=box.children[0];//获取相框varimgWidth=inner.offsetWidth;//获取去相框的宽度varulObj=inner.children[0];//获取ulvarlist=ulObj.children;//获取ul中所有的livarolObj=inner.children[1];//获取olvararr=my(“arr”); //获取焦点
//创建小按钮-----根据ul中li的个数
for (var i = 0; i < list.length; i++) {
var liObjs = document.createElement(“li”);
olObj.appendChild(liObjs);
liObjs.innerHTML = ‘’;
liObjs.setAttribute(“index”, i); // liObjs.innerHTML = (i + 1); //在ol中每个li中增加自定义属性,添加索引值
//注册鼠标进入事件
liObjs.onmouseover = function() {
for (var j = 0; j < olObj.children.length; j++) { //先移除所有背景颜色
olObj.children[j].removeAttribute(“class”);
}
this.className = “current”; //设置当前鼠标进来的类样式
index = this.getAttribute(“index”); //获取ol中li的索引值
animate(ulObj, -index * imgWidth); //移动动画函数//移动ul
};
}
//设置第一个ol中li的背景颜色
olObj.children[0].className = “current”;
//克隆ol中第一个li放到最后一个
ulObj.appendChild(ulObj.children[0].cloneNode(true));
var timeId = setInterval(clickHandle, 3000);
my ( " b o x " ) . o n m o u s e o v e r = f u n c t i o n ( ) a r r . s t y l e . d i s p l a y = " b l o c k " ; c l e a r I n t e r v a l ( t i m e I d ) ; ; / / 点 击 右 边 按 钮 m y ("box").onmouseover = function() { arr.style.display = "block"; clearInterval(timeId); }; //点击右边按钮 my ("box").onmouseover=function()arr.style.display="block";clearInterval(timeId);;//点击右边按钮my(“right”).onclick = clickHandle;
function clickHandle() {
if (index == ulObj.children.length - 1) {
ulObj.style.left = 0 + "px";
index = 0;
}
index++;
animate(ulObj, -index * imgWidth);
if (index == list.length - 1) {
olObj.children[0].className = "current";
olObj.children[olObj.children.length - 1].className = "";
} else {
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].className = "";
}
olObj.children[index].className = "current";
}
};
//点击左边按钮
my$("left").onclick = function() {
if (index == 0) {
index = list.length - 1;
ulObj.style.left = -index * imgWidth + "px";
}
index--;
animate(ulObj, -index * imgWidth);
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].className = "";
}
olObj.children[index].className = "current";
};
my$("box").onmouseout = function() {
arr.style.display = "none";
timeId = setInterval(clickHandle, 3000);
};
// 设置一个元素,移动到指定位置
function animate(element, target) {
clearInterval(element.timeId);
element.timeId = setInterval(function() {
var current = element.offsetLeft;
var step = 9;
step = current > target ? -step : step;
current += step;
if (Math.abs(target - current) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timeId);
element.style.left = target + "px";
}
}, 10);
}
function my$(id) {
return document.getElementById(id);
}
css:
/* 轮播图 /
.all {
/ margin: 100px auto; /
/ padding: 5px; /
border: 1px solid #ccc;
position: relative;
}
.b_lswiper img {
width: 593px;
height: 316px;
}
.inner {
position: relative;
width: 593px;
height: 316px;
background-color: pink;
overflow: hidden;
}
.inner ul {
width: 1000%;
list-style: none;
position: absolute;
top: 0;
left: 0;
}
.inner ul li {
float: left;
}
.inner ul .s_text {
z-index: 22;
position: absolute;
/ top: 285px; /
/ left: 10px; */
margin-left: 20px;
bottom: 20px;
width: 400px;
color: #fff;
text-align: left;
font-size: 16px;
font-weight: 600;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: “PingFangSC Medium”;
}
.focusD {
position: absolute;
left: 0;
top: 45%;
width: 593px;
padding: 0 10px;
height: 30px;
box-sizing: border-box;
display: none;
}
.inner ol {
position: absolute;
right: 30px;
bottom: 10px;
}
.inner ol li {
display: inline-block;
margin: 0 3px;
width: 28px;
height: 4px;
background: rgba(222, 218, 215, 1);
border-radius: 2px;
}
.focusD span {
display: inline-block;
width: 25px;
font-size: 24px;
height: 30px;
color: #ccc;
line-height: 30px;
text-align: center;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
}
#left {
float: left;
}
#right {
float: right;
}
实现效果:网站链接: 效果展示