js首页轮番图（自己实现，有平滑播放效果）

最新推荐文章于 2020-10-14 11:47:07 发布

置顶秦玉成

最新推荐文章于 2020-10-14 11:47:07 发布

阅读量1.4k

点赞数 3

分类专栏：前端轮番案例文章标签： js 轮番图 js首页轮番图轮番图平滑播放轮番图案例 js原生轮番效果

本文链接：https://blog.csdn.net/qq_30093279/article/details/92788344

版权

前端轮番案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js实现首页轮番图(平滑播放)

先了解实现原理:

用到一个无序的列表，列表样式使用float：left，在无序列表上套用一个div 这个div能够设置宽度，宽度一定能够容下几张图片横排放下。图片能够实现相连主要是：开始播放图片的时候，现在原来的无序列表中插入到末尾一个li元素，这个li元素中包含的应该是第一张图片，当图片播放到最后一张的时候，将图片拉回第一张，给人形成一种错觉效果。接下来就是简单html 以及css展示以及内嵌的js。
当然你可以去下载打压的压缩包去参考。首页平滑轮番图模板
密码为：rky6
接下里上一个演示的代码；
(html)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="MUserMsg.css" type="text/css" />
<title>再一次尝试</title>
<script>
    /*
    需要改进 改进的地方就是最后一张图的逻辑问题  以及快进这个图片并没有播放完全的时候
    */
   var x=0,y=0;
   var width,image,lis,time,timeOut,speed;
//初始化基本信息
function Init(){
   image=document.getElementsByName("image");
   width=document.getElementById("autoPlay").clientWidth;
   lis=document.getElementById("index").getElementsByTagName("li");
}
//自动播放
function autoPlay(){
  speed=10;
  intervalMoveRight(speed);
}

//上颜色
function changIndex(){
   for(var i=0;i<lis.length;i++){
       if(y==i){
           lis[i].style.backgroundColor="blue";
       }else{
           lis[i].style.backgroundColor="white";
       }
   }
   if(y==image.length-1){
       lis[0].style.backgroundColor="blue";
   }
}

//左右翻页
function move(eve){   
   speed=50;
   //清空所有的timeout以及time
   clearTimeout(timeOut);
    clearInterval(time);
    //点击向右移动的按钮的时候
    if(eve.innerHTML=="&gt;"){
        //向右边翻页
       intervalMoveRight(speed);
    }else{
        //向左边翻页
        if(y>0){
           moveLeft(speed);
        }else if(y==0){
           moveRight(image.length-2,50);
       }
    }
}

//有时间间隔样式的向右移动
function intervalMoveRight(speed){
   time=setInterval(function(){
       if(y<(image.length-1)){
           if(x>(-width*(y+1))){
               x=x-speed;
               image[y].style.left=x+"px"; 
               image[y+1].style.left=x+"px";         
           }else{
               clearInterval(time);
               y++;
               changIndex();
               x=parseInt(image[y].style.left);
               //判断 图片如果到最后一张 直接拉回去不用等时间去调用
               if(y<image.length-1){
                timeOut=setTimeout(autoPlay,3000);
               }else{
                   autoPlay();
               }            
           }
       }else{
           clearTimeout(timeOut);
           clearInterval(time);
           for(var i=0;i<image.length;i++){
               image[i].style.left="0px";
           }
           x=y=0;
          timeOut=setTimeout(autoPlay,3000);
       }
   },4);
}


//根据索引跳转
function moveIndex(eve){
   var  index=parseInt(eve.innerHTML)-1;
   judge(index);
}

//判断索引与当前页面的位置关系
function judge(index){
   speed=50;
   if(index>y){
       //向右边移动
       moveRight(index,speed);
   }else if(index<y){
       //向左移动
       moveLeftIndex(index,speed);
   }
   //点击页面和当前页面相等的时候 不做任何的变化
}


//右移动
function moveRight(total,speed){
   clearInterval(time);
   clearTimeout(timeOut);
   time=setInterval(function(){
       if(y<total){
       if(x>(-width)*(y+1)){
       x-=speed;
       image[y].style.left=x+"px";
        image[y+1].style.left=x+"px";
        }else{
        y++;
       changIndex();
       x=parseInt(image[y].style.left);
       }}else{
       //跳出来 说明成功了
       clearInterval(time);
       timeOut=setTimeout(autoPlay,3000);
       }
       },1);
}

//向左面移动
function moveLeft(speed){
   clearInterval(time);
   clearTimeout(timeOut);
   //记录当前页面的位置
   var currentLeft=parseInt(image[y].style.left);
   time=setInterval(function(){       
       //当前图片的left值
       if(x<currentLeft+width){
       x=x+speed;
       image[y].style.left=x+"px";
       image[y-1].style.left=x+"px";
       }else{  
       clearInterval(time);    
       x=0;
       y--;
       x=parseInt(image[y].style.left);
       changIndex();
       timeOut=setTimeout(autoPlay,3000);
       }
   },1);
}

//通过索引向左移动
function  moveLeftIndex(index,speed){
   clearInterval(time);
   clearTimeout(timeOut);
   var currentLeft=parseInt(image[y].style.left);
   //需要移动的页数
   var movePage=y-index;
   var i=1;
   time=setInterval(function(){
       if(i<=movePage){
       if(x<currentLeft+width*i){
           x=x+speed;
           image[y].style.left=x+"px";
           image[y-1].style.left=x+"px";
       }else{
           i++;
           y--;
           x=parseInt(image[y].style.left);
           changIndex();
           if(i>movePage){
           clearInterval(time);
           timeOut=setTimeout(autoPlay,3000);
           }
       }}
   },1);
}


//先在末尾加上一个li元素 与 第一个img对象一样
function addNewNode(){
   var image=document.getElementsByName("image");
   var newNode=document.createElement("li");
   var newImage=document.createElement("img");
   newImage.setAttribute("name","image");
   newImage.src=image[0].src;
   newNode.appendChild(newImage);
   var ul=document.getElementById("ol");
   ul.appendChild(newNode);
}

//鼠标停留在图片上的时候 停止播放轮番图
function stopAutoPlay(){
    clearInterval(time);
    clearTimeout(timeOut);
   //先检索图片位置
   time=setInterval(function(){
    if(x>(-width)*(y+1) && x!=parseInt(image[y].style.left)&&x!=0){
        x=x-speed;
        image[y].style.left=x+"px"; 
        image[y+1].style.left=x+"px";   
    }else if(x==parseInt(image[y].style.left)||x==0){
        clearInterval(time);
        clearTimeout(timeOut);
    }
    else{
        clearInterval(time);
        y++;
        changIndex();
        x=parseInt(image[y].style.left);
    }
   },10);
}

window.onload=function bannerBegin(){
   addNewNode();
   Init();
   timeOut=setTimeout(autoPlay,3000);
}


function reBegin(){
   timeOut=setTimeout(autoPlay,3000);
}
</script>

</head>
<body  onload="begin()">
    <div id="autoPlay">
        <div id="list">
            <ul id="ol">
                <li><img  name="image"  src="banner_00.jpg" /></li>
                <li><img name="image" src="study.jpg"/></li>
                <li><img name="image" src="news.jpg" /></li>
            </ul>
        </div>
        <ul id="index">
                <li onclick="moveIndex(this)" style="background-color: blue">1</li>
                <li onclick="moveIndex(this)">2</li>
                <li onclick="moveIndex(this)">3</li>
        </ul>
        <div id="move">
        <p id="left" onclick="move(this)"><</p>
        <p id="right" onclick="move(this)">></p>
    </div>
    </div>
</body>
</html>

以下是css的代码

body{
    margin:0;
    padding:0;
    background-color:red;
}

#autoPlay{
    width:1000px;
    height:400px;
    margin:0 auto;
    overflow: hidden;
    border:10px solid blue;
}


#list{
    width:400%;
    height:400px;
    margin:0;
    padding:0;
}


#list ul{
    margin:0;
    padding:0;
    list-style-type: none;
    z-index: 10;
}

#list ul li{
    float:left;;
}

img{
    position: relative;
    width:1000px;
    height: 400px;
}

#index{
    position: absolute;
    margin-top:-30px;
    margin-left:800px;
}

#index li{
    list-style-type: none;
    float: left;
    margin-left:10px;
    z-index: 1;
    width:20px;
    height:20px;
    background-color:red;
    text-align: center;
}


#move{
    font-size:50px;
    font-weight: bolder;
    color:blue;
    opacity: 0.5;
}


#left{
    position: absolute;
    float: left;
    margin-left: 30px;
    margin-top:-250px;
    z-index:1;
}


#right{
    position: absolute;
    float: right;
    margin-left:940px;
    margin-top:-250px;
    z-index:1;
}