php轮播图代码_js如何实现轮播图播放效果（附代码）

本篇文章给大家带来的内容是关于js如何实现轮播图播放效果(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

早前做轮播图的时候，我们习惯在网上找一些现成的例子修改修改使用。现在做轮播图，像bootstrap和iview等前端框架中都有封装好的特效，直接拿过来使用就可以了。但是轮播图是怎么做的呢。下面我们用原生代码来手写一个轮播图的特效。

实现效果如下：(图片来自网络)

实现功能如下：鼠标划在左半部分出现左箭头切换，鼠标划在右半部分出现右箭头切换。

点击数字播放，当前播放页数字背景透明度为1，非当前页透明度为0.6

点击缩略图播放，当前播放页缩略图透明度为1，非当前页缩略头透明度为0.3

间隔2000ms自动播放(包括图片、数字、缩略图)。

根据前面运动知识，实现代码如下：

我们把前面总结的运动框架封装在move.js中

轮播图

*{

margin: 0;

padding: 0;

}

#switch{

width: 1400px;

height: 520px;

margin:auto;

position: relative;

overflow: hidden;

}

#switch .bigpic li{

position: absolute;

top: 0;

left: 0;

}

#switch .bigpic li:nth-child(1){

z-index: 2;

}

#switch .prev{

width: 46px;

height: 46px;

line-height: 46px;

color: #fff;

border-radius: 100%;

background: rgba(255,255,255,0.6);

position: absolute;

top:192px;

left: 20px;

border-width: 0;

filter:alpha(opacity:0);

opacity:0;

z-index: 999;

}

#switch .next{

width: 46px;

height: 46px;

line-height: 46px;

color: #fff;

border-radius: 100%;

background: rgba(255,255,255,0.6);

position: absolute;

top:192px;

right: 20px;

border-width: 0;

filter:alpha(opacity:0);

opacity:0;

z-index: 9999;

}

#switch .number{

position: absolute;

right: 30px;

top: 390px;

z-index: 9999;

list-style: none;

}

#switch .number li{

display: inline-block;

width: 24px;

height: 24px;

line-height: 24px;

background: #fff;

border-radius: 100%;

color: #000;

text-align: center;

cursor: pointer;

filter:alpha(opacity:60);

opacity:0.6;

}

#switch .number li:nth-child(1){

filter:alpha(opacity:100);

opacity:1.0;

}

#switch .mark_left{

width: 700px;

height: 430px;

position: absolute;

left: 0;

top: 0;

z-index: 9998;

}

#switch .mark_right{

width: 700px;

height: 430px;

position: absolute;

right: 0;

top: 0;

z-index: 9998;

}

.smallimg{

list-style: none;

padding:0;

margin:0;

position: absolute;

top: 434px;

height: 86px;

}

.smallimg li{

width:280px;

height: 86px;

float: left;

filter:alpha(opacity:30);

opacity:0.3;

}

.smallimg li:nth-child(1){

filter:alpha(opacity:100);

opacity:1.0;

}

.smallimg li img{

width:280px;

height: 86px;

}

function getByClass(oParent,sClass){

var aEle=oParent.getElementsByTagName("*");

var aResult=[];

for(var i=0; i

if(aEle[i].className===sClass){

aResult.push(aEle[i]);

}

}

return aResult;

}

window.οnlοad=function(){

var op=document.getElementById("switch");

var oBtnPrev=getByClass(op,"prev")[0];

var oBtnNext=getByClass(op,"next")[0];

var oMarkLeft=getByClass(op,"mark_left")[0];

var oMarkRight=getByClass(op,"mark_right")[0];

// 左右按钮

oBtnPrev.οnmοuseοver=oMarkLeft.οnmοuseοver=function(){

startMove(oBtnPrev,"opacity",100);

}

oBtnPrev.οnmοuseοut=oMarkLeft.οnmοuseοut=function(){

startMove(oBtnPrev,"opacity",0);

}

oBtnNext.οnmοuseοver=oMarkRight.οnmοuseοver=function(){

startMove(oBtnNext,"opacity",100);

}

oBtnNext.οnmοuseοut=oMarkRight.οnmοuseοut=function(){

startMove(oBtnNext,"opacity",0);

}

// 大图切换

var opNumber=getByClass(op,"number")[0];

var aNumber=opNumber.getElementsByTagName("li");

var oBigPic=getByClass(op,"bigpic")[0];

var aImg=oBigPic.getElementsByTagName("li");

var aSmallImg=getByClass(op,"smallimg")[0];

var aSmall=aSmallImg.getElementsByTagName("li");

var nowZIndex=2;

var now=0;

aSmallImg.style.width=aSmall.length*aSmall[0].offsetWidth+"px";

for(var j=0; j

aNumber[j].index=j;

aNumber[j].οnclick=function(){

if(this.index===now){

return;

}

now=this.index;

tab();

}

aNumber[j].οnmοuseοver=function(){

startMove(this,"opacity",100);

}

aNumber[j].οnmοuseοut=function(){

if(this.index!=now){

startMove(this,"opacity",60);

}

}

}

for(var m=0; m

aSmall[m].index=m;

aSmall[m].οnclick=function(){

if(this.index===now){

return;

}

now=this.index;

tab();

}

aSmall[m].οnmοuseοver=function(){

startMove(this,"opacity",100);

}

aSmall[m].οnmοuseοut=function(){

console.log(this.index);

console.log(now);

if(this.index!=now){

startMove(this,"opacity",30);

}

}

}

function tab(){

aImg[now].style.zIndex=nowZIndex++;

for(var i=0; i

startMove(aNumber[i],"opacity",60);

}

for(var i=0; i

startMove(aSmall[i],"opacity",30);

}

startMove(aNumber[now],"opacity",100);

startMove(aSmall[now],"opacity",100);

aImg[now].style.height=0;

startMove(aImg[now],"height",430);

// if(now===0){

// startMove(aSmallImg,"left",0);

// }else if(now===aSmall.length-1){

// startMove(aSmallImg,"left",-(now-2)*aSmall[0].offsetWidth);

// }else{

// startMove(aSmallImg,"left",-(now-1)*aSmall[0].offsetWidth);

// }

if(now===0){//根据不同的规则设置不同的if

startMove(aSmallImg,"left",0);

}else if(now===aSmall.length-1){

startMove(aSmallImg,"left",-(now-4)*aSmall[0].offsetWidth);

}

}

oBtnPrev.οnclick=function(){

now--;

if(now===-1){

now=aImg.length-1;

}

tab();

}

oBtnNext.οnclick=function(){

now++;

if(now===aImg.length){

now=0;

}

tab();

}

var timer=setInterval(oBtnNext.onclick,2000);

op.οnmοuseοver=function(){

clearInterval(timer);

}

op.οnmοuseοut=function(){

timer=setInterval(oBtnNext.onclick,2000);

}

}

<

>

• 1
• 2
• 3
• 4
• 5
• 6

• 
• 
• 
• 
• 
• 

move.jsfunction getStyle(obj,name){

if(obj.currentStyle){

return obj.currentStyle[name];

}

else{

return getComputedStyle(obj,false)[name];

}

}

function startMove(obj, attr, iTarget) {

clearInterval(obj.timer);

obj.timer = setInterval(function() {

var cur=0;

if(attr==="opacity"){

cur=Math.round(parseFloat(getStyle(obj,attr))*100);//有可能会出现误差0.07*100

}

else{

cur=parseInt(getStyle(obj,attr));

}

var speed = (iTarget - cur) / 6;

speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

if (cur === iTarget) {

clearInterval(obj.timer);

} else {

if(attr==="opacity"){

obj.style.filter="alpha(opacity:"+cur+speed+")";

obj.style.opacity=(cur+speed)/100;

}else{

obj.style[attr]=cur+speed+"px";

}

}

}, 30)

}

相关推荐：