js轮播图(点击,自动,悬停，悬停加轮播)

最新推荐文章于 2024-06-21 16:41:46 发布

车如流水马如龙

最新推荐文章于 2024-06-21 16:41:46 发布

阅读量1.3k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/baidu_41850098/article/details/109689715

版权

1.JavaScript中的轮播图

一：点击方式：

步骤：

1）获取所有img对象；
2）遍历这些对象的同时设置自定义属性index，以及给每个对象添加点击事件；
3）在点击事件方法中，通过当前对象求出index，把index当作imgs[ ] 的下标，求出src；
4）设置背景；

<body>
		<ul class="baidu">
			<li><img src="10.jpg" alt="" /></li>
			<li><img src="11.jpg" alt="" /></li>
			<li><img src="12.jpg" alt="" /></li>
			<li><img src="13.jpg" alt="" /></li>
		</ul>
		
		<script type="text/javascript">
		    //获取所有img对象
			var lis = document.getElementsByTagName("img");
			//遍历对象们，分别设置点击事件
			for(var i=0;i<lis.length;i++){
				lis[i].onclick=function(){
					console.log(this.src);
					//console.log(i)
					//单机哪张图片就换哪张做背景
					document.body.style.background="url("+this.src+")"
				}
			}
		</script>
</body>

二：自动轮播方式：
步骤：
1）获取所有img对象；
2）设置自增变量index=0；
3）遍历这些img对象，分别设置自定义属性；
4）设置定时器，每隔1秒回调一次方法，同时令index自增；如果index=图片的数量，则令index为0，否则根据index设置背景（imgs[index].src）;

//设置自动轮播
<script>
			/*
			 * 一：通过"."的方式设置自定义属性
			 */
			//获取所有图片对象，并设置自定义属性index
			var imgs = document.querySelectorAll("img");
			var index = 0;
			for(var i=0;i<imgs.length;i++){
			  imgs[i].index = i;
			}
			//定义定时器
			var timer = setInterval(function(){
				if(index==imgs.length)
				index =  0;
				//轮播到哪张图是根据自增变量index来确定
				document.body.style.background = "url("+imgs[index].src+")"
				index++;
			},1000);
</script>

三：悬停方式：
步骤：
1）获取所有图片的对象；
2）遍历循环img对象，设置自定义属性index，以及添加悬停事件；
3）在每个img对象的悬停事件中，根据当前对象求出src，并设置为背景；

<body>
		<!--1.要求，鼠标移动到哪张图片，该图片就设为背景-->
		<ul class="baidu">
			<li><img src="10.jpg" alt="" /></li>
			<li><img src="11.jpg" alt="" /></li>
			<li><img src="12.jpg" alt="" /></li>
			<li><img src="13.jpg" alt="" /></li>
		</ul>
		
		<script type="text/javascript">
			//获取所有图片对象，并添加自定义属性index
			var imgs = document.querySelectorAll("img");//返回一个数组
			//给每个img对象添加index
			for(var i=0;i<imgs.length;i++){
				//1：通过”.”方式设置自定义属性
				//imgs[i].index = i; 
				//2: 通过setAttribute方法获取
				imgs[i].setAttribute("index",i);
				//给img设置悬停事件
				imgs[i].onmouseover = function(){
					//将该图片设置为背景
					//document.body.style.background="url("+this.src+")"; 通过“.”获取
					//通过getAttribute()获取
				    document.body.style.background="url("+imgs[this.getAttribute("index")].src+")";
	
				}
			}
		</script>
	</body>

四：悬停加轮播方式：

<body>
		<ul class="baidu">
			<li><img src="10.jpg" alt="" /></li>
			<li><img src="11.jpg" alt="" /></li>
			<li><img src="12.jpg" alt="" /></li>
			<li><img src="13.jpg" alt="" /></li>
		</ul>

		<script>
			//设置鼠标悬停换肤
			var index = 0;
			var j = 0;
			
			var imgs = document.getElementsByTagName("img"); //返回一个数组
			for(var i = 0; i < imgs.length; i++) {
				//给每个img添加index属性 
				// . 设置自定义属性
				imgs[i].index = i;
			   //set方法设置
			   imgs[i].setAttribute("index",i);
			   //给每个img添加鼠标悬停事件
				imgs[i].onmouseover = function() {
					clearInterval(timer); //
					document.body.style.background = "url(" + imgs[this.getAttribute("index")].src + ")"
					j = this.index;
				}
				imgs[i].onmouseout = function() {
					index = j + 1;
					timer = setInterval(function() {
						if(index == imgs.length) {
							index = 0;
						} else {
							document.body.style.backgroundImage = 'url(' + imgs[index].src + ')';
							index++;
						}
					}, 1000);
				}
			}

			//设置自动轮播
			var timer = setInterval(function() {
				if(index == imgs.length) {
					index = 0;
				} else {
					document.body.style.backgroundImage = 'url(' + imgs[index].src + ')';
					index++;
				}
			}, 1000);
		</script>
	</body>

车如流水马如龙

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js轮播图(点击,自动,悬停，悬停加轮播)

1.JavaScript中的轮播图一：点击方式：步骤：1）获取所有img对象；2）遍历这些对象的同时设置自定义属性index，以及给每个对象添加点击事件；3）在点击事件方法中，通过当前对象求出index，把index当作imgs[ ] 的下标，求出src；4）设置背景；<body> <ul class="baidu"> <li><img src="10.jpg" alt="" /></li> <li>&
复制链接

扫一扫