简单的HTML+js图片轮播?

2023-04-06 21:15:02JavaScript013

简单的HTML+js图片轮播?,第1张

h5代码：

</ul>

</div>

css代码：

@-webkit-keyframes move{

0%{left:-500px}

100%{left:0}

}

#wrap{width:600pxheight:130pxborder:1px solid #000position:relativemargin:100px auto

overflow: hidden}

#list{position:absoluteleft:0top:0padding:0margin:0

-webkit-animation:5s move infinite linearwidth:200%}

#list li{list-style:nonewidth:120pxheight:130pxborder:1px solid redbackground: pink

color:#ffftext-align: centerfloat:leftfont:normal 50px/2.5em '微软雅黑'}

#wrap:hover #list{-webkit-animation-play-state:paused}

</style>

扩展资料：

轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。

轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px、高度为512px.那么轮播的窗口大小就应该为一张图片的尺寸，即为：1024×512。之后将这5张图片0px水平相接组成一张宽度为：5120px,高度依然为：512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。

工具/材料

Sublime Text

首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示

然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头

接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明

最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能

最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<style>

.ck-slide ul { margin: 0padding: 0list-style-type: none}

.ck-slide { position: relativeoverflow: hidden}

.ck-slide ul.ck-slide-wrapper { position: absolutetop: 0left: 0z-index: 1margin: 0padding: 0}

.ck-slide ul.ck-slide-wrapper li { position: absolute}

.ck-slide .ck-prev, .ck-slide .ck-next { position: absolutetop: 50%z-index: 2width: 35pxheight: 70pxmargin-top: -35pxborder-radius: 3pxopacity: .15background: redtext-indent: -9999pxbackground-repeat: no-repeattransition: opacity .2s linear 0s}

.ck-slide .ck-prev { left: 5pxbackground: url(templets/default/images/arrow-left.png) #000 50% no-repeat}

.ck-slide .ck-next { right: 5pxbackground: url(templets/default/images/arrow-right.png) #000 50% no-repeat}

.ck-slidebox { position: absoluteleft: 50%bottom: 0pxz-index: 30hright:30pxwidth:100%}

.ck-slidebox ul { height: 30pxpadding: 0 4pxbackground: rgba(0,0,0,0.5)text-align:center}

.ck-slidebox ul li { float: leftheight: 30pxmargin: 0px 4pxline-height:30pxcolor:#fffdisplay:none}

.ck-slidebox ul li em { display: blockwidth: 100%height: 30px cursor: pointerfont-size:14px}

.ck-slidebox ul li.current em {color:#fff }

.ck-slidebox ul li em:hover { }

.ck-slide { width: 600pxheight: 400pxmargin: 0 auto}

.ck-slide ul.ck-slide-wrapper { height: 400px}

.ck-slide-wrapper li {display:none}

.ck-slidebox ul li{display:none}