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

来源：动视网责编：小采时间：2020-11-27 19:31:45

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

js如何实现轮播图播放效果（附代码）:本篇文章给大家带来的内容是关于js如何实现轮播图播放效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。早前做轮播图的时候，我们习惯在网上找一些现成的例子修改修改使用。现在做轮播图，像bootstrap和iview等前端框架中都有

推荐度：

点击下载本文 文档为doc格式

导读js如何实现轮播图播放效果（附代码）:本篇文章给大家带来的内容是关于js如何实现轮播图播放效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。早前做轮播图的时候，我们习惯在网上找一些现成的例子修改修改使用。现在做轮播图，像bootstrap和iview等前端框架中都有

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

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

实现功能如下：

鼠标划在左半部分出现左箭头切换，鼠标划在右半部分出现右箭头切换。
点击数字播放，当前播放页数字背景透明度为1，非当前页透明度为0.6
点击缩略图播放，当前播放页缩略图透明度为1，非当前页缩略头透明度为0.3
间隔2000ms自动播放（包括图片、数字、缩略图）。

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

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

<!DOCTYPE html>
<html>
 <head>
 <title>轮播图</title>
 <script src="move.js"></script>
 <style>
 *{
 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;
 }
 </style>
 <script>
 function getByClass(oParent,sClass){
 var aEle=oParent.getElementsByTagName("*");
 var aResult=[];
 for(var i=0; i<aEle.length; i++){
 if(aEle[i].className===sClass){
 aResult.push(aEle[i]);
 }
 }
 return aResult;
 }
 window.onload=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.onmouseover=oMarkLeft.onmouseover=function(){
 startMove(oBtnPrev,"opacity",100);
 }
 oBtnPrev.onmouseout=oMarkLeft.onmouseout=function(){
 startMove(oBtnPrev,"opacity",0);
 }
 oBtnNext.onmouseover=oMarkRight.onmouseover=function(){
 startMove(oBtnNext,"opacity",100);
 }
 oBtnNext.onmouseout=oMarkRight.onmouseout=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.length; j++){
 aNumber[j].index=j;
 aNumber[j].onclick=function(){
 if(this.index===now){
 return;
 }
 now=this.index;
 tab();
 }
 aNumber[j].onmouseover=function(){
 startMove(this,"opacity",100);
 }
 aNumber[j].onmouseout=function(){
 if(this.index!=now){
 startMove(this,"opacity",60);
 }
 }
 }
 for(var m=0; m<aSmall.length; m++){
 aSmall[m].index=m;
 aSmall[m].onclick=function(){
 if(this.index===now){
 return;
 }
 now=this.index;
 tab();
 }
 aSmall[m].onmouseover=function(){
 startMove(this,"opacity",100);
 }
 aSmall[m].onmouseout=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<aNumber.length; i++){
 startMove(aNumber[i],"opacity",60);
 }
 for(var i=0; i<aSmall.length; 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.onclick=function(){
 now--;
 if(now===-1){
 now=aImg.length-1;
 }
 tab();
 }
 oBtnNext.onclick=function(){
 now++;
 if(now===aImg.length){
 now=0;
 }
 tab();
 }
 var timer=setInterval(oBtnNext.onclick,2000);
 op.onmouseover=function(){
 clearInterval(timer);
 }
 op.onmouseout=function(){
 timer=setInterval(oBtnNext.onclick,2000);
 }
 }
 </script>
 </head>
 <body>
 <p id="switch">
 <ul class="bigpic">
 <li><img src="1.jpg" alt=""></li>
 <li><img src="2.jpg" alt=""></li>
 <li><img src="3.jpg" alt=""></li>
 <li><img src="4.jpg" alt=""></li>
 <li><img src="5.jpg" alt=""></li>
 <li><img src="6.jpg" alt=""></li>
 </ul>
 <button class="prev"><</button>
 <button class="next">></button>
 <p class="mark_left"></p>
 <p class="mark_right"></p>
 <ul class="number">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 </ul>

 <ul class="smallimg">
 <li><img src="1.jpg" alt=""></li>
 <li><img src="2.jpg" alt=""></li>
 <li><img src="3.jpg" alt=""></li>
 <li><img src="4.jpg" alt=""></li>
 <li><img src="5.jpg" alt=""></li>
 <li><img src="6.jpg" alt=""></li>
 </ul>
 </p>
 </body>
</html>

move.js

function 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)
}

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

推荐度：

点击下载本文 文档为doc格式

标签：图片如何播放

热门焦点

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

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

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

move.js

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

最新推荐

猜你喜欢

热门推荐