jquery插件实现轮播图效果

本文实例为大家分享了jquery插件实现轮播图的具体代码，供大家参考，具体内容如下

轮播图的实现（jquery插件）
需要引入jquery插件，去jquery官网搜索

 
 
 
 
 * {
 margin: 0;
 padding: 0;
 list-style: none;
 }

 img {
 display: block;
 }

 .slider {
 height: 340px;
 width: 790px;
 margin: 100px auto;
 position: relative;
 overflow: hidden;
 }

 .slider li {
 position: absolute;
 display: none;
 }

 .slider li:first-child {
 display: block;
 }

 

 .slider li p {
 position: absolute;
 width: 100%;
 padding: 10px 0;
 text-indent: 2em;
 background-color: rgba(0, 0, 0, .6);
 bottom: 0;
 left: 0;
 font-size: 18px;

 
 transform: translate3d(0, 100%, 0);
 
 transition: all .8s;
 }

 

 .slider li.current p {
 
 transform: translate3d(0, 0, 0);
 }

 .slider li a {
 color: #fff;
 }

 .arrow {
 display: none;
 }

 .slider:hover .arrow {
 display: block;
 }

 .arrow-left,
 .arrow-right {
 font-family: "SimSun", "宋体";
 width: 30px;
 height: 60px;
 background-color: rgba(0, 0, 0, 0.1);
 position: absolute;
 top: 50%;
 margin-top: -30px;
 cursor: pointer;
 text-align: center;
 line-height: 60px;
 color: #fff;
 font-weight: 700;
 font-size: 30px;
 }

 .arrow-left:hover,
 .arrow-right:hover {
 background-color: rgba(0, 0, 0, .5);
 }

 .arrow-left {
 left: 0;
 }

 .arrow-right {
 right: 0;
 }
 


 
 

 

 
  
  
这是第1张图片的文字说明
 
 
 

 
  
  
这是第2张图片的文字说明
 
 
 

 
  
  
这是第3张图片的文字说明
 
 
 

 
  
  
这是第4张图片的文字说明
 
 
 

 
  
  
这是第5张图片的文字说明
 
 
 

 
  
  
这是第6张图片的文字说明
 
 
 

 
  
  
这是第7张图片的文字说明
 
 
 

 
  
  
这是第8张图片的文字说明
 
 
 
 
 
 <
 >
 
 
  //jquery插件
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。