c语言实现图片轮播,Vue实现图片轮播组件思路及实例解析

1、先看效果：

熟悉的图片轮播，只要是个网站，百分之90以上会有个图片轮播。我认为使用图片轮播。

第一可以给人以一种美观的感受，而不会显得网站那么呆板，

第二可以增加显示内容，同样的区域可以显示更多内容。

2、每学一个新东西 ，图片轮播都是很好的练手案例，而且，也很实用。

3、基本要求：页面加载，自动播放。鼠标悬停，停止播放。鼠标离开，继续播放

点击左右箭头切换上一张，下一张图片。

下方小圆点显示当前位第几张图片。

4、使用Vue实现

5、示例代码

结构html：

• :class="{dotted: i === (currentIndex-1)}"

  @click = jump(i+1)

  >

CSS部分：

*{

box-sizing: border-box;

margin:0;

padding:0;

}

ol,ul{

list-style: none;

}

#slider{

text-align: center;

}

.window{

position:relative;

width:600px;

height:400px;

margin:0 auto;

overflow:hidden;

}

.container{

display:flex;

position:absolute;

}

.left, .right{

position:absolute;

top:50%;

transform:translateY(-50%);

width:50px;

height:50px;

background-color:rgba(0,0,0,.3);

border-radius:50%;

cursor:pointer;

}

.left{

left:3%;

padding-left:12px;

padding-top:10px;

}

.right{

right:3%;

padding-right:12px;

padding-top:10px;

}

img{

user-select: none;

}

.dots{

position:absolute;

bottom:10px;

left:50%;

transform:translateX(-50%);

}

.dots li{

display:inline-block;

width:15px;

height:15px;

margin:0 3px;

border:1px solid white;

border-radius:50%;

background-color:#333;

cursor:pointer;

}

.dots .dotted{

background-color:orange;

}

JavaScript部分：

script>

export default {

name: 'slider',

props: {

initialSpeed: {

type: Number,

default: 30

},

initialInterval: {

type: Number,

default: 3

}

},

data () {

return {

sliders:[

{

img:'http://img.hb.aicdn.com/adbde61e4343dedd21e97ea7f22666825a8db7d077ffe-qn8Pjn_fw658'

},

{

img:'http://img.hb.aicdn.com/adeed7d28df6e776c2fa6032579c697381d1a82b7fe00-fwRqgn_fw658'

},

{

img:'http://img.hb.aicdn.com/ab7f48509b3c0353017d9a85ef1d12400c9b2724540d4-p3zouo_fw658'

},

{

img:'http://img.hb.aicdn.com/60f788fc2a846192f224b9e6d4904b30e54926211d3d67-ACFJ9G_fw658'

},

{

img:'http://img.hb.aicdn.com/22ded455284aab361b8d2056e82f74a891a019704296a-PSraEB_fw658'

},

],

imgWidth:600,

currentIndex:1,

distance:-600,

transitionEnd: true,

speed: this.initialSpeed

}

},

computed:{

containerStyle() {

return {

transform:`translate3d(${this.distance}px, 0, 0)`

}

},

interval() {

return this.initialInterval * 1000

}

},

mounted() {

this.init()

},

methods:{

init() {

this.play()

window.onblur = function() { this.stop() }.bind(this)

window.onfocus = function() { this.play() }.bind(this)

},

move(offset, direction, speed) {

console.log(speed)

if (!this.transitionEnd) return

this.transitionEnd = false

direction === -1 ? this.currentIndex += offset/600 : this.currentIndex -= offset/600

if (this.currentIndex > 5) this.currentIndex = 1

if (this.currentIndex < 1) this.currentIndex = 5

const destination = this.distance + offset * direction

this.animate(destination, direction, speed)

},

animate(des, direc, speed) {

if (this.temp) {

window.clearInterval(this.temp);

this.temp = null ;

}

this.temp = window.setInterval(() => {

if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) {

this.distance += speed * direc

} else {

this.transitionEnd = true

window.clearInterval(this.temp)

this.distance = des

if (des < -3000) this.distance = -600

if (des > -600) this.distance = -3000

}

}, 20)

},

jump(index) {

const direction = index - this.currentIndex >= 0 ? -1 : 1;

const offset = Math.abs(index - this.currentIndex) * 600;

const jumpSpeed = Math.abs(index - this.currentIndex) === 0 ? this.speed : Math.abs(index - this.currentIndex) * this.speed ;

this.move(offset, direction, jumpSpeed)

},

play() {

if (this.timer) {

window.clearInterval(this.timer)

this.timer = null

}

this.timer = window.setInterval(() => {

this.move(600, -1, this.speed)

}, this.interval)

},

stop() {

window.clearInterval(this.timer)

this.timer = null

}

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。