Html
    Css
    Js

    
                        
*{
    padding:0px;
    border:0px;
    margin:0px;
}
ul {
    list-style:none;
}
.slideBox {
    margin:50px auto;
    width:300px;
    height:480px;
    box-shadow:2px 2px 10px #C38DD4;
    border-radius:20px;
    position:relative;
    overflow:hidden;
}
.slideBox ul {
    position:relative;
    width:2000px;}
.slideBox ul li {
    float:left;
    width:300px;
    height:480px;
    position:relative;
    
}
.spanBox {
    position:absolute;
    width:300px;
    height:20px;
    bottom:10px;
    left:80px;
}
.spanBox span {
    width:18px;
    height:18px;
    margin-left:5px;
    background-color:rgba(201,178,207,1.00);
    float:left;
    line-height:16px;
    text-align:center;
    text-shadow:2px 2px 2px #C5EBF0;
    font-family:cabin-sketch;
    font-size:15px;
}
.slideBox .spanBox .active {
    background-color:rgba(155,83,244,0.79);
    border:solid 1px #BEEBEC;
    border-radius:4px;
}
.prev {
    font-size: 38px;  
    position:absolute;
    left:0px;
    top:320px;
    float:left;
    border-left:solid 1px rgba(251,245,246,1.00);
    opacity:0.5;
}
.next {
    font-size: 38px;
    width:15px;
    height:50px;
    position:absolute;
    right:0px;
    top:320px;
    float:right;
    border-right:solid 1px rgba(245,237,237,1.00);
    opacity:0.5
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

jquery轮播图详解

html代码,代码的结构比较简单,这里解释一下,ul标签是要左右移动的,所以怎么设置position属性?,然后span标签是提供索引和下标控制符,绑定动画的。prev和next类名的div标签是提供左右按钮,电机可以实现左右滑动。
链接的外部css文件,然后请注意一下各种属性和值。电脑端的话,html是相当于文本结构常说的dom,解码的时候配合css属性进行渲染,具体的属性请大家自己测试,在四种常用的浏览器测试一下css属性,我这里就偷懒了没有加上-webkit-,-moz-等等,大家如果需要用可以hack。
在代码中也分为几个部分,让大家清晰明了。其实很简单就是几个参数,几个函数,整个过程就click事件,hover时间,animate方法,setinterval()就可以轻松搞定。

0