自学了一些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;
ma

这篇博客介绍了如何使用jQuery实现一个轮播图功能,包括点击箭头和导航圆点切换图片,并在鼠标悬停时暂停自动播放。同时,博主分享了在原有基础上增加的放大镜效果,通过改变CSS样式实现。
最低0.47元/天 解锁文章
732

被折叠的 条评论
为什么被折叠?



