js实现炫酷的左右轮播图
本文实例为大家分享了js左右轮播图的具体代码，供大家参考，具体内容如下
html代码
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metakeyword="左右轮播图-效果比较好"> <title>Document</title> <linkrel="stylesheet"type="text/css"href="css/css.css"> <scripttype="text/javascript"src="js/animate.js"></script> <scripttype="text/javascript"src="js/slider.js"></script> </head> <body> <divclass="w-slider"id="js_slider"> <divclass="slider"> <divclass="slider-main"id="slider_main"> <divclass="slider-main-img"><ahref="#"><imgsrc="images/1.jpg"alt=""></a></div> <divclass="slider-main-img"><ahref="#"><imgsrc="images/2.jpg"alt=""></a></div> <divclass="slider-main-img"><ahref="#"><imgsrc="images/3.jpg"alt=""></a></div> <divclass="slider-main-img"><ahref="#"><imgsrc="images/4.jpg"alt=""></a></div> <divclass="slider-main-img"><ahref="#"><imgsrc="images/5.jpg"alt=""></a></div> <divclass="slider-main-img"><ahref="#"><imgsrc="images/6.jpg"alt=""></a></div> </div> </div> <divclass="slider-ctrl"id="slider_ctrl"> <spanclass="slider-ctrl-prev"></span> <!--<spanclass="slider-ctrl-concurrent"></span> <spanclass="slider-ctrl-con"></span> <spanclass="slider-ctrl-con"></span> <spanclass="slider-ctrl-con"></span> <spanclass="slider-ctrl-con"></span> <spanclass="slider-ctrl-con"></span>--> <spanclass="slider-ctrl-next"></span> </div> </div> <script> </script> </body> </html>
主要css代码：
.w-slider{
width:310px;
height:265px;
background-color:pink;
margin:100pxauto;
position:relative;
overflow:hidden;
}
.slider{
width:310px;
height:220px;
}
.slider-main{
width:620px;/*两个图片的宽度*/
height:310px;
}
.slider-mainimg{
vertical-align:top;/*消除图片上下3px的间隙*/
}
.slider-main-img{
position:absolute;
top:0;
left:0;
}
.slider-ctrl{
text-align:center;
padding-top:8px;
}
.slider-ctrl-con{
display:inline-block;
width:24px;
height:20px;
background-color:blue;
margin:05px;
background:url(../images/icon.png)no-repeat-24px-782px;
cursor:pointer;
text-indent:-20em;/*为了将span的标号隐藏掉*/
overflow:hidden;
}
.slider-ctrl.current{
background-position:-24px-762px;
}
.slider-ctrl-prev,.slider-ctrl-next{
position:absolute;
top:50%;
margin-top:-35px;
display:inline-block;
width:30px;
height:35px;
background:url(../images/icon.png)no-repeat6pxtop;
opacity:0.8;
cursor:pointer;
}
.slider-ctrl-prev{
left:0;
}
.slider-ctrl-next{
right:0;
background-position:-6px-44px;
}
主要js代码（slider.js）：
window.onload=function(){
function$(id){returndocument.getElementById(id);}
varjs_slider=$("js_slider");
varslider_main=$("slider_main");//获取轮播图片的父盒子
varimgs=slider_main.children;//得到图片组
varslider_ctrl=$("slider_ctrl");//获取控制的父盒子
//生成控制轮播的span
for(vari=0;i<imgs.length;i++){
varspan=document.createElement("span");
span.className="slider-ctrl-con";
span.innerHTML=imgs.length-i;
slider_ctrl.insertBefore(span,slider_ctrl.children[1]);
}
varspans=slider_ctrl.children;
spans[1].setAttribute("class","slider-ctrl-concurrent");//设置第一个span增加current样式
//布局图片，第一张在正确位置，其余的在右边
varscrollWidth=js_slider.clientWidth;//获取大盒子的宽度，也就是后面动画走的距离
for(vari=1;i<imgs.length;i++){//第一张图片在正确位置
imgs[i].style.left=scrollWidth+"px";//其余图片在310px的位置
}
//遍历三个按钮--左、右和下面的span
variNow=0;//设置当前显示的图片的索引号
for(varkinspans){//k是索引号
spans[k].onclick=function(){
if(this.className=="slider-ctrl-prev"){
//当前图片右移（从0->310px）
animate(imgs[iNow],{left:scrollWidth});
iNow=--iNow<0?imgs.length-1:iNow;
imgs[iNow].style.left=-scrollWidth+"px";//快速执行，即将显示的一页立马走到左边，然后显示
animate(imgs[iNow],{left:0});//下一张图片右移，从-310px->0
setSquare();
}elseif(this.className=="slider-ctrl-next"){
//当前图片左移（从0->-310px）
animate(imgs[iNow],{left:-scrollWidth});
iNow=(++iNow)%imgs.length;
imgs[iNow].style.left=scrollWidth+"px";//快速执行，即将显示的一页立马走到右边，然后左移显示
animate(imgs[iNow],{left:0});//下一张图片左移，从310px->0
setSquare();
//或者精简为函数
/*autoPlay();*/
}else{
/*alert("点击了下面的span");*/
varclickIndex=this.innerHTML-1;
if(clickIndex>iNow){
//做法等同于右侧按钮
animate(imgs[iNow],{left:-scrollWidth});
imgs[clickIndex].style.left=scrollWidth+"px";//快速执行，即将显示的一页立马走到右边，然后左移显示
}elseif(clickIndex<iNow){
//做法等同于左侧
animate(imgs[iNow],{left:scrollWidth});
imgs[clickIndex].style.left=-scrollWidth+"px";//快速执行，即将显示的一页立马走到左边，然后显示
}
iNow=clickIndex;
animate(imgs[iNow],{left:0});
setSquare();
}
}
}
//控制span小方块的样式函数
functionsetSquare(){
//下面的span样式清空，将iNow设置为current，注意是下面的span，不包含左右控制按钮
for(vari=1;i<spans.length-1;i++){
spans[i].className="slider-ctrl-con";
}
spans[iNow+1].className="slider-ctrl-concurrent";//注意iNow是索引号，要加1
}
//设置定时器，和右侧按钮功能一致
vartimer=null;
timer=setInterval(autoPlay,2000);
functionautoPlay(){
animate(imgs[iNow],{left:-scrollWidth});
iNow=(++iNow)%imgs.length;
imgs[iNow].style.left=scrollWidth+"px";//快速执行，即将显示的一页立马走到右边，然后左移显示
animate(imgs[iNow],{left:0});//下一张图片左移，从310px->0
setSquare();
}
//清除定时器
js_slider.onmouseover=function(){
clearInterval(timer);
}
//开启定时器
js_slider.onmouseout=function(){
clearInterval(timer);//要执行定时器，先清除定时器
timer=setInterval(autoPlay,2000);
}
}
缓动动画js代码：（animate.js）
//返回当前样式
functiongetStyle(obj,attr){//obj对象，attr属性名
if(obj.currentStyle){//ie等
returnobj.currentStyle[attr];
}else{//w3c
returnwindow.getComputedStyle(obj,null)[attr];
}
}
functionanimate(obj,json,fn){//给谁json
clearInterval(obj.timer);
obj.timer=setInterval(function(){
varflag=true;//用来判断是否停止定时器一定写到遍历的外面
for(varattrinjson){//attr属性json[attr]值
//开始遍历json
//计算步长用target位置减去当前的位置除以10
//console.log(attr);
varcurrent=0;
if(attr=="opacity")
{
current=Math.round(parseInt(getStyle(obj,attr)*100))||0;//用户没有定义opacity，则返回undefined
console.log(current);
}
else
{
current=parseInt(getStyle(obj,attr));//数值，去除样式的“px”
}
//console.log(current);
//目标位置就是属性值
varstep=(json[attr]-current)/10;//步长用目标位置-现在的位置/10
step=step>0?Math.ceil(step):Math.floor(step);
//判断透明度
if(attr=="opacity")//判断用户有没有输入opacity
{
if("opacity"inobj.style)//判断我们浏览器是否支持opacity
{
//obj.style.opacity，//支持opacity-----opacity:0.3
obj.style.opacity=(current+step)/100;
}
else
{//obj.style.filter=alpha(opacity=30)
obj.style.filter="alpha(opacity="+(current+step)*10+")";
}
}
elseif(attr=="zIndex")
{
obj.style.zIndex=json[attr];
}
else
{
obj.style[attr]=current+step+"px";
}
if(current!=json[attr])//只要其中一个不满足条件就不应该停止定时器这句一定遍历里面
{
flag=false;
}
}
if(flag)//用于判断定时器的条件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn)//很简单当定时器停止了。动画就结束了如果有回调，就应该执行回调
{
fn();//函数名+（）调用函数执行函数暂且这样替代
}
}
},30)
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。