js水平轮播

最新推荐文章于 2021-07-03 16:20:59 发布

隅寒

最新推荐文章于 2021-07-03 16:20:59 发布

阅读量237

点赞数 1

本文链接：https://blog.csdn.net/qq_41881409/article/details/104395479

版权

一、实现功能

（1）左右点击水平轮播

（2）下方小按钮点击轮播

（3）自动轮播

（4）鼠标放置在图片上停止轮播，移开继续轮播

二、遇见问题及解决方案

1.z-index:999
图片设置在文字上方
2. !important
优先级设置为最高
3.list.style.left = -liWidth +'px'
跳到最后一个图片再点击下一个时，使长度为第一个图片陷进屏幕里不被看到的负值，再跳转到第二个图片
4.width:7000px
图片未排成一行需手动设置一下ul的长度要大于图片总长度

以下为源代码

<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>轮播图</title>
	<style>
		*{
			margin:0px;
			padding: 0px;
		}
		ul{
			list-style: none;
			width:7000px;
		}
		.slider{
			width: 700px;
			height: 400px;
			position: relative;
			overflow: hidden;
		}
		.slider .list{
			position: absolut

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

隅寒

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js水平轮播

一、实现功能（1）左右点击水平轮播（2）下方小按钮点击轮播（3）自动轮播（4）鼠标放置在图片上停止轮播，移开继续轮播二、遇见问题及解决方案1.z-index:999图片设置在文字上方2. !important优先级设置为最高3.list.style.left = -liWidth +'px'跳到最后一个图片再点击下一个时，使长度为第一个图片陷进屏幕里不被看到的负值，再跳转到第...
复制链接

扫一扫