html+css+js 实现图片轮播效果

最新推荐文章于 2024-10-01 11:25:02 发布

TryMyBestTo

最新推荐文章于 2024-10-01 11:25:02 发布

阅读量1w

点赞数 61

分类专栏：前端文章标签： html html5 css javascript css3

本文链接：https://blog.csdn.net/TryMyBestToDo_/article/details/111396729

版权

前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

html+css+js 实现图片轮播效果

图片轮播效果：

会自动向左 || 向右切换图片
能手动点击按钮切换图片
多用于商品展览等等

——首先我们创建一个盒子进行展览，然后一个< ul>，< li>来存每张图片。
话不多说，放代码：
HTML

<div id="banner">
			<ul id="ul">
				<li><a href="###"><img src="./images/dianyuan.jpg" /></a></li>
				<li><a href="###"><img src="./images/shouhuan.jpg" /></a></li>
				<li><a href="###"><img src="./images/mi4.jpg" /></a></li>
			</ul>
			<span id="left" onclick="left()">< </span>
			<span id="right" onclick="right()">></span>
			<ol id="ol">
				<!--由js动态生成<li>-->
			</ol>
		</div>

CSS
这里css的设置不算重要，大家根据我的注释看一下

#banner {
	height: 75%;
	width: 100%;
	overflow: hidden;
	position: relative;
}

#banner #ul {
	width: 6600px;		/*ul的宽度我们选择业让那个js动态生成,这样可以减少后期修改带来的麻烦*/
	height: 100%;
	position: absolute;
	left: -0350px;				/*因为我的图片比较大,所以为了能让内容居中,于是移了一些出去*/
	top: 0;
}

#banner li {
	float: left;			/*浮动,使所有图片排成一行*/
	width: 2200px;			/*设置每个li的宽度(根据自己的图片width进行选择)*/
	height: 100%;
}

#banner img {
	width: 100%;
	position: relative;
}
#banner #left , #banner #right{		/*两边的left、right按钮（<  >）*/
	width: 40px;
	height: 40px;
	position: absolute;
	left: 5px;
	top: 50%;
	margin-top: -20px;
	background-color: cadetblue;
	cursor: pointer;
	line-height: 40px;
	text-align: center;
	font-weight: bold;
	font-family: '黑体';
	font-size: 30px;
	color: #000;
	opacity: 0.5;
	border: 1px solid #fff;
}
#banner #right{
	right: 5px;
	left: auto;
}
#banner #left:hover , #banner #right:hover{
	opacity: 1;
	border-color: #000;
	color: #fff;
}
#banner #ol{				/*底部的图片精准选择按钮*/
	position: absolute;
	bottom: 10px;
	left: 50%;
}
#banner #ol li{
	border-radius: 45px;			/*令其呈圆形*/
	width: 15px;
	height: 15px;
	background-color: #CCCCCC;
	cursor: pointer;			/*鼠标呈 手 样式*/
	line-height: 20px;
	text-align: center;
	font-weight: bold;
	font-family: '黑体';
	font-size: 15px;
	color: #000;
	opacity: 0.5;				/*设置透明度*/
	border: 2px solid #333;
	float: left;
	margin: 0 10px;
}
#banner #ol li:hover{
	opacity: 0.8;
}
#banner #ol .now{				/*当前展示图片所对应的数字按钮(这个.now我们由js动态设置)*/
	opacity: 1;					/*不透明*/
	background-color: #333;
}

js部分重头来啦~~~~~~~~~~~~~~~~~~~~

首先我们先进行对象成员的赋值

obj.offsetLeft：获取对象的left属性值（只读）
obj.offsetWidth：获取对象的width属性值（只读）

var ul = document.getElementById("ul");
var ol = document.getElementById("ol");
var li = ul.getElementsByTagName("li");
var li_width = li[0].offsetWidth;				//获得li的宽度
var left_start = ul.offsetLeft;			//获取当前第一张图片的left
ul.style.width=(li_width*li.length)+"px";

然后是对< ol> < li>的初始化创建

var one=setInterval(“right()”,3000)
- setInterval() ：方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
- 返回一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
- 我们让它每过3秒就调用一次right()向右滑动
我们在click的点击中先清除掉setInterval，再创建setInterval，这样可以让用户在选择是有足够的时间观看

var one=setInterval("right()",3000);			//setInterval() ：方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

for(var i=0 ; i<li.length ; i++){				//动态生成底部按钮数字按钮
	var ol_li=document.createElement("li");		//创建<li>标签
	ol.appendChild(ol_li);						//加入将ol_li加入到<ol>标签中
	ol_li.id=i+1;						//设置id，主要是方便后面的数字计算
	ol_li.onclick=function(){
		clearInterval(one);
		pic=this.id;
		ul.style.left = (left_start - (pic-1) * li_width) + "px";	//点击那个li就会跳转到那张图片
		change();			//见下文
		one=setInterval(right,3000);	//前面取消了周期时间one，现在又把它开启，后面也会有这种操作，主要是为了使用方便
	}
}

这里我们设置了一下逻辑功能，以及change()方法

pic：这里用来关联当前所展示的图片
obj.className：设置标签的class名称，设置完毕后会被css所更改相应样式

var pic=1;
var last=document.getElementById(pic);	//定义last变量指向一个li标签
last.className="now";  //在css中我已经将class为now的样式设置为特殊设置，是为了突出

function change(){				//“改变”方法：动态设置当前显示的图片所对应按钮的格式
	last.className=" ";			//清除上一个的格式
	document.getElementById(pic).className="now";	//为当前li添加className（需要css配合使用.now{设置格式}）
	last=document.getElementById(pic);		//更新last
}

接下来就是最重要的部分了left()与right()

这里我自认为注释已经写得很全了，哈哈哈哈，若有那里不清楚的欢迎评论
这里主要就是一些逻辑的部分，利用几个属性来回改变< ull>的left
- left值越少，就越到后面的图片

ul.style.transition="left 0.5s, right 0.5s";	//为图片轮播效果加一个transition过渡动画，当然是为了更好看啦

function left() {			//向左按钮
	clearInterval(one);							//先暂停
	/*if (ul.offsetLeft > left_start - li_width) {	//考虑到当前图片已经是第一张，点击left按钮就跳向最后一张 */ 
	// 这种方法出了Bug
	if(pic == 1){
		ul.style.left = (left_start - (li.length - 1) * li_width) + "px";
		pic=li.length;			//li.length就相当于是最后一张图片的id了（见前面这只id部分）
	} else {
		ul.style.left = (ul.offsetLeft + li_width) + "px";
		pic--;				//向前翻一张，当然就减一了
		// alert(ul.offsetLeft);
	}
	change();			//每次改变是都调用change()函数
	one=setInterval(right,3000);				//重新开始周期调用
}

function right() {			//向右按钮
	clearInterval(one);
	/* if (ul.offsetLeft < left_start - (li.length - 2) * li_width) {//考虑到已经是最后一张的情况，跳向第一张 */
	if(pic == li.length){
		ul.style.left = (left_start) + "px";
		pic=1;
	} else {
		ul.style.left = (ul.offsetLeft - li_width) + "px";
		pic++;
		// alert(ul.offsetLeft);
	}
	change();				//调用改变函数
	one=setInterval(right,3000);
}