焦点图做法:
1、html主体结构
<div class="w">
<div class="main w">
<div class="focus fl">
<ul>
<li>
<a href="javascript:;"><img src="images/focus.png" alt="" ></a>
</li>
<li>
<a href="javascript:;"><img src="images/focus1.jpg" alt="" ></a>
</li>
<li>
<a href="javascript:;"><img src="images/focus2.jpg" alt="" ></a>
</li>
<li>
<a href="javascript:;"><img src="images/focus3.jpg" alt="" ></a>
</li>
</ul>
<a href="javascript:;" class="arrow_r">></a>
<a href="javascript:;" class="arrow_l"><</a>
<ol>
</ol>
</div>
2、css样式
.main{
height: 467px;
width: 980px;
margin-left: 220px;
}
.current{
background-color: #fff;
}
.focus{
position: relative;
width: 721px;
height: 462px;
margin-top: 12px;
overflow: hidden;
}
.focus ul{
position: absolute;
top: 0;
left: 0;
width: 500%;
}
.focus .arrow_r,.focus .arrow_l{
display: none;
position: absolute;
top: 50%;
margin-top: -20px;
width:24px ;
height: 40px;
background-color: rgba(0,0,0,0.3);
text-align: center;
line-height: 40px;
color: #fff;
font-size: 18px;
z-index: 2;
}
.focus .arrow_l{
left: 0;
}
.focus .arrow_r{
right: 0;
}
.focus ol{
position: absolute;
left: 40px;
bottom: 20px;
}
.focus ol li{
float: left;
width: 12px;
height: 12px;
margin: 0 3px;
cursor: pointer;
border-radius: 50%;
z-index: 2;
border: 2px solid rgba(255, 255, 255, 0.5);
}
.focus ul li{
float: left;
}
3、js代码块
1、缓动动画函数
function animate(obj, target, callback) {
clearInterval(obj.timer);//函数刚开始运行就清楚定时器,这样就不会出现多次点击按钮添加多个定时器的情况
obj.timer = setInterval(function () {//采取给obj添加对象属性来避免需要不断开辟内存空间
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
callback && callback();
} else {
obj.style.left = obj.offsetLeft + step + 'px';
}
}, 15)
}
2、主体函数
window.addEventListener('load', function () {
var focus = document.querySelector('.focus');
var arrowr = document.querySelector('.arrow_r');
var arrowl = document.querySelector('.arrow_l');
var olOfFocus = focus.querySelector('ol'); //focus的ul
var ulOfFocus = focus.querySelector('ul'); //focus的ol
var focusWidth = focus.offsetWidth;
//1、添加鼠标经过焦点图的事件,当鼠标经过的时候,两侧的箭头显示,鼠标离开的时候两侧的鼠标隐藏
focus.addEventListener('mouseenter', function () {
arrowr.style.display = 'block';
arrowl.style.display = 'block';
clearInterval(timer);
timer=null;
})
focus.addEventListener('mouseleave', function () {
arrowr.style.display = 'none';
arrowl.style.display = 'none';
timer = setInterval(function() {
//手动调用点击事件
arrowr.click();
}, 2000);
})
//2、(1)让下方的小圆点自动随着焦点图片数量的变化而变化,有几个图就自动生成几个小圆点
// (2)顺便添加自定义属性data-index,为后边点击小li图片就显示做准备
for (var i = 0; i < ulOfFocus.children.length; i++) {
var li = document.createElement('li');
li.setAttribute('data-index', i);
olOfFocus.appendChild(li);
}
//3、给每个小圆点添加点击事件,使得鼠标点击小圆点的时候就播放对应的图片,此时需要用到之前封装好的动画函数
olOfFocus.children[0].className = 'current';
var dataIndex = 0;
for (var i = 0; i < olOfFocus.children.length; i++) { //给每个小圆点都添加点击事件
olOfFocus.children[i].addEventListener('click', function () {
for (var j = 0; j < olOfFocus.children.length; j++) {
olOfFocus.children[j].className = '' //每次点击小圆点之前先清楚其他的current类
}
this.className = 'current';
// animate(obj, target,callback) 之前封装好的动画函数,三个形参分别为动画执行对象,动画执行目标,以及动画函数结束之后执行的回调函数
dataIndex = this.getAttribute('data-index');//点击小圆点,获取当前的data-index数值
num = dataIndex;//涉及到下面的左右箭头,当我们点击小圆点的时候,图片的移动距离会变化,因此相应的num值也要改变,num功能见40行代码
animate(ulOfFocus, -dataIndex * focusWidth);//让我们的ul移动相应的距离
})
}
//4、给右箭头添加点击函数,使得点击右箭头的时候可以实现焦点图片的滑动,点击一下滑动一个图片的距离,但是多次点击不可能一直滑动,所以要有监视,用num
//为了让箭头走到最后一张图片的时候更加丝滑,所以我们再克隆最后一张图片,如果走到了最后复制的一张图片,此时 我们的ul 要快速复原 left 改为 0
var first = ulOfFocus.children[0].cloneNode(true);
ulOfFocus.appendChild(first);
var num = 0;
//节流阀(防止用户快速连续点击)采用回调函数
var flag=true;
arrowr.addEventListener('click', function () {
if(flag){
flag=false;
if (num == olOfFocus.children.length) {
num = 0;
ulOfFocus.style.left = 0;
}
num++;//点击一次,num++
for (var j = 0; j < olOfFocus.children.length; j++) {
olOfFocus.children[j].className = '' //每次点击之前先清楚其他的current类
}
if(num==4){
olOfFocus.children[0].className = 'current';
}
else{
olOfFocus.children[num].className = 'current';
}
animate(ulOfFocus, -num * focusWidth,function(){
flag=true;
});
}
})
//5、给左箭头添加点击函数,使得点击左箭头的时候可以实现焦点图片的滑动,点击一下滑动一个图片的距离,但是多次点击不可能一直滑动,所以要有监视,用num
arrowl.addEventListener('click', function () {
if(flag){
flag=false;
if (num == 0) {
num = olOfFocus.children.length;
ulOfFocus.style.left = -num * focusWidth + 'px';
}
num--;
for (var j = 0; j < olOfFocus.children.length; j++) {
olOfFocus.children[j].className = '' //每次点击之前先清楚其他的current类
}
olOfFocus.children[num].className = 'current';
animate(ulOfFocus, -num * focusWidth,function(){
flag=true;
});
}
})
var timer = setInterval(function() {
//手动调用点击事件
arrowr.click();
}, 2000);
})