<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>风景网站</title>
<script src="jquery-3.2.1.min.js"></script>
<style>
*{
margin:0px;padding:0px;
}
#tab{
overflow:hidden;
width:400px;
height:250px;
position:relative;
}
img{
float:lfet;
}
</style>
<script>
var interval;
var pos = 0;
window.onload = function(){
/*
* 获取对象
*/
var images = document.getElementsByTagName('img');
var tab = document.getElementById('tab');
images[0].parentNode.innerHTML += images[0].outerHTML; // 过度图片
/*
* 执行效果
*/
run(images); // 初始化运行轮播图
// 鼠标移入暂停轮播
tab.onmouseover = function(){
clearInterval(interval);
}
// 鼠标移出,继续轮播
tab.onmouseout = function(){
run(images);
}
}
var run = function(images){
var width = allWitch(images[0]) + 12; // 获取元素的真实宽度(包括 width padding-left and right border-left and right margin-left and right)
var len = images.length; // 获取该元素的总数量
var m = 0; // 次数标识,代替长度标识
widthT = width * (len - 1); // 获取总宽度
// 进行循环
interval = setInterval(function(){
var mL = images[0].style.marginLeft;
if(Math.abs(parseFloat(mL)) >= widthT || !mL){
images[0].style.marginLeft = '0px';
}else{
var num = 100; // 设定帧频
var i = 0; // ci shu ji lu
var w = width / num;
var l = setInterval(function(){
i++;
if(i >= 100){
clearInterval(l); // 删除事件
}else{
mL = images[0].style.marginLeft;
images[0].style.marginLeft = (parseFloat(mL) - w) + 'px';
}
},20);
}
// 延迟执行
setTimeout(function(){
m++;
// 判断次数,是否已经重置
if(m >= len){
m = 1;
images[0].style.marginLeft = '0px'; // 重置图片(神不知鬼不觉的第一和第四切换)
}
},(20 * num));
},4000) // 设定时间 (毫秒)
}
// 获取对象的真实宽度
function allWitch(obj){
var mL = parseFloat(obj.marginLeft ? obj.marginLeft : 0);
var mR = parseFloat(obj.marginRight ? obj.marginRight : 0);
var width = obj.offsetWidth;
width = width + mL + mR;
return width;
}
</script>
</head>
<body>
<div id="tab">
<div style='width:800px;'>
<img src='https://pic2.zhimg.com/50/7995656af01fde733f6de210d24877d7_hd.jpg' style='width:400px; height:250px;'>
<img src='https://pic3.zhimg.com/90/v2-d9e93a3b23f6fe8ff5bfbb07317dce9f_250x0.jpg' style='width:400px; height:250px;'>
<img src='https://pic3.zhimg.com/90/258463ec3_250x0.jpg' style='width:400px; height:250px;'>
</div>
</div>
</body>
<html>
真荣幸因为这个 js 轮播可以增加一个新的分类。我在网上找了找,不知道是不是没有真实宽度,还是啥?反正效果达到了也就懒得改了,如果需要改动自己再进行改动,反正提供的都只是一个思路,如何完成终究还是自己来做会更舒心一些。