js写个简单的图片轮播

最新推荐文章于 2022-08-06 18:02:33 发布

布谷的冷亦蓝

最新推荐文章于 2022-08-06 18:02:33 发布

阅读量191

点赞数 1

分类专栏： js 文章标签：轮播图 js简单轮播图

本文链接：https://blog.csdn.net/qq_41948824/article/details/102654709

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js写图片轮播

最简单版本

最简单版本

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .container {
            position: relative;
            width: 751px;
            height: 455px;
        }
        .container .pic {
            position: absolute;
            left: 0px;
            top: 0px;
        }
        .slider-nav {
            bottom: 10px;
            height: 9px;
            position: absolute;
        }
        .slider-nav ul {
            line-height: 1;
        }
        .slider-nav li {
            background: #3e3e3e none repeat scroll 0 0;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            display: inline-block;
            height: 9px;
            margin: 0 2px;
            overflow: hidden;
            text-align: center;
            width: 9px;
        }
        .slider-nav .slider-selected {
            background: #b61b1f none repeat scroll 0 0;
            color: #fff;
        }
        .slider-nav {
            height: 0;
            left: 110px;
            line-height: 0;
            text-align: center;
            top: 290px;
            width: 530px;
            font-size: 12px;
        }
        .slider-nav li {
            display: inline-block;
            height: 18px;
            line-height: 18px;
            width: 18px;
        }
        .slider-extra {
            position: absolute;
            z-index: 1000;
        }
        .nextPic {
            position: absolute;
            z-index: 1200;
            left: 734px;
            top: 130px;
        }

        .beforePic {
            position: absolute;
            z-index: 1200;
            top: 130px;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="allpic">
        <div class="pic" style="z-index: 1"><img src="img/1.jpg"></div>
        <div class="pic" style="z-index: 2"><img src="img/2.jpg"></div>
        <div class="pic" style="z-index: 3"><img src="img/3.jpg"></div>
        <div class="pic" style="z-index: 4"><img src="img/4.jpg"></div>
        <div class="pic" style="z-index: 5"><img src="img/5.jpg"></div>
    </div>

    <div class="slider-extra">
        <ul class="slider-nav" id="ulid">
            <li class="slider-item">1</li>
            <!-- slider-selected 表示当前选中的颜色-->
            <li class="slider-item">2</li>
            <li class="slider-item">3</li>
            <li class="slider-item">4</li>
            <li class="slider-selected">5</li>
        </ul>
    </div>
</div>
<script type="application/javascript">
	//【1】封装 获取图片父类id、通过父类id得到图片className集合，从而获取包裹图片的框架
	function getFatherId(fId) {
		var childs = document.getElementById(fId).childNodes;
		var jpgFrame  = [];
		for(var i=0;i<childs.length;i++){
			if(childs[i].nodeType == 1){
//得到 <div class="pic" style="z-index: 1"><img src="img/1.jpg"></div>
//未防止一些浏览器算 换行结点，所以把所有框架扣进一个数组
				jpgFrame.push(childs[i]);
			}
		}
		return jpgFrame;
	}
	var pics = getFatherId("allpic");
	var lis = getFatherId("ulid");
	//【2】设置循环到的图片 的权重
	var xId = 0;
	var currIndex = 0;//必须在外面
	function changeZIndex(num) {
		if(num!=null){
			currIndex = num;
		}
		for(var i=0;i<pics.length;i++){
			if(i==currIndex){
				pics[i].style.zIndex = 100;
				lis[i].className = "slider-selected";
			}else{
				pics[i].style.zIndex = 1;
				lis[i].className = "slider-item";
			}
		}
		currIndex++;
		if(currIndex==5){
			currIndex = 0;
		}
	}
	//【3】页面加载时调用 更改图权重方法
	window.onload = function(){
		//setInterval设置定时任务，两秒调用一次 更改图权重法
		xId = window.setInterval(changeZIndex,1500);
		
		for(var i=0;i<lis.length;i++){
			lis[i].onmouseover = function(){
			//this => <li class="slider-item">i</li>
				window.clearInterval(xId);//当前定时循环权重的方法取消
				
				//获取圆点的文本，转成数字做权重循环的i 
				var num = Number(this.innerText)-1;//循环从0开始
				changeZIndex(num);//导入鼠标定位的点对应的图片编号
			}
			lis[i].onmouseout = function(){
				//鼠标离开时调用更改图权重的方法，继续循环，同时把鼠标离开对应的结点ID赋给xId
				xId = window.setInterval(changeZIndex,1500);
			}			
		}
	}
	</script>
</body>
</html>

xId = window.setInterval(changeZIndex,1500);

不能只写window.setInterval(changeZIndex,1500);
如果不把鼠标离开对应图片的结点ID赋给 xId,你把鼠标往其他图片圆点移动
上面**window.clearInterval(xId);**中的xId不知道下一次删除谁，直接跳过。
不信可以试试。

布谷的冷亦蓝

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js写个简单的图片轮播

js写图片轮播最简单版本最简单版本<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> .container { ...
复制链接

扫一扫