之前已经写过很多的图片轮播了,但以下这种还真的没想到过
实现效果(图片来源于百度,侵权请与本人联系)
主要原理:利用浮动特性和超出部分隐藏,动态改变第一张图的右偏移量,动态改变图片排列,实现轮播
利用克隆,实现给大图的动态穿参,最终实现效果。
代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/* 布局其实是有点痛苦的,自己调了好久,总会不理想 */
* {
margin: 0;
padding: 0;
}
.block {
position: relative;
width: 400px;
height: 600px;
border: 1px solid silver;
margin: 0 auto;
overflow: hidden;
}
.small_img {