怎么使用js实现左右轮播图切换

qq_36332722 2016-11-25 10:32:42

灵活运用js实现左右轮播图切换

...全文

735 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

当作看不见 2016-11-25

打赏
举报

像这种问题，建议去博客搜一下相关的博客，你会发现有很多实现。无论是原生js还是jquery 。可以对比不同的方法。学的到更多

送终鸡 2016-11-25

打赏
举报

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>mv</title>
<style>
body,ul,ol{margin:0;padding:0;}
li{ list-style:none;}
img{ border:none; vertical-align:top; }
#box{width:470px;height:150px; position:relative; margin:30px auto; overflow:hidden;}
ul{ width:470px; position:absolute;left:0; top:0; z-index:1;}
ul li{width:470px; position:absolute; top:0;}
ol{z-index:2; width:120px; position:absolute;right:10px; bottom:10px;}
ol li{ width:20px;height:20px; float:left;margin:0 2px; display:inline; background:#fff; color:#f60; line-height:20px; text-align:center;}
ol .active{ background:#f60; color:#fff;}
</style>
<script type="text/javascript" src="move.js"></script>
<script>
window.onload = function(){
	var oUl = document.getElementsByTagName('ul')[0];
	var aLiUl = oUl.getElementsByTagName('li');
	
	var oOl = document.getElementsByTagName('ol')[0];
	var aLiOl = oOl.getElementsByTagName('li');
	
	var oneWidth = aLiUl[0].offsetWidth;
	var iNow = 0;
	var bBtn = true;
	
	for(var i=1;i<aLiUl.length;i++){
		aLiUl[i].style.left = oneWidth + 'px';
	}
	
	
	for(var i=0;i<aLiOl.length;i++){
		aLiOl[i].index = i;
		aLiOl[i].onmouseover = function(){
			
			if(bBtn){
				bBtn = false;
			for(var i=0;i<aLiOl.length;i++){
				aLiOl[i].className = '';
			}
			this.className = 'active';
			
			if(iNow < this.index){
				aLiUl[this.index].style.left = oneWidth + 'px';
				startMove( aLiUl[iNow] , { left : - oneWidth } );
			}
			else if(iNow > this.index){
				aLiUl[this.index].style.left = - oneWidth + 'px';
				startMove( aLiUl[iNow] , { left :  oneWidth } );
			}
			
			startMove( aLiUl[this.index] ,{ left : 0 },function(){
				bBtn = true;
				
			} );
			iNow = this.index;
			
			}
			
		};
	}
	
	
};
</script>
</head>
<body>
<div id="box">
	<ul>
    	<li><img src="images/1.jpg" alt=""/></li>
        <li><img src="images/2.jpg" alt=""/></li>
        <li><img src="images/3.jpg" alt=""/></li>
        <li><img src="images/4.jpg" alt=""/></li>
        <li><img src="images/5.jpg" alt=""/></li>
    </ul>
    <ol>
    	<li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</div>
</body>
</html>

qq_36332722 2016-11-25

打赏
举报

欢迎大家的评论和提供方法啊！谢谢大家了

本文实例为大家分享了vue使用swiper实现左右滑动切换图片的具体代码，供大家参考，具体内容如下使用npm 安装vue-awesome-swiper npm install vue-awesome-swiper --save 在main.js中引用 import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.user(VueAwesomeSwiper) import 'swiper/dist/css/swiper.css' 在组件中使用