<div class="container">
<ul id="slider">
<li><a href=""><img src="images/1.jpg"></a></li>
<li><a href=""><img src="images/2.jpg"></a></li>
<li><a href=""><img src="images/3.jpg"></a></li>
<li><a href=""><img src="images/4.jpg"></a></li>
<li><a href=""><img src="images/5.jpg"></a></li>
</ul>
<div id="num" class="num">
<span onmouseover="sli(this)">1</span>
<span onmouseover="sli(this)">2</span>
<span onmouseover="sli(this)">3</span>
<span onmouseover="sli(this)">4</span>
<span onmouseover="sli(this)">5</span>
</div>
</div>
图片与右下角的数字可以根据索引对应
css
body {
background-color: #000;
}
.container {
position: relative;
width: 400px;
height: 200px;
margin: 0 auto;
border: 5px solid #fff;
border-radius: 3px;
}
ul {
position: relative;
width: 400px;
height: 200px;
margin:0;
padding: 0;
}
li {
position: absolute;
display: none;
}
img {
width: 400px;
height: 200px;
}
.num {
position: absolute;
bottom: 1px;
right: 1px;
}
.num span {
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 50%;
color: #fff;
font-size: 14px;
background-color: #d58512;
text-align: center;
}
JS部分
var img = document.getElementById('slider').getElementsByTagName('li');
var num = document.getElementById('num').getElementsByTagName('span');
img[0].style.display = 'block';
num[0].style.backgroundColor = 'orange';
var index = 1;
setInterval(function () {
num_bg();
if (index > 4) index = 0;
img[index].style.display = 'block';
num[index].style.backgroundColor = 'orange';
index++;
}, 2000);
function sli(obj) {
index = parseInt(obj.innerText) - 1;
num_bg();
img[index].style.display = 'block';
num[index].style.backgroundColor = 'orange';
}
function num_bg() {
for (var i=0; i<img.length; i++) {
img[i].style.display = 'none';
num[i].style.backgroundColor = '#d58512';
}
}
window.onload = func(){}可以保证js在页面加载完成后执行,也可以把js代码放在页面后实现.
每一次移动时改变图片和右下角数字的背景颜色,在css中设置图片的display:none, 数字的背景色为统一的颜色,js初始化时先将第一个图片设置为display:block并改变第一个数字的背景色,之后再for循环
因为图片是自动改变,所以setInterval必不可少, setInterval属于window的对象方法
当鼠标滑动到不同数字时, 自动轮播图片的索引也需要改变, 所以将索引index设为全局变量
获取每一个轮播元素,通过for循环, 设置所有图片display:none, 数字背景色为黄色, 设置当前索引display:block, 数字背景色为橘色, 鼠标移动到其他数字时,再根据索引改变
setInterval() 方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。返回一个intervalID
语法: let intervalID = window.setInterval(func, delay);
-
intervalID是此重复操作的唯一辨识符,可作为参数传递给clearInterval -
func是想要重复操作的函数 -
delay是每次延迟的毫秒数
li {
position: absolute;
/*display: none;*/
opacity: 0;
filter: alpha(opacity=0);
}
li.current {
opacity: 1;
filter: alpha(opacity=100);
}
.num span.current {
color: #fff;
opacity: 1;
filter: alpha(opacity=100);
background: #f60;
}
opacity 不透明度, 有继承属性,也就是说设置opacity的元素, 其子元素也全部有opacity这个属性, 也理解了为什么之前在改变元素背景颜色并且设置了opacity时, 文本颜色的透明度也发生了改变
父元素设置opacity, 子元素也设置opacity, 子元素的opacity=父opacity*子opacity
rgba 没有继承属性
filter兼容IE8以及低版的IE浏览器，是IE特有的，filter:Alpha(opacity=50)，也有继承属性
切换按钮改变索引就可以
淡入淡出
function show(a) {
idx = a;
var alpha=0;
//num[idx].classname = 'current';
clearInterval(timer);
timer = setInterval(function () {
alpha += 2;
alpha > 100 && (alpha=100);
img[idx].style.opacity = alpha / 100;
console.log(alpha/100);
img[idx].style.filter = "alpha(opacity="+alpha+")";
alpha == 100 && clearInterval(timer);
}, 20);
}
把元素的背景色设置为#fff, 在css中设置元素的opacity为0, 在每一个图片转换期间, 不断改变元素的alpha值,并在alpha的值等于100时清除定时器
自动改变方向
定义一个变量flag, flag为true, index++ , flag为false, index--, 并在索引为两边的界点时改变flag为相反值
