轮播图

轮播图原理就是图片的挪动。所有轮播图片横向排列，在一个窗口中显示一张图片，窗口外的图片暗藏，每一次一排图片就是挪动一张图片的间隔，切换到下一张图片，即可实现图片轮播。 图片的挪动有两种形式： translate 实现的图片挪动position定位实现图片的偏移图片的自动播放，那必然用到定时器吧，而且是距离定时器 setInterval 该案例实现成果： 图片自动播放点击两头圆点按钮，实现图片任意切换点击左右箭头按钮，实现图片左右切换图片的切换对应小圆点的款式变动，即每一个小圆点对应一张图片先来看一下效果图： html格局：<!-- 引入css款式 --><link rel="stylesheet" href="./demo.css"><div class="banner_container"> <!-- 6张图片 --> <ul class="img_box"> <li><img src="图片4" alt=""></li> <li><img src="图片1" alt=""></li> <li><img src="图片2" alt=""></li> <li><img src="图片3" alt=""></li> <li><img src="图片4" alt=""></li> <li><img src="图片1" alt=""></li> </ul> <!-- 两头圆点 --> <ul class="sel_box"> <!-- 自定义属性 --> <li data-index="0"></li> <li data-index="1"></li> <li data-index="2"></li> <li data-index="3"></li> </ul> <!-- 左箭头 --> <div class="left_btn">&lt;</div> <!-- 右箭头 --> <div class="right_btn">&gt;</div></div><!-- 引入js代码 --><script src="./demo.js"></script>大家别被骗了，这里轮播图只实现4张图片的播放，至于另外多出的两张，其实另有用途 第一张图片搁置的其实四张轮播图中的最初一张，第6张图片其实是四张轮播图中的第一张，目标很简略，就是为了实现图片无缝轮播，上面用到的中央会阐明哈 CSS款式* { padding: 0; margin: 0; box-sizing: border-box;}.banner_container { position: relative; margin: 100px; width: 400px; height: 250px; /* 超出暗藏 */ overflow: hidden; }ul.img_box { position: absolute; left: 0; top: 0; /* html中的第一张图片不是咱们想要显示，第二张才是咱们轮播图的第一张图片因而要让这排图片往左挪动一张图片的间隔 */ transform: translateX(-400px);}.img_box li { float: left; list-style: none;}/* 图片大小 */.img_box li img { width: 400px;}/* 小圆点 */.sel_box { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);}.sel_box li { list-style: none; /* 转换为行内块元素 -- 一行显示 */ display: inline-block; width: 10px; height: 10px; background-color: pink; margin-right: 3px; border-radius: 5px; transition: all 0.4s;}/* 左箭头 */.left_btn { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 25px; height: 30px; background-color: #fff; line-height: 30px; padding-left: 3px; /* 将鼠标款式改为小手 */ cursor: pointer;}.right_btn { position: absolute; top: 50%; left: 375px; transform: translateY(-50%); width: 25px; height: 30px; background-color: #fff; line-height: 30px; padding-left: 5px; cursor: pointer;}/* 以后图片的小图点款式 */.sel_box .cur { background-color: red!important; transform: scale(1.3);}这是简略的css款式，大家能够依据本人爱好自行编写款式 ...