图片轮播+左右点击+圆点

最新推荐文章于 2020-01-07 12:19:46 发布

miyacnn

最新推荐文章于 2020-01-07 12:19:46 发布

阅读量621

点赞数

分类专栏： web前端技术文章标签：轮播 js ViewUI

本文链接：https://blog.csdn.net/miyacnn/article/details/84537355

版权

web前端技术专栏收录该内容

58 篇文章 0 订阅

订阅专栏

最近做了一个活动页面需要做到轮播效果，并且有左右点击，和上面的tab切换类似的。

就用原生代码写

html结果

       <div class="img33" id="carousel">
        	<img src="images/img01.jpg" />
        	<a href="###" id="oleft" class="left"></a>
            <a href="###" id="oright" class="right"></a>
            <ul>
            	<li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>

js代码：

<script type="text/javascript">
$(document).ready(function() {
	var oCar=document.getElementById("carousel");
	var oLeft=document.getElementById("oleft");
	var oRight=document.getElementById("oright");
	var oImg=oCar.getElementsByTagName("img")[0];
	var aLi=document.getElementsByTagName("li");
	var arrUrl = [ 'images/img01.jpg', 'images/img02.jpg','images/img03.jpg','images/img04.jpg','images/img05.jpg' ];
	var num=0;
	var timer = null;
	//定时器
	function autoPlay(){
		timer = setInterval(function(){
			num++;
			num%=arrUrl.length;
			fnTab();
		}, 3000);
	}
	// autoPlay();
	//有用户来操作的定时器，开启之前一定要先关闭
	setTimeout( autoPlay, 1000 );
	
	oCar.onmouseover = function (){
		clearTimeout( timer );
	};
	oCar.onmouseout = autoPlay;
	//初始化
	function fnTab(){
		oImg.src = arrUrl[num];
		for( var i=0; i<aLi.length; i++ ){
			aLi[i].className = '';
		}
		aLi[num].className = 'active';
	}
	fnTab();
	//鼠标放上去显示本块内容
	for( var i=0; i<aLi.length; i++ ){
		aLi[i].index = i;			// 索引值
		aLi[i].onmouseover = function (){
			num = this.index;
			fnTab();
		};
	}
	//左右轮播点击事件
	oLeft.οnclick= function(){
		num --;
		if(num == -1){
			num = arrUrl.length-1
		}
		fnTab();
	};
	oRight.onclick = function(){
		num ++
		if(num == arrUrl.length){
			num = 0
		}
		fnTab();
	}
});
</script>

css代码

.img33 ul{ position:absolute; top:5px; left:0; width:1021px; height:66px;}
.img33 ul li{ float:left; display:inline; width:200px; height:66px; line-height:66px; cursor:pointer; text-align:center; font-size:28px; float:left; display:inline; text-decoration:none; font-weight:700; color:#ffa100}
.img33 ul li:hover, .img33 ul .active{ color:#fff10a; font-size:32px; font-weight:700;}
.img33 img{ width:1021px; height:648px; border:none;}
.img33 .left{ position:absolute; top:300px; left:2px; background:url(../images/left.jpg) no-repeat; width:48px; height:92px;}
.img33 .right{ position:absolute; top:300px; right:2px; background:url(../images/right.jpg) no-repeat; width:48px; height:92px;}