效果：
功能：
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();
网友评论