轮播图

最新推荐文章于 2024-06-17 15:29:34 发布

九九仈十一

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量526

点赞数 3

本文链接：https://blog.csdn.net/s550976994/article/details/78592390

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<style type="text/css">
	*{
		margin: 0;
		padding:0;
	}
	body{
		background-color:rgb(0,0,0);
	}
	#igs{
		 margin: 10px auto;
		 width: 700px;
		 height: 350px;
		 position: relative;
	}

    img{width: 700px;}
    .ig{
    	position: absolute;
    }

    #tabs{
    	position: absolute;
    	list-style: none;
    	background-color: rgba(255,255,255,.5);
    	left: 300px;
    	bottom: 10px;
    	border-radius: 10px;
    	padding: 5px 0 5px 5px;
    }

    .tab{
    	float: left;
    	text-align: center;
    	line-height: 20px;
    	width: 20px;
    	height: 20px;
    	cursor: pointer;
    	overflow: hidden;
    	margin-right: 4px;
    	border-radius: 100%;
    	background-color: rgb(200,100,150);
    }
	
	.btn{
		position: absolute;
		color:#fff;
		top: 118px;
		width: 40px;
		height:100px;
		background-color: rgba(255,255,255,.3);
		font-size: 40px;
		font-weight: bold;
		text-align: center;
		line-height: 100px;
		border-radius: 5px;
		margin: 0 5px;
	}

	.btn2{
		position:absolute;
		right: 0px;
	}

	.btn:hover{
		background-color: rgba(0,0,0,0.7);
		cursor: pointer;
	}
	.bg{
		background-color: red;
	}
	</style>
</head>
<body>
    <div id="igs">  
			<a href="#"  class="ig"><img src="images\1.jpg" alt="img1"></a>
			<a href="#"  class="ig"><img src="images\2.jpg" alt="img2"></a>
			<a href="#"  class="ig"><img src="images\3.jpg" alt="img3"></a>
			<a href="#"  class="ig"><img src="images\4.jpg" alt="img4"></a>
			<a href="#"  class="ig"><img src="images\5.jpg" alt="img5"></a>
      <div class="btn btn1"><</div>
      <div class="btn btn2">></div>

     <ul id="tabs">
        <li class="tab">1</li>
        <li class="tab">2</li>
        <li class="tab">3</li>
        <li class="tab">4</li>
        <li class="tab">5</li>
     </ul>
   </div>
</body>
</html>
<script type="text/javascript">
//初始化轮播图
var index= 0; //默认第一张的索引
var imgs=document.getElementsByClassName('ig');//轮播图片
var tabs=document.getElementsByClassName('tab');//按钮
var btns=document.getElementsByClassName('btn');
//将其他轮播图都隐藏，只显示第一张
for(var i= 0;i<imgs.length;i++){
	// imgs[i].style.display='none';
	if(index!==i){
	imgs[i].style.display="none";
     }
}
//将第一个按钮背景变成红色
// tabs[index].className='tab bg';//同时设定多个样式
tabs[index].classList.add('bg');//追加样式
// 自动轮播
function carouseal(){
	//将定时器id返回
  return setInterval(function(){
   //隐藏图片
   imgs[index].style.display='none';
   tabs[index].classList.remove('bg');
   index++;
   //判断是否循环到最后一种
   if(index==imgs.length){
      index=0;//重新从第一张开始
   }
   //显示图片
   imgs[index].style.display='block';
   tabs[index].classList.add('bg');
},500);
}
//调用自动轮播
var timer=carouseal()
//按钮点击上一张
btns[0].οnclick=function(){
	//先关闭自动轮播
	clearInterval(timer);
	imgs[index].style.display="none"
	tabs[index].classList.remove('bg');
	//如果显示为第一张图片
	if(index ==0){
		index=imgs.length;//重新设置为最后一张
	}
		index--;
	imgs[index].style.display="block";
	tabs[index].classList.add('bg');
}

btns[1].onclick =function(){
   //关闭定时器
    clearInterval(timer);
    //隐藏图片
    imgs[index].style.display="none"
	tabs[index].classList.remove('bg');
		index++;
	//如何显示为最后一张图片
	if(index ==5){
		index=0;//重新设置为最后一张
	}	
	imgs[index].style.display="block";
	tabs[index].classList.add('bg');
    
}
//点击按钮选择轮播图
for(var i=0;i<tabs.length;i++){
	tabs[i].x=i;//将i的值赋值给tabs[i]的x属性
	tabs[i].οnclick=function(){
		//清除定时器
	clearInterval(timer);
	imgs[index].style.display="none";
	tabs[index].classList.remove('bg');
	//显示图片
	imgs[this.x].style.display="block";
	tabs[this.x].classList.add('bg');
	index=this.x	
	}
}
//隐藏显示图片的函数
/*function showImg(i){  //i:需要显示的图片的索引
	//隐藏图片
	imgs[index].style.display="none"
	tabs[index].classList.remove('bg');
	//显示图片
	imgs[i].style.display="none"
	tabs[i].classList.remove('bg');	
}
*/

//鼠标移动到图片上时,停止自动轮播
document.getElementById('igs').οnmοuseοver=function(){
	clearInterval(timer);//停止自动轮播
}
//鼠标移出到图片上时,重新开始自动轮播
document.getElementById('igs').οnmοuseleave=function(){
	// clearInterval(timer);//停止自动轮播
	timer=carouseal();
}

</script>

轮播图思路:隐藏显示效果轮播图

  1.布局:通过定位将需要轮播的图片定位带同一位置 

  2.js实现： 

  1.轮播图初始化：1设定一个当前显示的图片索引 

  2 隐藏除第一张的所有图片 

  3 将第一张图片的按钮设置背景 

  2.自动轮播：通过定时器先隐藏当前图片，再显示下一张图片 

  问题：当显示到最后一张图片时，当前索引为3时，即已经显示最后一张，如何实现下一张？ 

  先隐藏，然后再显示之前做判断 

  3.上一张：1.给上一张按钮绑定事件 

  2 先隐藏当前图片 

  3.显示当前图片的上一张，即：index-1 

  问题: 当显示到第一页时，当前索引为1,即已经显示到第一张,如何实现上一张显示最后一张？ 

  解决：先隐藏，然后判断之后再显示 

  上一张时会与自动轮播冲突：先清除自动轮播（定时器） 

  4.下一张：同自动轮播（先清除定时器） 

  5.点击按钮显示对应的图片:1循环给每个按钮绑定事件 

  2.将按钮当前的索引作为需要显示的索引 

  3先隐藏 

  4再显示 

  6.鼠标移动到图片上时：停止轮播 

  7.鼠标移开时，自动轮播：1事情：mouseleave 

  2重新启动定时器:将自动播放开启 

九九仈十一

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
轮播图

轮播图 *{ margin: 0; padding:0; } body{ background-color:rgb(0,0,0); } #igs{ margin: 10px auto; width: 700px; height: 350px; position: relative; } img{width: 700px;} .i
复制链接

扫一扫