轮播图--初学者_轮播图是什么内容-CSDN博客

本文链接：https://blog.csdn.net/wqc_qwertyuiop/article/details/86563196

轮播图，适合初学者

才疏学浅，大神勿入
前言：轮播图就是我们在逛一些购物页面时不停轮播广告的那个物件。
本次轮播效果图如下：
在这里插入图片描述

轮播图是什么？

轮播图其实就是将照片水平放置，设置一个只有显示一张照片大小的窗口，然后将照片在背后水平拉扯，从而给我们一种重复播放的感觉。

轮播图的基本功能：

第一，能够左右切换。
第二，自动播放。
第三，按下面的按钮能够跳转到固定页面。
第四，当把鼠标放在图上时，轮播停止。

下面是代码说明：
首先，html部分
主要任务：1.显示所有的图片。2，显示箭头。3，显示页面数字。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轮播图</title>
		<link rel="stylesheet" href="css/lb.css" />   <!-- 导入自己的css-->
	</head>
	<body>
		<div id="main">
		<!--一般图片都是用ul加li的组合写的。很方便-->
			<ul class="imgs">
				<li><img src="img/1.gif"/></li>
				<li><img src="img/2.gif"/></li>
				<li><img src="img/3.gif"/></li>
				<li><img src="img/4.gif"/></li>
				<li><img src="img/5.gif"/></li>
			</ul>
			<!-- 左箭头-->
			<div class="arrow left">&lt;</div>  <!-- class="arrow left"  arrow 和 left都可以代表它  -->	
			<!-- 右箭头-->
			<div class="arrow right">&gt;</div>
			
			<!-- 图片下方的数字-->
			<div class="number">
				<ul>
					<li class="active wqc" >1</li>
					<li class="wqc">2</li>
					<li class="wqc">3</li>
					<li class="wqc">4</li>
					<li class="wqc">5</li>
				</ul>
			</div>
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  <!-- 在网上找的一个jquery，直接用就行-->
		<script type="text/javascript" src="js/lb.js" ></script>     <!-- 导入自己的js-->
	</body>
</html>

效果图：
在这里插入图片描述
css代码部分：
主要任务：1，将li浮动。2，使图片每次只显示一张。3，对箭头，数字进行定位

*{                      /*建议每次都加上/                  /**/
	padding: 0;
	margin: 0;             
}

ul,li{                /*议每次都加上*/
list-style: none;	   
}

 /*设置轮播图的大小*/
#main{
margin: 10% auto;  /*这样可以快速的居中任何一个元素，而align只能居中文字*/
width: 600px;
height: 400px;	
overflow: hidden;  /*可以使大于main的部分隐藏，从而实现了每次只显示一张图片的页面*/
position: relative; /*为后面所有的absolute服务*/
}

 /*有多少张照片就将ul的宽设置为main宽度的多少倍*/
#main ul.imgs{   
width: 3000px;
height: 400px;	
}

/*将li浮动，实现照片水平放置*/
#main ul.imgs li{
	float: left;
}

/**/
#main ul.imgs li img{
width: 600px;
height: 400px;	
}

/*设置箭头样式*/
#main div.arrow{
	position: absolute;
	width: 35px;
	height: 50px;
    font-size: 30px;
    border-radius: 10px;
    background: rgba(0,0,0,0.3);  /*设置箭头透明度*/
    text-align: center;
    line-height:  50px;
    cursor: pointer;   /*将鼠标样式变成手*/
}

 /*鼠标放在arrow区域透明度发生变化*/
#main div.arrow:hover{  
	background: rgba(0,0,0,0.5);
}

#main div.left{
	left: 0;
	top:40%;
}

#main div.right{
	right: 0;
	top:40%;
}

 /*思路同上*/
div#main div.number ul{
	position: absolute;
	left:180px;
	top:80%;
}

div#main div.number ul li{
	width: 30px;
	height: 30px;
	float: left;
    margin-right: 25px;
	border-radius: 50%;     /*正方形，将四个角设置为50%的曲角，刚好为一个圆*/
	line-height: 30px;      /*快速居中法，将行高设置的和高度一样*/
	text-align: center;
	background: antiquewhite;
	cursor: pointer;
}

div#main div.number ul li.active{
	background: red;
}

效果图：
在这里插入图片描述
js部分：它是最核心的部分，重要的功能都是由它实现。
功能：1，实现图片的移动。2，实现跳转到指定页面。3，实现自动换页。4，实现把鼠标放在图上时，轮播停止。

var j=0; 
//点击.right的元素调用该函数
$(".right").click(function(){
	rightMove();  
})

$(".left").click(function(){
	leftMove();
})

//作用：1，花费两秒将ul往左边或右边移动一个li的宽度。2，移除class中的active。3，在索性为j的calss中添加active。
function move(){
	var moveDistance = -600*j;
	$("ul.imgs").animate({"margin-left":moveDistance+"px"},"2s"); 
	$("div.number ul li").removeClass("active");
	$("div.number ul li").eq(j).addClass("active");
}

//实现右移，最后j=0是为了回到第一个页面
function rightMove(){
	j++;
	if(j==5){
		j=0;
	}
	move();
}

function leftMove(){
	j--;
	if(j==-1){
		j=4;
	}
	move();
}

//功能：1，实现自动移动， 每2s调用一次rightMove函数。2，当鼠标放在id=main的区域时，清除time的值。
var time = setInterval(rightMove,2000);   //定时器
$("#main").mouseover(function(){
	clearInterval(time);    //清除 定时器
});

//当鼠标离开id=main的区域时，为time赋值
$("#main").mouseout(function(){
time = setInterval(rightMove,2000); 
});

//获取当前所在页面的索引，然后调用move函数进行移动。
$("li").click(function(){
  	j=$(this).index();
  	move();
  })