js 轮播图Demo

最新推荐文章于 2024-01-12 20:48:27 发布

小斑马在沙巴找BUG

最新推荐文章于 2024-01-12 20:48:27 发布

阅读量484

点赞数

本文链接：https://blog.csdn.net/qq_14954259/article/details/69663135

版权

<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
   *{ padding:0; margin:0; list-style:none; border:0;}
        .all{
            width:500px;
            height:200px;
            padding:7px;
            border:1px solid #ccc;
            margin:100px auto;
            /*position:relative;*/
        }
        .screen{
            width:500px;
            height:200px;
            overflow:hidden;
            position:relative;
        }
        .screen li{ width:500px; height:200px; overflow:hidden; float:left;}
        .screen ul{ position:absolute; left:0; top:0px; width:3000px;}
        .all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;}
        .all ol li{ float:left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;}
        .all ol li.current{ background:yellow;}

        #arr {display: none;}
        #arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑体'; font-size:30px; color:#fff; opacity:0.3; border:1px solid #fff;}
        #arr #right{right:5px; left:auto;}
    </style>
</style>
	<meta charset="UTF-8">
	<title>cycle roll</title>
</head>
<div class="all" id='all'>
    <div class="screen" id="screen">
        <ul id="ul">
            <li><img src="images/1.jpg" width="500" height="200" /></li>
            <li><img src="images/2.jpg" width="500" height="200" /></li>
            <li><img src="images/3.jpg" width="500" height="200" /></li>
            <li><img src="images/4.jpg" width="500" height="200" /></li>
            <li><img src="images/5.jpg" width="500" height="200" /></li>
        </ul>
        <ol>

        </ol>
        <div id="arr">
            <span id="left"><</span>
            <span id="right">></span>
        </div>
    </div>
</div>
<script type="text/javascript">
	    //需求：无缝轮播图
    //步骤：
    //1.老三步。获取相关元素。
    //2.补齐相互盒子
        //1.复制第一张图片所在的li，填入所在的ul中。
        //2.生成相关的ol中的li。
        //3.点亮第一个ol中的li。
    //3.鼠标放到小方块儿上，轮播图片。
    //4.添加定时器。
    //5.左右切换的按钮。
    var wrap=document.getElementById('all');
    var screen=document.getElementById('screen');
    var ol=screen.children[1];
    var ul=document.getElementById('ul');
    var imgWidth=ul.children[0].offsetWidth;
    var arrBtn=document.getElementById('arr');
    // 2补齐相互盒子
    // 拷贝li
    var newLi=ul.children[0].cloneNode(true);
    ul.appendChild(newLi);
    // 添加下方控制按钮
    for(var i=0;i<ul.children.length-1;i++)
    {
    	var item=document.createElement('li');
    	item.innerHTML=i+1;
        ol.appendChild(item);
    }
    ol.children[0].className='current';
    //3.鼠标放到小方块儿上，轮播图片。

    for(var j=0;j<ul.children.length-1;j++)
    {
    	ol.children[j].index=j;
    	ol.children[j].οnmοuseοver=function(){
    		// 排他思想
    		for(var k=0;k<ul.children.length-1;k++)
    		{
    			ol.children[k].className='';
    		}
    		this.className='current';
    		// 鼠标放到图片上时。index与square和key同步
    		square=key=this.index;
    		animate(ul,-this.index*imgWidth);
    	}
    }
    //4.添加定时器。
    var timer=null;
    var key=0;
    var square=0;
    timer=setInterval(autoPlay,1000);

    // 自动播放函数
	function autoPlay(){
    // 设置两个定时器，一个控制小方块，一个控制图片
    key++;
    // 当滚动到最后一张时，滑动到第一张，滚动到第二张
    if(key>ul.children.length-1)
    {
    	key=1;
    	// 立即滑动到第一张
        ul.style.left=0;
    }
    animate(ul,-key*imgWidth);
    square++;
    if(square>ol.children.length-1)
    	{square=0;}
    for(var i=0;i<ol.children.length;i++)
    {
    	ol.children[i].className='';
    }
    ol.children[square].className='current';
	}
	// 鼠标移入，停止轮播，移出，继续轮播
	wrap.οnmοuseοver=function(){
		clearInterval(timer);
		arrBtn.style.display='block';
	}
	wrap.οnmοuseοut=function(){
		timer=setInterval(autoPlay,1000);
		arrBtn.style.display='none';
	}
    //5.左右切换的按钮。
    arrBtn.children[0].οnclick=function(){
        // 设置两个定时器，一个控制小方块，一个控制图片
    key--;
    // 当滚动到第一张时，立即设置当前为最后一张，然后滑动倒数到第二张
    if(key<0)
    {
    	key=ul.children.length-2;
    	// 立即滑动到倒数第二张
        ul.style.left=-(ul.children.length-1)*imgWidth+'px';
    }
    animate(ul,-key*imgWidth);
    square--;
    if(square<0)
    	{square=ol.children.length-1;}
    for(var i=0;i<ol.children.length;i++)
    {
    	ol.children[i].className='';
    }
    ol.children[square].className='current';
    }
     arrBtn.children[1].οnclick=function(){
    	autoPlay();
    }

	function animate(obj,target){
		// 清除定时器
		clearInterval(obj.timer);
		// 目标值大于当前位置，则向右滚动，否则，向左
		var speed=obj.offsetLeft < target ? 15 : -15;
		obj.timer=setInterval(function(){
			obj.style.left=obj.offsetLeft+speed+'px';
			// 判断是否还足够一步长
			if(Math.abs(target - obj.offsetLeft)<Math.abs(speed)){
				// 若不够一步长，则停止运动，并且后退一步
				obj.style.left=target+'px';
				clearInterval(obj.timer);				
			}
					},10);
	}
</script>
</html>

小斑马在沙巴找BUG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 轮播图Demo

*{ padding:0; margin:0; list-style:none; border:0;} .all{ width:500px; height:200px; padding:7px; border:1px solid #ccc; margin:100p
复制链接

扫一扫