• 资源云提供最新最酷的PC电脑软件工具、单机大型游戏MOD、网站插件、源码模板、免费课程、视频教程、手机应用、精彩电影、游戏工具等下载资源,更新快,种类全,所有软件源码均经过检测,安全无毒,为广大网民提供贴心,省心,放心的免费软资源下载网站。
【腾讯云】爆款2核2G云服务器首年40元,企业首购最高获赠300元京东卡

一款比较好看的javascript轮播图效果

资源库 资源库 2022-04-23 实用特效 65
直达获取地址
腾讯云服务器首年40

一款比较好看的javascript轮播图效果

RbsIvP.gif

完整代码下载:https://wwp.lanzouy.com/il7hc03mi5ti

window.onload=function ()
{
	var oDiv=document.getElementById('box');
	var aPicLi=document.getElementById('pic_list').getElementsByTagName('li');
	var aTxtLi=document.getElementById('text_list').getElementsByTagName('li');
	var oIcoUl=document.getElementById('ico_list').getElementsByTagName('ul')[0];
	var aIcoLi=document.getElementById('ico_list').getElementsByTagName('li');
	var oBtnPrev=document.getElementById('btn_prev');
	var oBtnNext=document.getElementById('btn_next');
	var iNowUlLeft=0;
	var iNow=0;
	var i=0;
	
	oBtnPrev.onclick=function ()
	{
		if(iNowUlLeft>0)
		{
			iNowUlLeft--;

			fixUlLeft();
		}
	};
	
	function fixUlLeft()
	{
		oBtnPrev.className=iNowUlLeft==0?'btn':'btn showBtn';
		oBtnNext.className=iNowUlLeft==(aIcoLi.length-7)?'btn':'btn showBtn';
		miaovStartMove(oIcoUl, {left: -aIcoLi[0].offsetWidth*iNowUlLeft}, MIAOV_MOVE_TYPE.BUFFER);
	}
	
	oBtnNext.onclick=function ()
	{
		if(iNowUlLeft<aIcoLi.length-7)
		{
			iNowUlLeft++;
			
			fixUlLeft();
		}
	};
	
	for(i=0;i<aIcoLi.length;i++)
	{
		aIcoLi[i].index=i;
		aIcoLi[i].onclick=function ()
		{
			if(iNow==this.index)
			{
				return;
			}
			
			iNow=this.index;
			
			tab();
		};
	}
	
	function tab()
	{
		for(i=0;i<aIcoLi.length;i++)
		{
			aIcoLi[i].className='';
			aTxtLi[i].getElementsByTagName('h2')[0].className='';
			aPicLi[i].style.filter='alpha(opacity:0)';
			aPicLi[i].style.opacity=0;
			miaovStopMove(aPicLi[i]);
		}
		aIcoLi[iNow].className='active';
		aTxtLi[iNow].getElementsByTagName('h2')[0].className='show';
		miaovStartMove(aPicLi[iNow], {opacity: 100}, MIAOV_MOVE_TYPE.BUFFER);
	}
	
	function autoPlay()
	{
		iNow++;
		
		if(iNow>=aIcoLi.length)
		{
			iNow=0;
		}
		
		if(iNow<iNowUlLeft)
		{
			iNowUlLeft=iNow;
		}
		else if(iNow>=iNowUlLeft+7)
		{
			iNowUlLeft=iNow-6;
		}
		
		fixUlLeft();
		tab();
	}
	
	var timer=setInterval(autoPlay, 3000);
	
	oDiv.onmouseover=function ()
	{
		clearInterval(timer);
	};
	
	oDiv.onmouseout=function ()
	{
		timer=setInterval(autoPlay, 3000);
	};
};
body,ul,h2{margin:0;padding:0; font:12px/20px Tahoma,"hiragino sans gb",Helvetica,Arial;}
img{border:none;}
li{list-style:none;}
body{background:#101010;}
#box{width:660px;height:330px;position:relative;overflow:hidden;margin:60px auto 0;}
#pic_list{position:relative;z-index:1;}
#pic_list li{position:absolute;left:0;top:0;opacity:0;fliter:alpha(opacity=0);z-index:1;}
.mark{height:90px;width:660px;background:#000;position:absolute;left:0;bottom:0;opacity:0.3;filter:alpha(opacity=30);}
#text_list{position:absolute;bottom:60px;left:50px;position:absolute;z-index:5;height:20px;overflow:hidden;}
#text_list h2{display:none;}
#text_list .show{display:block;}
#text_list a{color: #FFFFFF;font-family: "Microsoft YaHei";font-size: 18px;font-weight: normal;text-decoration:none;}
#ico_list{position:absolute;bottom:10px;left:12px;width:525px;overflow:hidden;height:46px;z-index:3;}
#ico_list ul{width:1050px;position:absolute;left:0;top:0;}
#ico_list li{width:75px;float:left;}
#ico_list li a{width:68px;padding-top:6px;display:block;}
#ico_list li a img{border: 2px solid #DFE8E4; height:36px;width:64px;background:#040303;opacity:0.7;filter:alpha(opacity=70);}
#ico_list .active{background:url(../img/a_hover.gif) no-repeat center 0;}
#ico_list .active img{opacity:1;filter:alpha(opacity=100);border: 3px solid #fff; height:34px;width:62px;}
.btn{background:url(../img/btn.gif) no-repeat;height:38px;width:38px;position: absolute;bottom:11px; opacity:0.5;filter:alpha(opacity=50);cursor:default;z-index:3;}
.showBtn{ opacity:1;filter:alpha(opacity=100);cursor:pointer;z-index:4;}
#btn_prev{right:56px;}
#btn_next{right:20px;background-position:right 0;}
<div id="box">
	<ul id="pic_list">
		<li style="z-index:2;opacity:1;fliter:alpha(opacity=100);">
			<a href="http://www.miaov.com"><img src="img/pic_1.jpg" alert="资源云-www.ymku.vip"/></a>
		</li>
		<li>
			<a href="http://www.miaov.com"><img src="img/pic_2.jpg" alert="资源云-www.ymku.vip"/></a>
		</li>
		<li>
			<a href="http://www.miaov.com"><img src="img/pic_3.jpg" alert="资源云-www.ymku.vip"/></a>
		</li>
		<li>
			<a href="http://www.miaov.com"><img src="img/pic_4.jpg" alert="资源云-www.ymku.vip"/></a>
		</li>
		<li>
			<a href="http://www.miaov.com"><img src="img/pic_5.jpg" alert="资源云-www.ymku.vip"/></a>
		</li>
		<li>
			<a href="http://www.miaov.com"><img src="img/pic_6.jpg" alert="资源云-www.ymku.vip"/></a>
		</li>
		<li>
			<a href="http://www.miaov.com"><img src="img/pic_7.jpg" alert="资源云-www.ymku.vip"/></a>
		</li>
		<li>
			<a href="http://www.miaov.com"><img src="img/pic_8.jpg" alert="资源云-www.ymku.vip"/></a>
		</li>
		<li>
			<a href="http://www.miaov.com"><img src="img/pic_9.jpg" alert="资源云-www.ymku.vip"/></a>
		</li>
		<li>
			<a href="http://www.miaov.com"><img src="img/pic_10.jpg" alert="资源云-www.ymku.vip"/></a>
		</li>
		<li>
			<a href="http://www.miaov.com"><img src="img/pic_11.jpg" alert="资源云-www.ymku.vip"/></a>
		</li>
		<li>
			<a href="http://www.miaov.com"><img src="img/pic_12.jpg" alert="资源云-www.ymku.vip"/></a>
		</li>
		<li>
			<a href="http://www.miaov.com"><img src="img/pic_13.jpg" alert="资源云-www.ymku.vip"/></a>
		</li>
		<li>
			<a href="http://www.miaov.com"><img src="img/pic_14.jpg" alert="资源云-www.ymku.vip"/></a>
		</li>
	</ul>
	<div class="mark"></div>

	<ul id="text_list">
		<li><h2 class="show"><a href="#">《武则天秘史》[至22集]姐姐与皇上偷情,媚娘抓奸在床...</a></h2></li>
		<li><h2><a href="#">《无底洞》金钱、美女、权利、复仇等欲望让人不可自拔...</a></h2></li>
		<li><h2><a href="#">《巴黎宝贝》邓超巴黎当奶爸,上演基情、卖萌、跨国恋..</a></h2></li>
		<li><h2><a href="#">《我的女儿是花儿》[至3集]“富二代”冰王子恋上贫家女..</a></h2></li>
		<li><h2><a href="#">《法证先锋3》[至26集]写字楼惊现“女僵尸”尸体!</a></h2></li>
		<li><h2><a href="#">《非常了得》孟非郭德纲大曝台下私生活,内地Hold姐来挑战</a></h2></li>
		<li><h2><a href="#">第二届九分钟电影11月20日独家首映 视觉盛宴恭迎各位看官</a></h2></li>
		<li><h2><a href="#">《快女微电影》 洪辰脸伤痊愈 快女微电影收官作复拍</a></h2></li>
		<li><h2><a href="#">《称心如意》京城第一“育婴男”Hold住全场 萝莉热舞走光</a></h2></li>
		<li><h2><a href="#">《男人帮》[全30集]悲喜双响炮,一个完美结局</a></h2></li>
		<li><h2><a href="#">《辛亥革命》成龙、赵文瑄、李冰冰、胡歌演绎革命腥风血雨</a></h2></li>
		<li><h2><a href="#">《李献计历险记》房祖名患差时症为寻女友开启超时空冒险</a></h2></li>
		<li><h2><a href="#">Justin bieber女友动感热单全球首发。</a></h2></li>
		<li><h2><a href="#">第八届中国(重庆)国际园林博览会</a></h2></li>
	</ul>
	<div id="ico_list">
		<ul>
			<li class="active"><a href="#"><img src="img/ico_1.jpg" alt="资源云-www.ymku.vip"/></a></li>
			<li><a href="#"><img src="img/ico_2.jpg" alt="资源云-www.ymku.vip"/></a></li>
			<li><a href="#"><img src="img/ico_3.jpg" alt="资源云-www.ymku.vip"/></a></li>
			<li><a href="#"><img src="img/ico_4.jpg" alt="资源云-www.ymku.vip"/></a></li>
			<li><a href="#"><img src="img/ico_5.jpg" alt="资源云-www.ymku.vip"/></a></li>
			<li><a href="#"><img src="img/ico_6.jpg" alt="资源云-www.ymku.vip"/></a></li>
			<li><a href="#"><img src="img/ico_7.jpg" alt="资源云-www.ymku.vip"/></a></li>
			<li><a href="#"><img src="img/ico_8.jpg" alt="资源云-www.ymku.vip"/></a></li>
			<li><a href="#"><img src="img/ico_9.jpg" alt="资源云-www.ymku.vip"/></a></li>
			<li><a href="#"><img src="img/ico_10.jpg" alt="资源云-www.ymku.vip"/></a></li>
			<li><a href="#"><img src="img/ico_11.jpg" alt="资源云-www.ymku.vip"/></a></li>
			<li><a href="#"><img src="img/ico_12.jpg" alt="资源云-www.ymku.vip"/></a></li>
			<li><a href="#"><img src="img/ico_13.jpg" alt="资源云-www.ymku.vip"/></a></li>
			<li><a href="#"><img src="img/ico_14.jpg" alt="资源云-www.ymku.vip"/></a></li>
		</ul>
	</div>
	<a href="#" id="btn_prev" class="btn"></a>
	<a href="#" id="btn_next" class="btn showBtn"></a>
</div>



  • 标题:一款比较好看的javascript轮播图效果
  • 标签:
  • 免责声明:

    注意:本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!