|
|
@@ -1,190 +0,0 @@
|
|
|
-<!--
|
|
|
- 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">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <title>Document</title>
|
|
|
- <link rel="stylesheet" href="font/iconfont.css">
|
|
|
- <style>
|
|
|
- * {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
-
|
|
|
- ul {
|
|
|
- list-style: none;
|
|
|
- }
|
|
|
-
|
|
|
- #container {
|
|
|
- width: 590px;
|
|
|
- height: 470px;
|
|
|
- margin: 100px auto;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .actived {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- .choice {
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- #btns {
|
|
|
- position: absolute;
|
|
|
- right: 20px;
|
|
|
- bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- #btns li {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- text-align: center;
|
|
|
- line-height: 20px;
|
|
|
- background: cyan;
|
|
|
- border-radius: 10px;
|
|
|
- color: white;
|
|
|
- float: left;
|
|
|
- margin-right: 7px;
|
|
|
- }
|
|
|
-
|
|
|
- #btns .select {
|
|
|
- background: red;
|
|
|
- }
|
|
|
-
|
|
|
- #prev,
|
|
|
- #next {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- position: absolute;
|
|
|
- top: 215px;
|
|
|
- opacity: 0.4;
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- #next {
|
|
|
- right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- #prev span {
|
|
|
- font-size: 40px;
|
|
|
- }
|
|
|
-
|
|
|
- #next span {
|
|
|
- font-size: 40px;
|
|
|
- }
|
|
|
- </style>
|
|
|
-</head>
|
|
|
-
|
|
|
-<body>
|
|
|
- <div id="container">
|
|
|
- <div id="img-box">
|
|
|
- <img class="actived choice" src="image/1.jpg" alt="">
|
|
|
- <img class="actived" src="image/2.jpg" alt="">
|
|
|
- <img class="actived" src="image/3.jpg" alt="">
|
|
|
- <img class="actived" src="image/4.jpg" alt="">
|
|
|
- <img class="actived" src="image/5.jpg" alt="">
|
|
|
- </div>
|
|
|
- <ul id="btns">
|
|
|
- <li class="select">1</li>
|
|
|
- <li>2</li>
|
|
|
- <li>3</li>
|
|
|
- <li>4</li>
|
|
|
- <li>5</li>
|
|
|
- </ul>
|
|
|
- <div id="prev">
|
|
|
- <span class="iconfont icon-shangyige"></span>
|
|
|
- </div>
|
|
|
- <div id="next">
|
|
|
- <span class="iconfont icon-xiayige"></span>
|
|
|
- </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')
|
|
|
-
|
|
|
- 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'
|
|
|
- // }
|
|
|
- // 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