效果:
功能:
1, 左右箭头切换
2, 状态控制点切换
3, 鼠标悬念
4, 自动轮播
html:
- <div class="zh-carousel">
- <div class="zh-img-list">
- <ul>
- <li>
- <a href="###">
- <img src="images/img-demo02.jpg" alt="">
- <span class="zh-desc"> 广西南宁低价供应各种地被, 绿化苗木等 </span>
- </a>
- </li>
- <li>
- <a href="###">
- <img src="images/img-demo02-1.jpg" alt="">
- <span class="zh-desc"> 广西南宁低价供应各种地被, 绿化苗木等 </span>
- </a>
- </li>
- <li>
- <a href="###">
- <img src="images/img-demo02-2.jpg" alt="">
- <span class="zh-desc"> 广西南宁低价供应各种地被, 绿化苗木等 </span>
- </a>
- </li>
- </ul>
- </div>
- </div>
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 = '<ul class="zh-status-list">';
- for(var i=0; i<liNum; i++) {
- if(i == 0) {
- statusList += '<li class="active"></li>';
- } else {
- statusList += '<li></li>';
- }
- }
- statusList += '</ul>';
- $(conf.box).append(statusList);
- // 添加左右按钮
- var btns = '<span class="zh-prev"type="button"><</span><span class="zh-next"type="button">></span>';
- $(conf.box).append(btns);
- // 索引
- var index = 0;
- // 切换函数
- function switchFunc(curIndex) {
- index++;
- if(index> liNum - 1) {
- index = 0;
- }
- $(conf.box).find(conf.stateBox).find('li').eq(index).addClass('active').siblings().removeClass('active');
- $(conf.box).find(conf.listBox).find('li').eq(index).addClass('active').siblings().removeClass('active');
- }
- // 自动播放
- var autoPlay = setInterval(function() {
- switchFunc(index);
- }, conf.time);
- // 鼠标悬停
- $(conf.box).find(conf.listBox).mouseover(function() {
- clearInterval(autoPlay);
- }).mouseout(function() {
- autoPlay = setInterval(function() {
- switchFunc(index);
- }, conf.time);
- });
- // 控制点
- $(conf.box).find(conf.stateBox).find('li').mouseover(function() {
- clearInterval(autoPlay);
- }).mouseout(function() {
- autoPlay = setInterval(function() {
- switchFunc(index);
- }, conf.time);
- }).click(function() {
- $(this).addClass('active').siblings().removeClass('active');
- $(conf.box).find(conf.listBox).find('li').eq($(this).index()).addClass('active').siblings().removeClass('active');
- index = $(this).index();
- });
- // 点击左箭头
- $(conf.box).find(conf.prev).mouseover(function() {
- clearInterval(autoPlay);
- }).mouseout(function() {
- autoPlay = setInterval(function() {
- switchFunc(index);
- }, conf.time);
- }).click(function() {
- index--;
- if(index <0) {
- index = liNum - 1;
- }
- $(conf.box).find(conf.stateBox).find('li').eq(index).addClass('active').siblings().removeClass('active');
- $(conf.box).find(conf.listBox).find('li').eq(index).addClass('active').siblings().removeClass('active');
- });
- // 点击右箭头
- $(conf.box).find(conf.next).mouseover(function() {
- clearInterval(autoPlay);
- }).mouseout(function() {
- autoPlay = setInterval(function() {
- switchFunc(index);
- }, conf.time);
- }).click(function() {
- index++;
- if(index> liNum-1) {
- index = 0;
- }
- $(conf.box).find(conf.stateBox).find('li').eq(index).addClass('active').siblings().removeClass('active');
- $(conf.box).find(conf.listBox).find('li').eq(index).addClass('active').siblings().removeClass('active');
- });
- }
- });
- // 调用
- $.carousel();
来源: http://www.jianshu.com/p/408df86355d0