当前位置:Gxlcms > JavaScript > jQuery插件boxScroll实现图片轮播特效_jquery

jQuery插件boxScroll实现图片轮播特效_jquery

时间:2021-07-01 10:21:17 帮助过:5人阅读

BoxScroll

常见图片轮播效果的简单实现。可以数字列表控制或者左右按键控制。逻辑很简单,到了尽头得往回跑,看看注释就知道了。

代码如下:

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。

以上所述就是本文的全部内容了,希望大家能够喜欢。

人气教程排行