|
|
@@ -1,5 +1,11 @@
|
|
|
+<!--
|
|
|
+ author: zsy
|
|
|
+ date: 2022-10-29
|
|
|
+ 轮播图
|
|
|
+-->
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
+
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
@@ -7,30 +13,36 @@
|
|
|
<title>Document</title>
|
|
|
<link rel="stylesheet" href="font/iconfont.css">
|
|
|
<style>
|
|
|
- *{
|
|
|
+ * {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
- ul{
|
|
|
+
|
|
|
+ ul {
|
|
|
list-style: none;
|
|
|
}
|
|
|
- #container{
|
|
|
+
|
|
|
+ #container {
|
|
|
width: 590px;
|
|
|
height: 470px;
|
|
|
margin: 100px auto;
|
|
|
position: relative;
|
|
|
}
|
|
|
- .actived{
|
|
|
+
|
|
|
+ .actived {
|
|
|
display: none;
|
|
|
}
|
|
|
- .choice{
|
|
|
+
|
|
|
+ .choice {
|
|
|
display: block;
|
|
|
}
|
|
|
- #btns{
|
|
|
+
|
|
|
+ #btns {
|
|
|
position: absolute;
|
|
|
right: 20px;
|
|
|
bottom: 20px;
|
|
|
}
|
|
|
+
|
|
|
#btns li {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
@@ -42,28 +54,35 @@
|
|
|
float: left;
|
|
|
margin-right: 7px;
|
|
|
}
|
|
|
- #btns .select{
|
|
|
+
|
|
|
+ #btns .select {
|
|
|
background: red;
|
|
|
}
|
|
|
|
|
|
- #prev,#next{
|
|
|
+ #prev,
|
|
|
+ #next {
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
position: absolute;
|
|
|
top: 215px;
|
|
|
opacity: 0.4;
|
|
|
+ display: none;
|
|
|
}
|
|
|
- #next{
|
|
|
+
|
|
|
+ #next {
|
|
|
right: 0;
|
|
|
}
|
|
|
- #prev span{
|
|
|
+
|
|
|
+ #prev span {
|
|
|
font-size: 40px;
|
|
|
}
|
|
|
- #next span{
|
|
|
+
|
|
|
+ #next span {
|
|
|
font-size: 40px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
+
|
|
|
<body>
|
|
|
<div id="container">
|
|
|
<div id="img-box">
|
|
|
@@ -88,21 +107,84 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<script>
|
|
|
+ var con = document.getElementById('container')
|
|
|
var btns = document.getElementById('btns')
|
|
|
var uli = btns.getElementsByTagName('li')
|
|
|
var imgs = document.getElementsByClassName('actived')
|
|
|
+ var next = document.getElementById('next')
|
|
|
+ var prev = document.getElementById('prev')
|
|
|
|
|
|
- for(var i=0;i<uli.length;i++){
|
|
|
+ var iNow = 0;
|
|
|
+ //循环按钮的每一项
|
|
|
+ for (var i = 0; i < uli.length; i++) {
|
|
|
+ //给点击的按钮 索引提取出来
|
|
|
uli[i].index = i
|
|
|
- uli[i].onclick = function(){
|
|
|
- for(var j=0;j<uli.length;j++){
|
|
|
- uli[j].className = ''
|
|
|
- imgs[j].className = 'actived'
|
|
|
- }
|
|
|
- this.className = 'select'
|
|
|
- imgs[this.index].className = 'actived choice'
|
|
|
+ //按钮的点击事件
|
|
|
+ uli[i].onclick = function () {
|
|
|
+ // for (var j = 0; j < uli.length; j++) {
|
|
|
+ // uli[j].className = ''
|
|
|
+ // imgs[j].className = 'actived'
|
|
|
+ // }
|
|
|
+ // iNow = this.index
|
|
|
+ // this.className = 'select'// this =>uli[i]
|
|
|
+ // imgs[this.index].className = 'actived choice'
|
|
|
+ //给全局图片的变量 赋值为当前点击的索引
|
|
|
+ iNow = this.index
|
|
|
+ //传参
|
|
|
+ myFun(iNow)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //点击下一个
|
|
|
+ next.onclick = function () {
|
|
|
+ iNow++;
|
|
|
+ console.log(iNow)
|
|
|
+ if (iNow > 4) {
|
|
|
+ iNow = 0
|
|
|
}
|
|
|
+ myFun(iNow)
|
|
|
}
|
|
|
+ //点击上一个
|
|
|
+ prev.onclick = function () {
|
|
|
+ iNow--;
|
|
|
+ if (iNow < 0) {
|
|
|
+ iNow = 4 //uli.length
|
|
|
+ }
|
|
|
+ myFun(iNow)
|
|
|
+ }
|
|
|
+ //清空样式，找到点击的索引设置样式
|
|
|
+ var myFun = function (xx) {
|
|
|
+ //清空所有样式
|
|
|
+ for (var i = 0; i < uli.length; i++) {
|
|
|
+ uli[i].className = ''
|
|
|
+ imgs[i].className = 'actived'
|
|
|
+ }
|
|
|
+ //给点击的按钮设置样式
|
|
|
+ uli[xx].className = 'select'
|
|
|
+ //找到点击按钮的索引 给相应的图片设置样式
|
|
|
+ imgs[xx].className = 'actived choice'
|
|
|
+ }
|
|
|
+
|
|
|
+ //鼠标划入在上面移动 onmousemove
|
|
|
+ //鼠标划出 onmouseout
|
|
|
+ //鼠标划入事件
|
|
|
+ con.onmousemove = function () {
|
|
|
+ next.style.display = 'block'
|
|
|
+ prev.style.display = 'block'
|
|
|
+ clearInterval(timer)
|
|
|
+ }
|
|
|
+ //鼠标划出事件
|
|
|
+ con.onmouseout = function () {
|
|
|
+ next.style.display = 'none'
|
|
|
+ prev.style.display = 'none'
|
|
|
+ timer = setInterval(function () {
|
|
|
+ next.onclick()
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ //设置定时器，自动执行点击下一个事件
|
|
|
+ var timer = setInterval(function () {
|
|
|
+ next.onclick()
|
|
|
+ }, 1000)
|
|
|
</script>
|
|
|
</body>
|
|
|
+
|
|
|
</html>
|
zsydgithub