web前端入门到实战:简单的图片轮播
效果:
专注于为中小企业提供成都网站建设、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业明溪免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了近千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
功能:
1、左右箭头切换
2、状态控制点切换
3、鼠标悬念
4、自动轮播
HTML:
web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)
CSS:
.zh-carousel{position: relative;width: 100%;height: 246px;} .zh-carousel .zh-img-list{position: relative;z-index: 2;width: 100%;height: 100%;overflow: hidden;} .zh-carousel .zh-img-list ul{height: 100%;} .zh-carousel .zh-img-list li{position: absolute;z-index: 0;left: 0;top: 0;width: 100%;height: 100%;} .zh-carousel .zh-img-list .active{z-index: 1;} .zh-carousel .zh-img-list li a{display: block;position: relative;height: 100%;} .zh-carousel .zh-img-list li img{display: block;width: 100%;height: 100%;opacity: 0;filter:Alpha(opacity=0);-webkit-transition: all .5s ease-out;transition: all .5s ease-out;} .zh-carousel .zh-img-list .active img{opacity: 1;filter:Alpha(opacity=100);} .zh-carousel .zh-img-list li .zh-desc{display: block;position: absolute;z-index: 3;left: 0;bottom: -36px;width: 100%;padding: 10px 15px;box-sizing: border-box;background-color: rgba(0,0,0,0.5);font-size: 14px;color: #fff;-webkit-transition: all .5s ease-out;transition: all .5s ease-out;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;} .zh-carousel .zh-img-list .active .zh-desc{bottom: 0;} .zh-carousel .zh-status-list{position: absolute;z-index: 4;left: 0;top: 0;width: 100%;padding: 10px 15px;box-sizing: border-box;text-align: right;} .zh-carousel .zh-status-list li{display: inline-block;width: 10px;height: 10px;margin-left: 5px;background-color: #fff;border: 1px solid #ddd;cursor: pointer;} .zh-carousel .zh-status-list .active{background-color: #FFD8C6;border: 1px solid #ED713D;} .zh-carousel .zh-prev, .zh-carousel .zh-next{display: inline-block;position: absolute;z-index: 4;top: 50%;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);width: 20px;height: 30px;background-color: rgba(0,0,0,0.5);font-family: "SimSun";font-size: 18px;font-weight: bold;color: #fff;text-align: center;line-height: 30px;cursor: pointer;} .zh-carousel .zh-prev:hover, .zh-carousel .zh-next:hover {background-color: rgba(0,0,0,0.75);} .zh-carousel .zh-prev{left: 0;} .zh-carousel .zh-next{right: 0;} web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)
JS:
$.extend({ /* 图片轮播 @param options object (配置项) */ carousel: function(options) { var defaults = { box: '.zh-carousel', // 盒子 listBox: '.zh-img-list', // 列表框 stateBox: '.zh-status-list', // 状态框 prev: '.zh-prev', // 上一个 next: '.zh-next', // 下一个 time: 2000 // 动画时间 } var conf = $.extend({}, defaults, options); // 给第一个添加状态 $(conf.box).find(conf.listBox).find('li:first').addClass('active'); // 获取图片的数量 var liNum = $(conf.box).find(conf.listBox).find('li').size(); // 添加状态列表 var statusList = '
- ';
for(var i=0; i
当前题目:web前端入门到实战:简单的图片轮播
文章来源:http://scyanting.com/article/gioois.html