【Html5&JavaScript】轮幕图封装及调用
Html5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 禁用复制 */
body{
user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
-khtml-user-select:none;
}
</style>
</head>
<body>
<div class="divClass"></div>
<script src="../../通用js/轮幕.js"></script><!-- "../../通用js/轮幕.js"：按js的地址修改 -->
<script>
let divClass = document.querySelector('.divClass')//.divClass：按div的name更新
let divWidth = '700px'//700px：按轮幕图的大小更新div盒子宽
let divHeight = '300px'//300px：按轮幕图的大小更新div盒子高
//linkList：输入图片的转接地址，构建数组
let linkList = ['http://www.hao123.com','#','#','#','#','#']
//linkList和liList的数组长度需要相同
//liList：输入图片的地址，构建数组
let liList = ['C:/Users/11477/Desktop/代码/备用/images/images/boy.png','c:/users/11477/desktop/代码/备用/images/images/dog.png','C:/Users/11477/Desktop/代码/备用/images/images/boy.png','c:/users/11477/desktop/代码/备用/images/images/girls.png','c:/users/11477/desktop/代码/备用/images/images/girl.png','C:/Users/11477/Desktop/代码/备用/images/images/dog.png']
//创建新的函数
let graph1 = new graph(divClass,divWidth,divHeight,liList)
graph1.appul()
graph1.appspan()
graph1.appkey()
graph1.circulation()
graph1.pause()
</script>
</body>
</html>Javascript
// let divClass = document.querySelector('.divClass')
// let divWidth = '600px'
// let divHeight = '300px'
// let linkList = ['#','#','#','#','#','#']
// let liList = ['C:/Users/11477/Desktop/代码/备用/images/images/boy.png','c:/users/11477/desktop/代码/备用/images/images/dog.png','c:/users/11477/desktop/代码/备用/images/images/girls.png','c:/users/11477/desktop/代码/备用/images/images/girl.png','C:/Users/11477/Desktop/代码/备用/images/images/dog.png']
// let graph1 = new graph(divClass,divWidth,divHeight,liList)
// graph1.appul()
// graph1.appspan()
// graph1.appkey()
// graph1.circulation()
// graph1.pause()
class graph{
constructor(divClass,divWidth,divHeight,liList,linkList){
this.divClass = divClass
this.divClass.style.width = divWidth
this.divClass.style.height = divHeight
this.liList = liList
this.linkList = linkList
this.divClass.style.position = 'relative'
this.divClass.style.overflow = 'hidden'
}
}
//创建图片
graph.prototype.appul=function(){
let ul = document.createElement('ul')
ul.style.position = 'absolute'
ul.style.width = parseInt(this.liList.length)*parseInt(divWidth) +'px'
ul.style.height = parseInt(divHeight) +'px'
ul.style.listStyle = 'none'
this.divClass.appendChild(ul)
for(i=0;i<this.liList.length;i++){
let li = document.createElement('li')
li.style.float = 'left'
li.style.width = parseInt(ul.style.width)/parseInt(this.liList.length) +'px'
li.style.height = ul.style.height
li.innerHTML = '<a href="'+ linkList[i] +'"><img src="'+ liList[i] +'" alt=""></a>'
li.querySelector('a>img').style.width = li.style.width
li.querySelector('a>img').style.height = li.style.height
ul.appendChild(li)
}
}
//创建图片编号及点击事件
graph.prototype.appspan=function(){
for(i=0;i<this.liList.length;i++){
let span = document.createElement('span')
span.style.position = 'absolute'
span.style.left = parseInt(divWidth)-30*parseInt(this.liList.length-i)*2 +'px'
span.style.top = parseInt(divHeight)-60 +'px'
span.style.width = 30 +'px'
span.style.height = 30 +'px'
span.innerText = i+1
span.style.backgroundColor = 'white'
span.style.fontSize = '18px'
span.style.textAlign = 'center'
span.style.lineHeight = '30px'
this.divClass.appendChild(span)
//span添加点击
span.onclick=function(){
clearInterval(timer)
let spanlist = Array.from(document.querySelectorAll('.divClass>span'))
for(let i in spanlist){
spanlist[i].className = ''
spanlist[i].style.backgroundColor = ''
spanlist[i].style.backgroundColor = 'white'
}
this.style.backgroundColor = 'pink'
this.className = 'span1'
shownumber=parseInt(this.innerText)
document.querySelector('.divClass>ul').style.transform = 'translateX('+ (shownumber-1)*parseInt(divWidth)*-1 +'px)'
graph.prototype.circulation()
}
}
let spanlist = Array.from(document.querySelectorAll('.divClass>span'))
spanlist[0].className = 'span1'
spanlist[0].style.backgroundColor = 'pink'
}
//创建翻页按键
graph.prototype.appkey=function(){
let left = document.createElement('div')
left.style.position = 'absolute'
left.style.top = (parseInt(divHeight)-parseInt(divWidth)*1/5)/2 +'px'
left.style.width = 50 +'px'
left.style.height = parseInt(divWidth)*1/5 +'px'
left.innerText = '<'
left.style.backgroundColor = 'rgba(53,47,47,0.5)'
left.style.fontSize = '20px'
left.style.textAlign = 'center'
left.style.lineHeight = parseInt(divWidth)*1/5 +'px'
this.divClass.appendChild(left)
//左翻页
left.onclick=function(){
clearInterval(timer)
let spanlist = Array.from(document.querySelectorAll('.divClass>span'))
i=parseInt(document.querySelector('.divClass>.span1').innerText)-1
i--
//判断是否到达第一张图片
if(i<0){
i=spanlist.length-1
}
//移除其他背景颜色
for(let i in spanlist){
spanlist[i].className = ''
spanlist[i].style.backgroundColor = ''
spanlist[i].style.backgroundColor = 'white'
}
spanlist[i].style.backgroundColor = 'pink'
spanlist[i].className = 'span1'
//移动控制ul的移动
document.querySelector('.divClass>ul').style.transform = 'translateX('+ i*parseInt(divWidth)*-1 +'px)'
graph.prototype.circulation()
}
let right = document.createElement('div')
right.style.position = 'absolute'
right.style.left = parseInt(divWidth)-50 +'px'
right.style.top = (parseInt(divHeight)-parseInt(divWidth)*1/5)/2 +'px'
right.style.width = 50 +'px'
right.style.height = parseInt(divWidth)*1/5 +'px'
right.innerText = '>'
right.style.backgroundColor = 'rgba(53,47,47,0.5)'
right.style.fontSize = '20px'
right.style.textAlign = 'center'
right.style.lineHeight = parseInt(divWidth)*1/5 +'px'
this.divClass.appendChild(right)
//右翻页
right.onclick=function(){
clearInterval(timer)
let spanlist = Array.from(document.querySelectorAll('.divClass>span'))
i=parseInt(document.querySelector('.divClass>.span1').innerText)-1
i++
//判断是否到达最后一张图片
if(i>spanlist.length-1){
i=0
}
//移除其他背景颜色
for(let i in spanlist){
spanlist[i].className = ''
spanlist[i].style.backgroundColor = ''
spanlist[i].style.backgroundColor = 'white'
}
spanlist[i].style.backgroundColor = 'pink'
spanlist[i].className = 'span1'
//移动控制ul的移动
document.querySelector('.divClass>ul').style.transform = 'translateX('+ i*parseInt(divWidth)*-1 +'px)'
graph.prototype.circulation()
}
}
//设置图片循环
graph.prototype.circulation=function(){
timer=setInterval(function(){
let spanlist = Array.from(document.querySelectorAll('.divClass>span'))
i=parseInt(document.querySelector('.divClass>.span1').innerText)-1
i++
//判断是否到达最后一张图片
if(i>spanlist.length-1){
i=0
}
//移除其他背景颜色
for(let i in spanlist){
spanlist[i].className = ''
spanlist[i].style.backgroundColor = ''
spanlist[i].style.backgroundColor = 'white'
}
spanlist[i].style.backgroundColor = 'pink'
spanlist[i].className = 'span1'
//移动控制ul的移动
document.querySelector('.divClass>ul').style.transform = 'translateX('+ i*parseInt(divWidth)*-1 +'px)'
},2000)
}
//鼠标移入暂停 移出执行
graph.prototype.pause = function(){
this.divClass.querySelector('ul').onmouseover = function(){
clearInterval(timer)
}
this.divClass.querySelector('ul').onmouseout = function(){
clearInterval(timer)
graph.prototype.circulation()
}
}本文来自博客园，作者：浊酒看红尘，转载请注明原文链接：https://www.cnblogs.com/JYAyyds/articles/16164281.html
浙公网安备 33010602011771号