轮播图

最新推荐文章于 2022-03-21 23:18:10 发布

chubian7153

最新推荐文章于 2022-03-21 23:18:10 发布

阅读量110

点赞数

原文链接：https://my.oschina.net/u/2408700/blog/3023084

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
					padding:0;
					margin:0;
				}
				li{list-style:none;}
				.wrapper{
					position: relative;
					width:400px;
					height:250px;
					margin:100px auto 0;
					overflow: hidden;
				}
				.wrapper .sliderPage{
					position: absolute;
					left:0;
					top:0;
					height:250px;
					width:2000px
				}
				.wrapper .sliderPage li{
					width:400px;
					height:250px;
					float: left;
				}
				.wrapper .btn{
					position: absolute;
					line-height: 40px;
					text-align: center;
					width:40px;
					height:40px;
					color:#fff;
					opacity: .3;
					background: #000;
					transition: opacity .3s;
					top:50%;
					cursor: pointer;
					margin-top:-20px;
				}
				.wrapper .btn:hover{
					opacity: .52;
				}
				.wrapper .leftBtn{
					left:10px;
				}
				.wrapper .rightBtn{
					right:10px;
				}
				.wrapper .sliderIndex{
					position: absolute;
					bottom:15px;
					width:100%;
					text-align: center;
					cursor:pointer
				}
				.wrapper .sliderIndex span{
					display: inline-block;
					width:8px;
					height:8px;
					background: #ccc;
					border-radius:50%;
					margin-right:10px;
				}
				.wrapper .sliderIndex span.action{
					background: #f40
				}
    </style>
</head>

<body>
    <div class="wrapper">
			<ul class="sliderPage">
				<li>
					<img src="img/1.jpg"/>
				</li>
				<li>
					<img src="img/2.jpg"/>
				</li>
				<li>
					<img src="img/3.jpg"/>
				</li>
				<li>
					<img src="img/4.jpg"/>
				</li>
				<li>
					<img src="img/1.jpg"/>
				</li>
			</ul>
			<div class="btn leftBtn">&lt;</div>
			<div class="btn rightBtn">&gt;</div>
			<div class="sliderIndex">
				<span class="action"></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<script src="move.js"></script>
    <script>

				var timer = null;
				var sliderPage = document.getElementsByClassName('sliderPage')[0];
				var moveWidth = sliderPage.children[0].offsetWidth;
				var num = sliderPage.children.length-1
				var leftBtn = document.getElementsByClassName('leftBtn')[0];
				var rightBtn = document.getElementsByClassName('rightBtn')[0];
				var oSpanArray = document.getElementsByClassName('sliderIndex')[0].getElementsByTagName('span')
				var lock = true;
				var index = 0;
				leftBtn.onclick=function(){
					autoMove('right->left');
				}
				rightBtn.onclick=function(){
					autoMove('left->right')
				}
				for(var i=0;i<oSpanArray.length;i++){
					(function(myIndex){
						oSpanArray[i].onclick = function(){
							lock = false;
							clearTimeout(timer);
							index=myIndex
							startMove(sliderPage,{left:-index*moveWidth},function(){
								lock=true;
								timer=setTimeout(autoMove,1500)
								changeIndex(index)
							});
						}
					})(i)
				
				}
				function autoMove(direction){
					if(lock){
						lock = false;
						clearTimeout(timer);	
						if(!direction || direction == 'left->right'){
							index++;
							startMove(sliderPage,{left:sliderPage.offsetLeft - moveWidth},function(){
								if(sliderPage.offsetLeft == - num * moveWidth){
									index=0
									sliderPage.style.left='0px'
								}
								timer = setTimeout(autoMove,1500)
								lock = true;
								changeIndex(index);
							})
						}else if(direction == 'right->left'){
								if(sliderPage.offsetLeft==0){
									sliderPage.style.left=-num*moveWidth+'px'
									index=num;
								}
								index--;
								startMove(sliderPage,{left:sliderPage.offsetLeft + moveWidth},function(){
									timer = setTimeout(autoMove,1500)
									lock = true;
									changeIndex(index)
								})
							}
						}
					}
					function changeIndex(_index){
						for(var i=0;i<oSpanArray.length;i++){
							oSpanArray[i].className = '';
						}
						oSpanArray[_index].className = 'action'
					}
				timer = setTimeout(autoMove,1500)
	</script>
</body>
</html>

function getStyle (obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    }else {
        return window.getComputedStyle(obj, false)[attr];
    }
}
        
function startMove (obj, data, func) {         
    clearInterval(obj.timer);
    var iSpeed;
    var iCur;
    var name;            
    startTimer = obj.timer = setInterval(function () {
        var bStop = true;
        for (var attr in data) {
            if (attr === 'opacity') {
                name = attr;
                iCur = parseFloat(getStyle(obj, attr)) * 100;
            }else {
                iCur = parseInt(getStyle(obj, attr));
            }
            iSpeed = ( data[attr] - iCur) / 8;

            if (iSpeed > 0) {
                iSpeed = Math.ceil(iSpeed);
            }else {
                iSpeed = Math.floor(iSpeed);
            }

            if (attr === 'opacity') {
                obj.style.opacity = ( iCur + iSpeed ) / 100; 
            }else {
                obj.style[attr] = iCur + iSpeed + 'px';
            }
            if ( Math.floor(Math.abs(data[attr] - iCur)) != 0 ) {
                bStop = false;
            }
        }
        if (bStop) {					
            clearInterval(obj.timer);
            if (name === 'opacity') {
                obj.style.opacity = data[name] / 100;
            }
            func();
        }
    },30);
}

转载于:https://my.oschina.net/u/2408700/blog/3023084

chubian7153

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w...
复制链接

扫一扫