阿坝州网站建设公司

用js写的简单轮播特效-创新互联

效果如下

创新互联是一家集网站建设,韶山企业网站建设,韶山品牌网站建设,网站定制,韶山网站建设报价,网络营销,网络优化,韶山网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

用js写的简单轮播特效

功能分析

1.每隔1秒换一张图片

2.鼠标移入停止切换、鼠标离开继续切换

3.鼠标移入到数字上面的时候,显示和数字对应的图片,并且停止切换,被选中的数字,背景显示橙色

4.鼠标离开数字,从该数字后面继续显示

代码如下





	
	
	
	
	
		div,
		img,
		ul,
		li {
			padding: 0px;
			margin: 0px;
		}
		
		.content {
			width: 480px;
			height: 300px;
			border: 1px solid red;
			margin: 100px auto;
		}
		
		img {
			width: 100%;
			height: 100%;
			padding-bottom: 10px;
		}
		
		ul li {
			list-style: none;
			float: left;
			border: 1px solid orange;
			height: 30px;
			width: 58px;
			text-align: center;
			line-height: 30px;
		}
	



	
		
		
    
			
  • 1
    • 
			
  • 2
    • 
			
  • 3
    • 
			
  • 4
    • 
			
  • 5
    • 
			
  • 6
    • 
			
  • 7
    • 
			
  • 8
    •
var oImg = document.getElementsByTagName('img')[0]; var count = 1; function changePic(){ count ++; if (count > 8) { count = 1; } oImg.src = 'img/'+count+ '.jpg'; } var interID = setInterval(changePic, 1000); //鼠标移入停止播放 oImg.onmouseover = function(){ clearInterval(interID); } //鼠标移出继续播放 oImg.onmouseout = function(){ //console.log(interID); clearInterval(interID); interID = setInterval(changePic, 1000); } //鼠标移入到数字上的时候,显示对应的图片 var oLi = document.getElementsByTagName('li'); //console.log(oLi.length); for (var num = 0; num < oLi.length; num++) { //给每个li标签增加属性，保存当前的索引位置 oLi[num].index = num; //移到到数字上,停止播放 oLi[num].onmouseover = function(){ //停止播放 clearInterval(interID); this.style.background = 'orange'; count = this.index; //调用循环播放图片方法 changePic(); } //移出时,继续从停止的地方播放 oLi[num].onmouseout = function(){ clearInterval(interID); interID = setInterval(changePic, 1000); this.style.background = 'white'; count = this.index; changePic(); } }

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


文章名称：用js写的简单轮播特效-创新互联
本文路径：http://azwzsj.com/article/dcjcgh.html

其他资讯