自学了一些jQuery,虽然还是菜鸡,但是想留点小痕迹~
(1) 功能:
jQuery实现轮播功能,当点击“>””<”或下面的“蓝色圆点”时可以自动查看图片,此时自动播放功能暂停,待不点击时可以恢复自动播放功能。
代码展示:
1. 引入<scriptsrc="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
2. Css部分:
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 700px;
height: 400px;
border: 1px solid#102327;
position: relative;
margin:0 auto;
margin-top: 100px;
overflow: hidden;
}
.ul_list{
width:3500px;
height: 400px;
position: absolute;
}
.li_list{
width: 700px;
height: 400px;
list-style: none;
float: left;
}
.li_list img{
width: 100%;
height: 100%;
}
.odiv_nav{
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -100px;
}
.span_list{
width: 20px;
height: 20px;
border: 3px solidwhite;
border-radius:50%;/*圆形*/
float: left;
margin-left: 20px;
cursor: pointer;/*可有可无*/
}
.left_click{
po