用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

无缝轮播图

2020-10-14 作者:深空举报

[javascript]代码库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>位置变化的轮播效果</title>
    <!-- <link rel="stylesheet" href="css/lunbo2.css"> -->
	<style>
		*{
		                margin: 0;
		                padding: 0;
		            }
		ul,ol{
		        list-style: none;
		            }
		            /*消除图片底部3像素距离*/
		img{
		        vertical-align: top;
		}
		a{
		    text-decoration: none;
		}
		
		
		.lunbo2{
		    width:600px;
		    height:400px;
		    margin:100px auto;
		    position:relative;
		    overflow:hidden;
		    border:1px solid red;
		}
		.lunbo2>ul{
		    width:700%;
		    height:100%;
		    position: absolute;
		    left:-600px;
		    border:1px solid blue;
		}
		.lunbo2>ul>li{
		    float:left;
		}
		.lunbo2>ul>li>a>img{
		    width:600px;
		    height:400px;
		}
		.lunbo2>.prev{
		    display: block;
		    /*background:red;*/
		    font-size:80px;
		    color:#000;
		    position: absolute;
		    top:150px;
		    left:20px;
		    z-index:1;
		    opacity:0.3;
		}
		.lunbo2>.next{
		    display: block;
		    /*background:red;*/
		    font-size:80px;
		    color:#000;
		    position: absolute;
		    top:150px;
		    right:20px;
		    z-index:1;
		    opacity:0.3;
		}
		.lunbo2>.prev:hover,.lunbo2>.next:hover{
		    opacity:0.7;
		}
		.lunbo2>ol{
		    position: absolute;
		    right: 10px;
		    bottom: 10px;
		}
		.lunbo2>ol>li{
		    float:left;
		    width:28px;
		    height:28px;
		    text-align: center;
		    line-height: 27px;
		    border-radius:50px;
		    background:#c8c8c8;
		}
		.lunbo2>ol>li.on{
		    background:red;
		}
	</style>
</head>
<body>
 <div id="lunbo2" class="lunbo2">
     <ul id="ul">
         <li><a href="#"><img src="images/0001.png" alt=""></a></li>
         <li><a href="#"><img src="images/0002.png" alt=""></a></li>
         <li><a href="#"><img src="images/0003.png" alt=""></a></li>
         <li><a href="#"><img src="images/0004.png" alt=""></a></li>
         <li><a href="#"><img src="images/0005.png" alt=""></a></li>
     </ul>
     <a class="prev" id="prev" href="#">&lt;</a>
     <a class="next" id="next" href="#">&gt;</a>
     <!-- <ol id="ol">
         <li class="on">1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
     </ol> -->
 </div>
<script>
var lunbo2=document.getElementById("lunbo2");// 获得大盒子
var ul=document.getElementById("ul");// 获得ul
var ulList=ul.children; //获取ul的子元素集合

var liWidth=ul.children[0].offsetWidth;// 获得每个li的宽度
//
var oldFirstChild=ul.children[0];
var firstChild=ul.children[0].cloneNode(true);//复制第一张图片
var lastChild=ul.children[ul.children.length-1].cloneNode(true); //复制最后一张图片      
ul.insertBefore(lastChild,oldFirstChild);//把最后一张图片副本插入到第一
ul.appendChild(firstChild);//把第一张图片的副本放到最后

// 2.创建ol 和li
var ol=document.createElement("ol");//创建ol元素
lunbo2.appendChild(ol);// 把ol放到scroll盒子里面去
for(var i=0;i<ulList.length-2;i++){
    var li=document.createElement("li");// 创建li元素
    li.innerHTML=i+1;// 给li里面添加文字  1 2 3 4 5
    ol.appendChild(li);// 将li元素添加到ol里面
}
var olList=ol.getElementsByTagName("li");//获取ol元素的子元素集合
ol.children[0].className="on";// ol中的第一个li背景色为red
var key=1;// 控制播放的张数
var timer=null;// 轮播图的定时器
var prev=document.getElementById("prev");//获取左按钮
var next=document.getElementById("next");//获取右按钮

// 设置动画函数 第一个参数,代表谁动  第二个参数 是目标位置
 // 让图片做匀速运动,匀速动画的原理是 当前的位置 + 速度  即 offsetLeft + speed
function switchImg(obj,traget){
    clearInterval(obj.timer);
    var speed=obj.offsetLeft>traget ? -15 : 15;
    obj.timer=setInterval(function(){
        // 如果目标值和当前值的差不够一个步长(速度),就直接定位在目标位置,并关闭定时器
        var result=traget-obj.offsetLeft;
        obj.style.left=obj.offsetLeft+speed+"px";
        if(Math.abs(result)<Math.abs(speed)){
            clearInterval(obj.timer);
            obj.style.left=traget+"px";
        }
    },10);
    // 对应小圆点显示
    // 小圆点颜色发生变化
    for(var i=0;i<olList.length;i++){
        olList[i].className="";
    }
    olList[key-1].className="on";// 给当前的小圆点 添加一个类名
}
/*自动轮播时,要对播放的张数key进行一个判断,如果播放的张数超过ulLis.length-1,
就要重头开始播放.  因为我们克隆了第一张并将其放在最后面,所以我们要从第二张图片开始播放*/
function autoplay(){
    key++;
    if(key>=ulList.length-1){
        ul.style.left=0;
        key=1;
    }
    switchImg(ul,-key*liWidth);
}
timer=setInterval(autoplay,1000);// 自动轮播
//点击左按钮显示下一张
function prevImg(){
    key++;
    if(key>=ulList.length-1){
        ul.style.left=0;
        key=1;
    }
    switchImg(ul,-key*liWidth);
}
//点击右按钮显示上一张
function nextImg(){
    --key;
    if(key<=0){
        ul.style.left=-(ulList.length-1)*liWidth+"px";
        key=ulList.length-2;
    }
    switchImg(ul,-key*liWidth);
}
prev.onclick=prevImg;
next.onclick=nextImg;
lunbo2.onmouseover=function(){
    clearInterval(timer);
}
lunbo2.onmouseout=function(){
    timer=setInterval(autoplay,1000);
}
//鼠标进入小圆点时,显示相应的图片。
for(var i=0;i<olList.length;i++){
    olList[i].index=i+1;
    olList[i].onmouseover=function(){
        key=this.index;
        ul.style.left=-key*liWidth+"px";
        for(var i=0;i<olList.length;i++){
            olList[i].className="";
        }
        olList[key-1].className="on";
   } 

}


</script>   
</body>
</html>


分享到:
更多

网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。