目录
1.最普通的banner（利用bootstrap的carousel插件）
4.引用owl-carousel插件，实现支持响应式的轮播图（照猫画虎的巨简单方法）
1.最普通的banner（利用bootstrap的carousel插件）
实例：https://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html
特殊需求：
①计数点在外层；
对容器进行高度设定，外层容器留空余高度放计数点，里层item定义不带计数点部分的高度
最终效果：
P.S.移动端手滑轮播滚动方法
$(function () {
var $carousels = $('.carousel');
var startX,endX;
var offset = 50;
$carousels.on('touchstart',function (e) {
startX = e.originalEvent.touches[0].clientX;
});
$carousels.on('touchmove',function (e) {
endX = e.originalEvent.touches[0].clientX;
});
$carousels.on('touchend',function (e) {
var distance = Math.abs(startX - endX);
if (distance > offset){
$(this).carousel(startX >endX ? 'next':'prev');
}
})
});2.中间为主图，两侧显示前后屏的虚影
实例：https://blog.csdn.net/sinat_38546399/article/details/103787936
页面效果:
3.右侧背景图为左侧的轮播图
页面效果:
有两种做法：
①图片背景直接内联在右侧对应元素上
②页面加载完成后，js循环取出src路径赋值到右侧元素上
PS.两种做法对src的路径地址有要求，一定不能传特殊字符（#，%，中文）
4.引用owl-carousel插件，实现支持响应式的轮播图（照猫画虎的巨简单方法）
API:http://owlcarousel2.github.io/OwlCarousel2/ https://www.dowebok.com/93.html
引入文件：
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>根据需求调用：
$('.bannerwrap .banner').owlCarousel({
items: 3,
itemsDesktop: [1199, 2],
itemsDesktopSmall: [991, 1],
itemsTablet: [768, 1],
itemsTabletSmall: [560, 1],
itemsMobile: [360, 1],
navigation: true,
navigationText: ["", ""],
autoPlay: true,
rewindSpeed: 300 //重回速度，倒带速度
});5.渐变轮播（通过透明度切换）
样例：（实例中利用了angularjs，只需看布局和以及与angular无关的js即可）
<div class="searchbg" >
<ul class=' searchbanner toplunbo' ng-repeat="newsColumn in newsColumns" ng-if="newsColumn.abbreviation == 'banner'">
<li class=" " ng-repeat="news in newsColumn.news" ng-if="$index < newsColumn.showNum" wrap-owlcarousel>
<div class="pic" ng-style="setStyle(news.imagePath)"></div>
</li>
</ul>
<div class="searchcon">
<p class="search-tit2">Open Access journals in the major scientific and medical fields</p>
<form action="/search" method="POST" onsubmit="return checkSearch(this);" class="topSearchForm">
<div class="search-content clear search-entrance ">
<input type="text" name="q" class="searchtext fl" placeholder="Author/Title/Affiliation/Abstract/Keywords/DOI">
<input type="submit" class="sub fl" value="" >
<div class="clear" >
<a href="javascript:void(0);" onclick="advanceSearchEntrance();" class="adv-search fr">Advanced Search</a>
</div>
</div>
</form>
</div>
</div>主要css：
.toplunbo,.toplunbo li{overflow:hidden;height:100%;}
.toplunbo li{opacity: 0;text-align:center;position:absolute;}
.toplunbo li:first-child{opacity: 1;}
.toplunbo li,.toplunbo li .pic,.toplunbo li img{width:100%;height:100%;}
.toplunbo li .pic{background-size: cover!important;}js:
/**
* 针对banner轮播图渲染数据完成后，加载部分样式
* @returns
*/
app.directive('wrapOwlcarousel',function(){
return {
link: function(scope,element,attr){
if(scope.$last == true){
//$emit调用父级Controller内的方法,$broadcast与$emit相反
//scope.$emit('repeatFinishCallback');
setTimeout(function() {
if ($(".searchbanner").length > 0 && $(".searchbanner li").length > 1){
//头部广告轮播
var flag = true; //判断定时器是否添加
var autolb = null;
autolb = setInterval(lbcal, 5000);
$('.toplunbo li').hover(function() {
clearInterval(autolb)
autolb = null;
}, function() {
autolb = setInterval(lbcal, 5000);
})
//头部广告轮播
var lbindex = 0;
function lunbo(lbindex) {
$('.toplunbo li').animate({"opacity":0},1000);
$('.toplunbo li').eq(lbindex).animate({"opacity":1},1000);
}
function lbcal() {
if(lbindex < $('.toplunbo li').length - 1) {
lbindex++
} else {
lbindex = 0
}
lunbo(lbindex);
}
}
}, 100);
}
}
}
})6.利用slick插件实现同时控制3个轮播
样例效果：
实现方法：https://blog.csdn.net/sinat_38546399/article/details/86641397
7.将bootstrap插件轮播改成自己想要的样子，点击弹出缩略图
样例效果：
实现方法：
html：大部分与boostrap插件布局一致，自定义部分为
<ol class="carousel-number carousel-indicators"></ol> <!-- 加了一个自定义的class -->css
.banner1 .carousel-number.carousel-indicators{left:auto;right: calc((100% - 1200px)/2);}
.banner1 .carousel-number{ color: #333;line-height: 22px; text-align: center;font-size:
14px; position: absolute;left: auto;right: 10px;}
.banner1 .carousel-number li{min-height: 64px;height: auto;text-align: left; text-
indent:0;transition: all 0.5s; width: 265px;overflow: hidden;
margin:0 20px 0 0;padding:10px;background:
rgba(255,255,255,0.8);color: #fff;border: 0;border-radius: 0;
box-shadow: 0 0 15px #ccc;}
.banner1 .carousel-number li .pic-small{width: 100%;opacity: 0;height: 0; padding-
bottom: 10px;}
.banner1 .carousel-number li.active {background:#fff;min-height: 142px;}
.banner1 .carousel-number li.active .pic-small{opacity: 1;height: 100px;}
.banner1 .carousel-number li:last-child{margin-right: 0;}
.banner1 .carousel-number li .pic-small img{width: 100%;height: 100%;}js
//banner图片计数器
var bannerImgNum=$(".banner1 .carousel-inner .item").length,bannerOlNum = '';
if(bannerImgNum > 0){
for(var i = 0; i < bannerImgNum; i++){
var src = $(".banner1 .carousel-inner .item").eq(i).css("background-image").substr(5,$(".banner1 .carousel-inner .item").eq(i).css("background-image").length-2),
tit = $(".banner1 .carousel-inner .item").eq(i).find(".tit").html();
bannerOlNum +='<li data-target="#myCarousel" data-slide-to="'+ i +'">'+
'<div class="pic-small" ><img src="'+src+'" /></div>'+
'<div class="tit-smail" >'+ tit +'</div>'+
'</li>';
}
$(".banner1 .carousel-indicators").empty().append(bannerOlNum);
$(".banner1 .carousel-indicators li:first-child").addClass("active")
$(".banner1 .carousel-indicators .tit-smail a").click(function(e){
e.preventDefault();
})
}8.利用原生js写出最基础的轮播
效果：
HTML:
<div class="banner" id="banner">
<a href=""><div class="banner-slide slide1 slide-active"></div></a>
<a href=""><div class="banner-slide slide2"></div></a>
<a href=""><div class="banner-slide slide3"></div></a>
</div>
<a href="javascript:void(0)" class="button prev" id="prev"></a>
<a href="javascript:void(0)" class="button next" id="next"></a>
<div class="dots" id="dots">
<span class="active"></span>
<span></span>
<span></span>
</div>JS：
var banner = byId("banner"),
prev = byId("prev"),
next = byId("next"),
dots = byId("dots").getElementsByTagName("span"),
index = 0,
bannerSlide = byId("banner").getElementsByClassName("banner-slide"),
bannerSlideLen = bannerSlide.length,
timer = null;
function slideImg(){
//调用自动轮播
stayAutoPlay();
//左点击
addhandler(prev,"click",function(){
index--;
if(index < 0) index = bannerSlideLen - 1;
showOrHide();
})
//右点击
addhandler(next,"click",function(){
index++;
if(index > bannerSlideLen - 1) index = 0;
showOrHide();
})
//小圆点点击
for(var j = 0; j < dots.length; j++){
dots[j].id = j;
addhandler(dots[j],"click",function(){
index = this.id;
showOrHide();
})
}
//图片显示与隐藏
function showOrHide(){
for(var i = 0; i < bannerSlideLen; i++){
bannerSlide[i].style.display = "none";
dots[i].className = "" ;
}
bannerSlide[index].style.display = "block";
dots[index].className = "active";
}
//自动轮播
function stayAutoPlay(){
timer = setInterval(function(){
index++;
if(index >= bannerSlideLen) index = 0;
showOrHide();
},3000);
}
//鼠标悬停暂停轮播
addhandler(banner,"mouseover",function(){
if(timer) clearInterval(timer);
})
//鼠标移出恢复轮播
addhandler(banner,"mouseout",function(){
stayAutoPlay();
})
}
//绑定事件的兼容写法
function addhandler(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,true);
}else if(element.attachEvent){
element.attachEvent('on' + type,handler);
}else{
element["on" + type];
}
}
function byId(id){
return typeof(id) === "string" ? document.getElementById(id) : id;
}
addhandler(window,"load",slideImg);
1802
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
