<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul,ol {
list-style: none;
}
img {
display: block;
}
.slider {
width: 490px;
height: 170px;
border: 1px solid #ccc;
margin: 100px auto;
padding: 5px;
position: relative;
}
.inner {
width: 100%;
height: 100%;
background-color: pink;
position: relative;
overflow: hidden;
}
.inner ul {
width: 1000%;
position: absolute;
top: 0;
left: 0;
}
.inner ul li {
float: left;
}
.slider ol {
position: absolute;
left: 50%;
bottom: 10px;
}
.slider ol li {
float: left;
width: 18px;
height: 18px;
background-color: #fff;
margin-right: 10px;
text-align: center;
line-height: 18px;
cursor: pointer;
}
.slider ol li.current {
background-color: orange;
}
</style>
</head>
<body>
<div class="slider" id="slider">
<div class="inner">
<ul id="box">
<li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
</ul>
</div>
<ol id="bt">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
<script src="common.js"></script>
<script>
var index = 0;
var moveTimer = null;
var olist = $id("bt").children;
var ulist = $id("box").children;
moveTimer = setInterval(autoPlay,1500);
function autoPlay(){
index++;
for(var i = 0;i < olist.length;i++){
olist[i].className = "";
}
if(index == olist.length){
index = 0;
}
olist[index].className = "current";
move($id("box"),-index * ulist[0].offsetWidth);
}
for(let i = 0;i < olist.length;i++){
olist[i].onmouseover = function(){
clearInterval(moveTimer);
index = i - 1;
autoPlay();
}
olist[i].onmouseout = function(){
moveTimer = setInterval(autoPlay,1500);
}
}
function move(obj,target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (target - obj.offsetLeft) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(target == obj.offsetLeft){
clearInterval(obj.timer);
}else{
obj.style["left"] = obj.offsetLeft + speed + "px";
}
},30);
}
</script>
引入的common.js文件
//定义一个函数 功能是根据id查找页面元素
function $id( id ){
return document.getElementById( id );
}
//创建元素
function create(ele){
return document.createElement(ele);
}
//获取任意区间的整数值
function rand( min , max ){
return Math.round( Math.random()*(max-min) + min );
}
//随机获取六位十六进制颜色值
function getColor(){
var str = "0123456789abcdef";
var color = "#";
for( var i = 1 ; i <= 6 ; i++ ){
color += str.charAt( rand(0,15) );
}
return color;
}
//自定义日期时间格式
function dateToString(now,sign){
//默认日期的间隔符为 - 如果用户传递的是/ 就使用/ . 如果用户不传递任何参数 默认是-
sign = sign || "-";
var y = now.getFullYear();
var m = toTwo( now.getMonth()+ 1 ) ;
var d = toTwo( now.getDate() );
var h = toTwo( now.getHours() );
var _m = toTwo( now.getMinutes() );
var s = toTwo( now.getSeconds() ) ;
var str = y + sign + m + sign + d + " " + h + ":" + _m + ":" + s;
return str;
}
//判断得到的结果是否小于10 如果小于10，前面拼接0
function toTwo(val){
return val < 10 ? "0"+val : val;
}
//验证码 ： 字母和数字组成
function yzm(){
//小写字母 大写字母 数字
//48--122 随机获取一个code值 判断编码值如果在 58--64 91--96 两个区间，就重新抽取
//如果不在上面的两个区间内，就将code转成字符， 拼接到字符串中
var str = "";//拼接6位的验证码
for( var i = 1 ; i <= 6 ; i++ ){
var code = rand( 48 , 122 );
if( code >= 58&&code <= 64 || code >= 91 && code <= 96 ){
//就重新抽一次
i--;
}else{
var ch = String.fromCharCode( code );
str += ch;
}
}
return str;
}
//碰撞函数
function pz(d1,d2){
R1 = d1.offsetWidth+d1.offsetLeft;
L1 = d1.offsetLeft;
T1 = d1.offsetTop;
B1 = d1.offsetHeight + d1.offsetTop;
R2 = d2.offsetWidth+d2.offsetLeft;
L2 = d2.offsetLeft;
T2 = d2.offsetTop;
B2 = d2.offsetHeight + d2.offsetTop;
//如果碰不上 返回false
if( R1 < L2 || B1 < T2 || T1 > B2 || L1 > R2 ){
return false;
}else{
return true;
}
}
原文地址：https://www.cnblogs.com/Leslie-Cheung1584304774/p/10529429.html
时间： 2024-10-24 12:48:02