时间:2021-07-01 10:21:17 帮助过:5人阅读
常见图片轮播效果的简单实现。可以数字列表控制或者左右按键控制。逻辑很简单,到了尽头得往回跑,看看注释就知道了。
代码如下:
HTML
简易图片轮播插件
CSS
@charset "utf-8"; /* CSS Document */ body{ margin:0 0; padding:0 0; height:100%; width:100%; } .wrap{ font-family:"微软雅黑","宋体", Times, "Times New Roman", serif; font-size:14px; margin:0 0; padding:0 0; height:100%; width:100%; overflow:hidden; } .boxStyle{/*照片大小*/ width: 500px; height: 256px; } .scrollBox{ position: relative; width: 500px; margin: 0 auto; } .picInnerBox{ width: 10000px;/*足够大能放下即可,如果需要上下滚动,改height*/ overflow: hidden; } .picInnerBox li{ cursor: pointer; float: left; } .picOuterBox{ overflow: hidden; } .arrow{ position: absolute; top: 45%; height: 40px; cursor: pointer; z-index: 99; } .arrow:hover{ color: #fff; } .arrowLeft{ float: left; left: 5%; } .arrowRight{ float: right; right: 5%; } .picControl{ overflow: auto; width: 100px; margin: 0 auto; } .picControl ul li{ cursor: pointer; float: left; width: 20px; height: 20px; text-align: center; } .picControl ul li:hover{ color:red; } .liSelected{ color: red; }
JavaScript
详细下载参见https://github.com/codetker/myBoxScroll。
以上所述就是本文的全部内容了,希望大家能够喜欢。