JS实现焦点图轮播效果的方法详解
编程学习 2021-07-04 19:20www.dzhlxh.cn编程入门
这篇文章主要介绍了JS实现焦点图轮播效果的方法,结合实例形式详细分析了JS焦点图轮播效果的原理、实现步骤与相关操作技巧,需要的朋友可以参考下
本文实例讲述了JS实现焦点图轮播效果的方法。分享给大家供大家参考，具体如下：
效果图如下：
一、所用到的知识点
1.DOM操作
2.定时器
3.事件运用
4.Js动画
5.函数递归
6.无限滚动大法
二、结构和样式
<div id="banner" class="banner">
<ul id="list-banner" class="list-banner fn-clear" style="left:-624px;">
<li><a href="#"><img src="images/banner4.jpg" width="624" height="200" alt="" title="" /></a></li>
<li><a href="#"><img src="images/banner1.jpg" width="624" height="200" alt="" title="" /></a></li>
<li><a href="#"><img src="images/banner2.jpg" width="624" height="200" alt="" title="" /></a></li>
<li><a href="#"><img src="images/banner3.jpg" width="624" height="200" alt="" title="" /></a></li>
<li><a href="#"><img src="images/banner4.jpg" width="624" height="200" alt="" title="" /></a></li>
<li><a href="#"><img src="images/banner1.jpg" width="624" height="200" alt="" title="" /></a></li>
</ul>
<div class="list-num-wp">
<div id="list-num" class="list-num fn-clear">
<a href="#" class="hover"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
<div class="left">
<a id="left" href="#"></a>
</div>
<div class="right">
<a id="right" href="#"></a>
</div>
</div>
.banner{position:relative;width:624px;height:200px;overflow:hidden;}
.banner .list-banner{position:absolute;width:5000px;}
.banner .list-banner li{float:left;width:624px;height:200px;}
.banner .list-num-wp{position:absolute;bottom:7px;width:624px;height:11px;}
.banner .list-num{width:100px;margin:0 auto;}
.banner .list-num a{display:inline;float:left;width:11px;height:11px;margin:0 7px; background:url(../images/list-num.png) no-repeat;}
.banner .list-num a:hover{background:url(../images/list-num-hover.png));}
.banner .list-num a.hover{background:url(../images/list-num-hover.png);}
.banner .left a{display:block;position:absolute;width:49px;height:49px;top:75px;left:4px;background:url(../images/arrow.gif) 0 0;filter: Alpha(opacity=50);-moz-opacity:.5;opacity:0.5;}
.banner .right a{display:block;position:absolute;width:49px;height:49px;top:75px;right:4px;background:url(../images/arrow.gif) 0 -49px;filter: Alpha(opacity=50);-moz-opacity:.5;opacity:0.5;}
三、脚本思路
1.先左右按钮功能
window.onload=function(){
var prev=document.getElementById("left");
var next=document.getElementById("right");
var list_banner=document.getElementById("list-banner");
next.onclick=function(){
list_banner.style.left=parseInt(list_banner.style.left)-624+'px'; //注：html上的ul要加行间样式left:0;，否则这里动不起来
}
prev.onclick=function(){
list_banner.style.left=parseInt(list_banner.style.left)+624+'px';
}
}
2.左右按钮点击的两句话很像，封装成函数
function animate(offset){
list_banner.style.left=parseInt(list_banner.style.left)+offset+'px';
}
next.onclick=function(){
animate(-624);
}
prev.onclick=function(){
animate(624);
}
3.无限滚动
①假图的做法
即图片为412341，小于最后一张位置的时候，回到第一张的位置，大于 第一张位置的时候，拉到最后一张的位置
function animate(offset){
var newLeft=parseInt(list_banner.style.left)+offset;
list_banner.style.left=newLeft+'px';
if(newLeft<-2496){
list_banner.style.left=-624+"px";
}
if(newLeft>-624){
list_banner.style.left=-2496+"px";
}
}
4.小圆点跟着左右按钮切换
var index=1;
function showDot(){
for(var i=0;i<list_num.length;i++){
list_num[i].className="";
}
list_num[index-1].className="hover";
}
next.onclick=function(){
animate(-624);
index++;
if(index>4){
index=1;
}
showDot();
}
prev.onclick=function(){
animate(624);
index--;
if(index<1){
index=4;
}
showDot();
}
5.点击小圆点图片滚动及小圆点切换
for(var i=0;i<list_num.length;i++){
list_num[i].onclick=function(){
if(this.className=="hover"){
return;
}
var myIndex=parseInt(this.getAttribute("index"));
var offset=-624*(myIndex-index);
index=myIndex;
animate(offset);
showDot();
}
}
①点自己的时候不执行下列代码
②
<div class="list-num-wp">
<div id="list-num" class="list-num fn-clear">
<a index="1" href="#" class="hover"></a>
<a index="2" href="#"></a>
<a index="3" href="#"></a>
<a index="4" href="#"></a>
</div>
</div>
关键是要取到点击的是第几张图片，不能直接var myIndex=this.index;因为index是自定义属性，dom自带属性可以通过点来获取，自定义属性不行，.getAttribute（）既可以获取自定义属性，又可以获取dom自带属性
③更新index值，index=myIndex;
6.动画函数（有一个渐变的运动过程）
function animate(offset){
animated=true;
var newLeft=parseInt(list_banner.style.left)+offset;
var time=300; //位移总时间
var interval=30; //位移间隔时间
var speed=offset/(time/interval); //每次移动距离
speed=speed>0?Math.ceil(speed):Math.floor(speed); //可能存在小数，取整
function go(){
if((speed < 0 && parseInt(list_banner.style.left)>newLeft)||(speed>0&&parseInt(list_banner.style.left)<newLeft)){ //newLeft目标值
list_banner.style.left=parseInt(list_banner.style.left)+speed+'px';
setTimeout(go,interval); //不止做一次运动（go函数），每隔30毫秒前进一下
}
else{
animated=false;
list_banner.style.left=newLeft+'px';
if(newLeft<-2496){
list_banner.style.left=-624+"px";
}
if(newLeft>-624){
list_banner.style.left=-2496+"px";
}
}
}
go();
}
next.onclick=function(){
if(!animated){
index++;
}
if(index>4){
index=1;
}
showDot();
if(!animated){
animate(-624);
}
}
prev.onclick=function(){
if(!animated){
index--;
}
if(index<1){
index=4;
}
showDot();
if(!animated){
animate(624);
}
}
for(var i=0;i<list_num.length;i++){
list_num[i].onclick=function(){
if(this.className=="hover"){
return;
}
var myIndex=parseInt(this.getAttribute("index"));
var offset=-624*(myIndex-index);
index=myIndex;
showDot();
if(!animated){
animate(offset);
}
}
}
①一个函数不停地在一个条件后调用自身，这种做法就叫做递归，这里通过递归可以实现animate这个函数的动画效果
②不停点就意味着不停调用animate函数，可能会造成卡顿，图片乱刷，需要优化，引进变量animated
7.自动播放
function autoplay(){
timer=setInterval(function(){
next.onclick();
},1000)
}
function stopautoplay(){
clearInterval(timer);
}
banner.onmouseover=stopautoplay;
banner.onmouseout=autoplay;
autoplay();
setTimeout只执行一次，之前一直执行，是因为递归
setInterval是每隔多少时间
8.假图的优化
实际运用中，图片肯定是按顺序存放，所以假图最好通过js来生成，而不是本身写在html上
var img_first=list_banner.getElementsByTagName("li")[0];
var img_last=list_banner.getElementsByTagName("li")[3];
list_banner.appendChild(img_first.cloneNode(true));
list_banner.insertBefore(img_last.cloneNode(true),list_banner.getElementsByTagName("li")[0]);
appendChild是将新的节点添加到目标的最后一个子节点之后
insertBefore是将新的节点添加到已存在的子节点之前
cloneNode方法，true表示深克隆，false表示浅克隆，深克隆是将标签和标签里的内容都复制过来，而浅克隆不复制内容
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。