轮播案例：实现无缝轮播、轮播指示器、滑动效果
<div class="swiper-wraper">
<!-- 相框 -->
<div class="swiper">
<ul>
<li style="background-color: cadetblue">元素五</li>
<li style="background-color: skyblue">元素一</li>
<li style="background-color: blueviolet">元素二</li>
<li style="background-color: pink">元素三</li>
<li style="background-color: burlywood">元素四</li>
<li style="background-color: cadetblue">元素五</li>
<li style="background-color: skyblue">元素一</li>
</ul>
<!-- 导航 -->
<!-- 下一页 -->
<a href="javascript:void(0)" class="next">></a>
<!-- 上一页 -->
<a href="javascript:void(0)" class="prev"><</a>
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
let ulEle = document.querySelector('ul')
let widEle = document.querySelector('.swiper-wraper')
let wid = getComputedStyle(widEle).width
let offset = parseInt(wid)
let isMove = false //默认为没运动
let count = ulEle.children.length //总共有多少个li
// console.log(count)
let index = 0
let nextEle = document.querySelector('.next')
let prevEle = document.querySelector('.prev')
//自动轮播
function autoPlay(){
setInterval(function(){
move(ulEle,offset)
},2000)
}
// autoPlay()
//绑定导航事件 上一页 下一页
function bindNavigator(){
nextEle.addEventListener('click',()=>{setNext()
})
prevEle.addEventListener('click',()=>{setPrev()
})
}
bindNavigator()
//下一页
function setNext(){
if(isMove == false){//在未运动状态才允许点击
if(++index == count-2){
index = 0
}
getClass(index)
move(ulEle,-offset)
}
}
//下一页
function setPrev(){
if(isMove == false){
if(--index < 0){
index = count-3
}
getClass(index)
move(ulEle,offset)
}
}
//指示器 将li循环绑定点击事件 清空样式 点击给样式
// 与选项卡相似 并实现点击按钮对应响应页面
let oliEle = document.querySelectorAll('ol>li')
//循环绑定点击事件
function setPointer(){
for(let i = 0 ; i < oliEle.length; i++){
oliEle[i].addEventListener('click',function(){
if(isMove == false){
let index_d = i - index // 索引号差值
index = i // 同步指示器
move(ulEle,-offset*index_d)
getClass(i)
}
})
}
}
setPointer()
//清空样式
function clear(){
for(var i = 0 ; i < oliEle.length ; i++){
oliEle[i].className=''
}
}
//设置样式
function getClass(_index){
clear() //清空样式
oliEle[_index].className = 'active'
}
//拖拽 实现滑动效果
function touch(){
widEle.onmousedown = function(e){
e = e || window.event
let init = e.offsetX
widEle.onmousemove = function(e){
e = e || event
let x = e.offsetX
if( x-init > 0){
setNext()
}else{
setPrev()
}
}
widEle.onmouseup = function(){
widEle.onmousemove = null
}
}
}
touch()
//封装运动函数
function move(ele,offset){
isMove = true //运动状态
//获取初始值
ele.style.left = window.getComputedStyle(ele).left
let init = parseInt(ele.style.left)
let time = 1000 //总时间
let rate = 50 //速度
let goal = init + offset //目标位置
let distance = (offset * rate) / time // 每次移动距离
let timer = setInterval(function () {
if(parseInt(ele.style.left) == goal || Math.abs(Math.abs(goal) - Math.abs(parseInt(ele.style.left)))< Math.abs(distance)){
// 如果当前位置与目标位置的距离小于移动的距离，直接到达目标位置
ele.style.left = goal +'px'
clearInterval(timer)
// 当元素停止运动时，判断是否运动到最后元素，如果是初始化元素
if(parseInt(ele.style.left) == -(count - 1)*Math.abs(offset)){ //向右边界判断
ele.style.left = 0 + 'px'
}else if(parseInt(ele.style.left)== 0){ //向左边界判断
ele.style.left = -(count - 2)*Math.abs(offset) +'px'
}
isMove = false //到最后停止运动
}else{
ele.style.left = parseInt(ele.style.left) + distance +'px'
}
},rate)
}
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: black;
}
.swiper-wraper{
width: 400px;
height: 200px;
margin-top: 100px;
margin-left:400px ;
}
.swiper-wraper .swiper{
width: 100%;
height: 100%;
border: 4px solid gray;
position: relative;
overflow: hidden;
}
ul{
display: flex;
list-style: none;
position: absolute;
top: 0;
left: -400px;
}
ul li{
width: 400px;
height: 200px;
text-align: center;
line-height: 200px;
}
.next{
width: 30px;
height: 60px;
position:absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
background-color: rgba(34,33,33,0.6);
font-size: 18px;
text-align: center;
line-height: 60px;
}
.prev{
width: 30px;
height: 60px;
position:absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
background-color: rgba(34,33,33,0.6);
font-size: 18px;
text-align: center;
line-height: 60px;
}
ol{
position: absolute;
width: 100px;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
list-style: none;
}
ol li{
border-radius: 50%;
width: 10px;
height: 10px;
background-color: cornflowerblue;
}
ol li:hover{
cursor: pointer;
}
.active{
border-radius: 50%;
width: 10px;
height: 10px;
background-color: pink;
}
表单验证
<form action="">
<input type="text" name="username" placeholder="请输入用户名"><br>
<input type="password" name="password" placeholder="请输入密码"><br>
<input type="submit" name="submit" value="确定" id="login">
</form>
var usernameInput = document.querySelector('input[name="username"]')
var passwordInput = document.querySelector('input[name="password"]')
var username = usernameInput.value
var password = passwordInput.value
//焦点事件
usernameInput.onfocus = function(){
console.log('获取焦点')
}
usernameInput.onblur = function(){
console.log('失去焦点')
if(username === ''){
alert('用户名不能为空!')
}
}
/*
密码输入框失去焦点，做密码强度验证
规则: 1. 必须是大写字母开头
2. 密码包含字母和数字
3. 至少8位
邮箱输入框失去焦点，做邮箱格式验证
规则: 1. 必须包含@符号
2. @符号左右两边可以字母或数字或字母数字组合
3. 以.com结尾
*/
passwordInput.addEventListener('blur',function(){
let password = passwordInput.value // Zhousir123
const reg = /[A-Z][0-9a-zA-Z]{7,}/
if(!reg.test(password)){
alert('密码必须是大写字母开头,字母和数字组合并且至少8位!')
}
})
var formE = document.querySelector('form')
formE.onsubmit = function(e){ //submit提交事件
e = e || window.event
e.preventDefault() //阻止表单默认行为
//用户名非空判定
if(username == ''){
alert('用户名不能为空')
return //为空中断后面的函数
}
if(password == ''){
alert('密码不能为空')
return //为空中断后面的函数
}
//用户名密码匹配判定
if(inputValue1 == 'ahai' && inputValue2 == '123'){
location.href = 'www.baidu.com' //验证通过才能跳转
}else{
alert('用户名或密码错误！')
}
}
*{
margin: 0;
padding: 0;
}
form{
width:500px;
background-color: pink;
margin: 100px auto;
padding: 50px;
}
form input{
height: 40px;
width: 100%;
margin-top:20px;
}
195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
