js实现左右切换轮播图思路
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现左右切换轮播图思路相关的知识，希望对你有一定的参考价值。
参考技术A 我们在 CSS 阶段就已经接触到轮播图。通过轮播图我们可以达到一些好玩的特效，但使用 CSS 做出来的轮播图只有左右切换，渐变切换和简单的点击切换。局限性较大，观看效果也不佳。但当我们接触 js 之后，你就发现使用js来实现轮播图后，在看CSS实现轮播的效果就是...。我想说啥你知道的。废话不多说，咱们一起看看如何使用js来实现轮播效果。（本文以阴阳师中“平安世界”模块的轮播图为例）
这个轮播图，我们通过两大模块构成；左右点击模块和姓名点击模块。然后在两者相关联来达到最终的效果。
在使用js实现轮播图的效果前，先使用html和CSS完善这一模块的布局。
本轮播图使用8张图片。每次出现两张。我们在使用HTML和CSS布局时可以先把第一组的两张图片放好位置。其他的放在两边隐藏起来。需要使用的时候在出现移动到中间。
左右点击切换模块：
我们通过对左右按钮进行点击监听。在点击后做出反应。左右点击的思路一样。我们先说一下右边按钮点击事件。
当我们点击右边按钮后，我们通过对点击次数进行累计。此处我使用初始化常量然后累加最后通过判断来达到循环效果
对每一张图片进行编码，以此来达到循环切换图片的效果。在切换图片时，我们可以使用排他思想。当点击按钮切换下一张图片的时候，我们可以先遍历所有的图片，把所有的图片移动到两边，然后将要移动的图片移动到中央来达到切换效果
在移动的过程中的动画和定时器设置的延迟可以自己添加一下。
左边按钮的原理和右边一样反操作即可。注意常量要使用一个。否则两个按钮都只能单方向运动，可能还会出现其他问题。
本次现讲一下左右切换的思路。
JavaScript：100%原生js实现左右切换的轮播图(无延迟加载)
<!--
说明：此.html文件必需有：
(1)同级文件夹json，json文件夹下必需有文件data.txt，文件data.txt的内容为：
[{"imgSrc":"img/banner1.jpg"},
{"imgSrc":"img/banner2.jpg"},
{"imgSrc":"img/banner3.jpg"},
{"imgSrc":"img/banner4.jpg"}]
(2)同级文件夹img，img文件夹下必需有下列图片：banner1.jpg;banner2.jpg;banner3.jpg;banner4.jpg;
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
.box{
width: 1000px;
height: 300px;
position: relative;
margin:30px auto;
overflow: hidden;
}
.box .boxInner{
width: 4000px;
position: absolute;
left: 0;
top:0;
}
.box .boxInner div{
width: 1000px;
height: 300px;
float: left;
}
.box .boxInner div img{
width: 100%;
height: 100%;
}
.box ul{
position: absolute;
right:10px;
bottom:10px;
}
.box ul li{
width: 18px;
height: 18px;
background: #ccc;
border-radius: 50%;
margin-left: 10px;
float: left;
cursor: pointer;
}
.box ul li.on{
background: lightblue;
}
.box a{
width: 30px;
height: 30px;
position: absolute;
top:127px;
border: 10px solid red;
border-left: none;
border-bottom: none;
opacity: 0.3;
filter:alpha(opacity=30);
display: none;
}
.box a:hover{
opacity: 1;
filter:alpha(opacity=100);
}
.box .btnLeft{
transform: rotate(-135deg);
left:30px;
}
.box .btnRight{
transform: rotate(45deg);
right:30px;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="boxInner">
<!--<div><img src="img/banner1.jpg" /></div>
<div><img src="img/banner2.jpg" /></div>
<div><img src="img/banner3.jpg" /></div>
<div><img src="img/banner4.jpg" /></div>-->
</div>
<ul>
<!--<li class="on"></li>
<li></li>
<li></li>
<li></li>-->
</ul>
<a href="javascript:;" class="btnLeft"></a>
<a href="javascript:;" class="btnRight"></a>
</div>
<script>
function getCss(curEle,attr){
var val=null;
var reg=null;
if(getComputedStyle){//标准
val=getComputedStyle(curEle,false)[attr];
}else{//非标准
if(attr===‘opacity‘){
val=curEle.currentStyle.filter; //‘alpha(opacity=10)‘
reg=/^alpha\(opacity[=:](\d+)\)$/i;
return reg.test(val)?reg.exec(val)[1]/100:1;
}
val=curEle.currentStyle[attr];
}
reg=/^[+-]?((\d|([1-9]\d+))(\.\d+)?)(px|pt|rem|em)$/i;
return reg.test(val)?parseInt(val):val;
}
function setCss(curEle,attr,value){
if(attr===‘float‘){
curEle.style.cssFloat=value;
curEle.style.styleFloat=value;
return;
}
if(attr===‘opacity‘){
curEle.style.opacity=value;
curEle.style.filter=‘alpha(opacity=‘+(value*100)+‘)‘;
return;
}
//对单位的处理
var reg=/^(width|height|top|right|bottom|left|((margin|padding)(top|right|bottom|left)?))$/i;
if(reg.test(attr)){
if(!(value===‘auto‘ || value.toString().indexOf(‘%‘)!==-1)){
value=parseFloat(value)+‘px‘;
}
}
curEle.style[attr]=value;
}
function setGroupCss(curEle,opt){
if(opt.toString()!==‘[object Object]‘) return;
for(var attr in opt){
this.setCss(curEle,attr,opt[attr]);
}
}
function css(curEle){
var arg2=arguments[1];
if(typeof arg2===‘string‘){
var arg3=arguments[2];
if(typeof arg3===‘undefined‘){ //当第三个参数不存在，是获取；
return this.getCss(curEle,arg2);
}else{
this.setCss(curEle,arg2,arg3);
}
}
if(arg2.toString()===‘[object Object]‘){ //获取一组元素
this.setGroupCss(curEle,arg2);
}
}
function animate(curEle,target,duration){
function tmpEffect(t, b, c, d) {
return c * t / d + b;
}
//1.为公式的每个参数做准备
var begin={};
var change={};
for(var attr in target){
begin[attr]=css(curEle,attr);
change[attr]=target[attr]-begin[attr];
}
duration=duration||700;
var time=0;
//2.开启一个定时器，让时间不断累加；根据时间和公式，求出最新的位置；
clearInterval(curEle.timer); //开起一个定时器前，先关闭没用的定时器
curEle.timer=setInterval(function(){
time+=10;
//3.停止运动的条件（time>=duration）
if(time>=duration){
css(curEle,target);
clearInterval(curEle.timer);
return;
}
//拿到每个属性的最新值，并且赋值给元素对应的属性；
for(var attr in target){
var curPos=tmpEffect(time,begin[attr],change[attr],duration);
css(curEle,attr,curPos);
}
},10)
}
(function(){
//获取元素
var oBox=document.getElementById("box");
var oBoxInner=oBox.getElementsByTagName(‘div‘)[0];
var aDiv=oBoxInner.getElementsByTagName(‘div‘);
var oUl=oBox.getElementsByTagName(‘ul‘)[0];
var aLi=oUl.getElementsByTagName(‘li‘);
var oBtnLeft=oBox.getElementsByTagName(‘a‘)[0];
var oBtnRight=oBox.getElementsByTagName(‘a‘)[1];
var data=null;
var timer=null;
var step=0;
//1.获取并解析数据
getData();
function getData(){
var xml=new XMLHttpRequest;
xml.open(‘get‘,‘json/data.txt‘,false);
xml.onreadystatechange=function(){
if(xml.readyState==4 && /^2\d{2}$/.test(xml.status)){
data=JSON.parse(xml.responseText);
}
};
xml.send();
}
//2.绑定数据
bind();
function bind(){
var strDiv=‘‘;
var strLi=‘‘;
for(var i=0; i<data.length; i++){
strDiv+=‘<div><img src="‘+data[i].imgSrc+‘" /></div>‘;
strLi+=i===0?‘<li class="on"></li>‘:‘<li></li>‘;
}
strDiv+=‘<div><img src="‘+data[0].imgSrc+‘" /></div>‘;
oBoxInner.innerHTML+=strDiv;
oBoxInner.style.width=aDiv.length*aDiv[0].offsetWidth+‘px‘;
oUl.innerHTML+=strLi;
}
//3.图片自动轮播
timer=setInterval(autoMove,1400);
function autoMove(){
if(step>=aDiv.length-1){
step=0;
css(oBoxInner,‘left‘,0)
}
step++;
animate(oBoxInner,{left:-step*1000});
bannerTip();
}
//4.焦点自动轮播
function bannerTip(){
var tmpStep=step>=aLi.length?0:step;
for(var i=0; i<aLi.length; i++){
aLi[i].className=i==tmpStep?‘on‘:null;
}
}
//5.鼠标移入停止，移出继续
oBox.onmouseover=function(){
clearInterval(timer);
oBtnLeft.style.display=‘block‘;
oBtnRight.style.display=‘block‘;
};
oBox.onmouseout=function(){
timer=setInterval(autoMove,1400);
oBtnLeft.style.display=‘none‘;
oBtnRight.style.display=‘none‘;
};
//6.点击焦点手动切换
handleChange();
function handleChange(){
for(var i=0; i<aLi.length; i++){
aLi[i].index=i;
aLi[i].onclick=function(){
step=this.index;
animate(oBoxInner,{left:-step*1000});
bannerTip();
}
}
}
//7.点击左右按钮手动切换
oBtnRight.onclick=autoMove;
oBtnLeft.onclick=function(){
if(step<=0){
step=aDiv.length-1;
css(oBoxInner,‘left‘,-step*1000);
}
step--;
animate(oBoxInner,{left:-step*1000});
bannerTip();
}
})();
</script>
</body>
</html>
以上是关于js实现左右切换轮播图思路的主要内容，如果未能解决你的问题，请参考以下文章