<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
body,ul,li{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
img{
display: block;
border: none;
}
#scrollBanner{
width: 900px;
height: 300px;
overflow: hidden;
position: relative;
}
#scrollList {
position: absolute;
height: 300px;
}
#scrollList li{
float: left;
width: 900px;
height: 300px;
}
#scrollList img{
width: 900px;
height: 300px;
}
#btns div{
position: absolute;
top: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
background: #000;
opacity: .3;
line-height: 50px;
text-align: center;
font-size: 50px;
color: white;
cursor: pointer;
}
#btns div:first-child{
left:50px;
}
#btns div:last-child{
right:50px;
}
#nums{
position: absolute;
bottom: 20px;
right: 20px;
}
#nums li{
float: left;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
background: white;
color: red;
cursor: pointer;
margin:0 10px;
border-radius: 50%;
}
#nums li.hover,#nums li:hover{
background: red;
color: white;
}
</style>
</style>
</head>
<body>
<div id="scrollBanner">
<ul id="scrollList">
<li><img src="../../img/img/0.JPG"></li>
<li><img src="../../img/img/1.JPG"></li>
<li><img src="../../img/img/2.JPG"></li>
<li><img src="../../img/img/0.JPG"></li>
</ul>
<div id="btns">
<div><</div>
<div>></div>
</div>
<ul id="nums">
<li class="hover">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
<script type="text/javascript">
var oScrollBanner = document.getElementById("scrollBanner");
var oScrollList = document.getElementById("scrollList");
var aList =oScrollList.children;
var perWidth = aList[0].offsetWidth;
oScrollList.style.width = perWidth * aList.length + "px";
var i = 0;
var timer = setInterval(function(){
move();
},3000);
function move(){
i++;
if(i==aList.length){
oScrollList.style.left = 0;
i = 1;
}
if(i==-1){
oScrollList.style.left = -perWidth * (aList.length-1) + "px";
i = aList.length - 2;
}
//控制角标的变化
for(var j = 0; j < aNumsList.length; j++){
aNumsList[j].className = "";
}
if(i==aList.length - 1){
aNumsList[0].className = "hover";
}else{
aNumsList[i].className = "hover";
}
startMove(oScrollList,{left:-perWidth*i});
}
//左右按钮实现图片切换
var oBtns = document.getElementById("btns");
var oPrev = oBtns.children[0];
var oNext = oBtns.children[1];
oNext.onclick = function(){
move();
}
oPrev.onclick = function(){
i-=2;
move();
}
oScrollBanner.onmouseover = function(){
clearInterval(timer);
}
oScrollBanner.onmouseout = function(){
timer = setInterval(function(){
move();
},3000);
}
//角标变化
var oNums = document.getElementById("nums");
var aNumsList = oNums.children;
for(let j = 0; j < aNumsList.length; j++){
aNumsList[j].onclick = function(){
i = j-1;
move();
}
}
function startMove(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true; //假设所有属性都达到目标值
for(var attr in json) {
var iTarget = json[attr];
if(attr == "opacity"){
var iCur = parseInt(getStyle(obj, attr)*100);
}else{
var iCur = parseInt(getStyle(obj, attr));
}
var iSpeed = (iTarget - iCur) / 7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(attr == "opacity"){
obj.style.opacity = (iCur + iSpeed)/100;
obj.style.filter = "alpha(opacity="+(iCur + iSpeed)+")";
}else{
obj.style[attr] = iCur + iSpeed + "px";
}
//只要有一个达到目标值,定时器就会被清除,会导致部分属性没有达到目标值
//所有属性都达到目标值时,清除定时器
if(iCur != iTarget) { //假设是否成立由此判断
flag = false;
}
}
if(flag) { //如果假设成立,清除定时器
clearInterval(obj.timer);
if(fn) {
fn();
}
}
}, 20)
}
//获取属性值
function getStyle(obj, attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
}
return getComputedStyle(obj, null)[attr];
}
</script>
</html>
完美运动轮播图(无缝)
最新推荐文章于 2021-10-02 00:23:23 发布