1.vue方式
1.1代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title></title>
<style type="text/css">
* { margin: 0; padding: 0; } .clearfix:before, .clearfix:after { content: '.'; display: block; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } .slider { position: relative; width: 100%; overflow: hidden; } .slider-group { min-height: 1px; } .slider-item { float: left; box-sizing: border-box; overflow: hidden; text-align: center; } .slider-item a { display: block; width: 100%; overflow: hidden; text-decoration: none; } .slider-item a img { display: block; width: 100%; } .slider .dots { position: absolute; right: 0; left: 0; bottom: 12px; text-align: center; font-size: 0; } .slider .dots .dot { display: inline-block; margin: 0 4px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); } .slider .dots .active { width: 20px; border-radius: 5px; background: rgba(255, 255, 255, 0.8); }
</style>
</head>
<body>
<div id="app">
<div v-if="recommends.length" class="slider" ref="slider">
<div class="slider-group clearfix" ref="sliderGroup">
<div class="slider-item" v-for="item in recommends">
<a href="javascript:;">
<img :src="item" />
</a>
</div>
</div>
<div class="dots">
<span class="dot" v-for="(item, index) in dots" :class="{ active: currentPageIndex === index }">
</span>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 注意 bscroll 的版本，版本不同使用的方法不太一样 -->
<script src="bscroll.min.js" type="text/javascript" charset="utf-8"></script>
<script>
var app = new Vue({
el: "#app",
data: {
// 轮播图数据
recommends: ["http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg",
"http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/1.jpg",
"http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
],
// 下边的小点
dots: [],
// 当前是第几页
currentPageIndex: 0,
// 是否循环
loop: true,
// 是否自动播放
autoPlay: true,
// 自动轮播的切换时间
interval: 1500
},
created() {
setTimeout(() => {
this._setSliderWidth();
// 点的初始化须在轮播图初始化之前，否则会多出两个点
this._initDots();
this._initSlider();
if (this.autoPlay) {
this._play();
}
}, 20);
// 监听页面 窗口大小变化
window.addEventListener('resize', () => {
// 若没初始化，直接return
if (!this.slider) {
return
}
// 若初始化了，重新计算窗口尺寸，并调用刷新的api方法
this._setSliderWidth(true)
this.slider.refresh()
})
},
methods: {
_setSliderWidth(isResize) {
// 获取有轮播的个数
this.children = this.$refs.sliderGroup.children;
let width = 0;
let sliderWidth = this.$refs.slider.clientWidth;
// 设置单个轮播图的宽度
for (let i = 0; i < this.children.length; i++) {
let child = this.children[i];
child.style.width = sliderWidth + "px";
width += sliderWidth;
}
// 如果 为循环模式，则前后各加一个，总容器宽度须加两个轮播图宽度
if (this.loop && !isResize) {
width += sliderWidth * 2;
}
// 计算容器宽度
this.$refs.sliderGroup.style.width = width + "px";
},
_initDots() {
// 初始化点的个数
this.dots = new Array(this.children.length);
},
_initSlider() {
// 通过 bscroll 初始化方法初始化轮播图
// 不同版本初始化方法不同，详情见官方网站
this.slider = new BScroll(this.$refs.slider, {
scrollX: true,
scrollY: false,
momentum: false,
snap: true,
snapLoop: this.loop,
snapThreshold: 0.3,
snapSpeed: 400
});
// 滚动结束事件 scrollEnd
this.slider.on("scrollEnd", () => {
// 滚动到第几页
let pageIndex = this.slider.getCurrentPage().pageX;
// 如果是循环状态，须减1
if (this.loop) {
pageIndex -= 1;
}
this.currentPageIndex = pageIndex;
// 如果自动轮播，先清除计时器，再执行播放命令
if (this.autoPlay) {
clearTimeout(this.timer)
this._play()
}
});
},
_play() {
let pageIndex = this.currentPageIndex + 1;
if (this.loop) {
pageIndex += 1;
}
this.timer = setTimeout(() => {
this.slider.goToPage(pageIndex, 0, 400);
}, this.interval);
}
}
})
</script>
</body>
</html>1.2 效果
2.jq 方式
2.1代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title></title>
<style type="text/css">
* { margin: 0; padding: 0; } .clearfix:before, .clearfix:after { content: '.'; display: block; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } .slider { position: relative; width: 100%; overflow: hidden; } .slider-group { min-height: 1px; width: 1875px; } .slider-item { float: left; box-sizing: border-box; overflow: hidden; text-align: center; width: 375px; } .slider-item a { display: block; width: 100%; overflow: hidden; text-decoration: none; } .slider-item a img { display: block; width: 100%; } .slider .dots { position: absolute; right: 0; left: 0; bottom: 12px; text-align: center; font-size: 0; } .slider .dots .dot { display: inline-block; margin: 0 4px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); } .slider .dots .active { width: 20px; border-radius: 5px; background: rgba(255, 255, 255, 0.8); }
</style>
</head>
<body>
<div class="slider">
<div class="slider-group clearfix">
<div class="slider-item">
<a href="javascript:;">
<img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg" />
</a>
</div>
<div class="slider-item">
<a href="javascript:;">
<img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/1.jpg" />
</a>
</div>
<div class="slider-item">
<a href="javascript:;">
<img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg" />
</a>
</div>
</div>
<div class="dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<script src="https://cdn.boo
最低0.47元/天 解锁文章
914
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
