JS循环滚动频道首页幻灯片代码轮播滚动切换特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 JS循环滚动频道首页幻灯片代码轮播滚动切换特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为JS循环滚动频道首页幻灯片代码" />
<title>JS循环滚动频道首页幻灯片代码</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/lrtk.js"></script>
</head>
<body>
<!-- 代码 开始 -->
  <div id="playBox">
    <div class="pre"></div>
    <div class="next"></div>
    <div class="smalltitle">
      <ul>
        <li class="thistitle"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <ul class="oUlplay">
       <li><a href="#" target="_blank"><img src="images/1.jpg"</a></li>
       <li><a href="#" target="_blank"><img src="images/2.jpg"</a></li>
       <li><a href="#" target="_blank"><img src="images/3.jpg"</a></li>
       <li><a href="#" target="_blank"><img src="images/4.jpg"</a></li>
       <li><a href="#" target="_blank"><img src="images/5.jpg"</a></li>
       <li><a href="#" target="_blank"><img src="images/6.jpg"</a></li>
    </ul>
  </div>
</body>
</html>

JS代码(lrtk.js):

// ����ͼ�� �Ѽ����� www.lanrentuku.comfunction getStyle(obj,name){
	if(obj.currentStyle){
	return obj.currentStyle[name]}
else{
	return getComputedStyle(obj,false)[name]}
}
function getByClass(oParent,nClass){
	var eLe = oParent.getElementsByTagName('*');
	var aRrent = [];
	for(var i=0;
	i<eLe.length;
	i++){
	if(eLe[i].className == nClass){
	aRrent.push(eLe[i]);
}
}
return aRrent;
}
function startMove(obj,att,add){
	clearInterval(obj.timer)obj.timer = setInterval(function(){
	var cutt = 0;
	if(att=='opacity'){
	cutt = Math.round(parseFloat(getStyle(obj,att)));
}
else{
	cutt = Math.round(parseInt(getStyle(obj,att)));
}
var speed = (add-cutt)/4;
	speed = speed>0?Math.ceil(speed):Math.floor(speed);
	if(cutt==add){
	clearInterval(obj.timer)}
else{
	if(att=='opacity'){
	obj.style.opacity = (cutt+speed)/100;
	obj.style.filter = 'alpha(opacity:'+(cutt+speed)+')';
}
else{
	obj.style[att] = cutt+speed+'px';
}
}
}
,30)}
window.onload = function(){
	var oDiv = document.getElementById('playBox');
	var oPre = getByClass(oDiv,'pre')[0];
	var oNext = getByClass(oDiv,'next')[0];
	var oUlBig = getByClass(oDiv,'oUlplay')[0];
	var aBigLi = oUlBig.getElementsByTagName('li');
	var oDivSmall = getByClass(oDiv,'smalltitle')[0] var aLiSmall = oDivSmall.getElementsByTagName('li');
	function tab(){
	for(var i=0;
	i<aLiSmall.length;
	i++){
	aLiSmall[i].className = '';
}
aLiSmall[now].className = 'thistitle' startMove(oUlBig,'left',-(now*aBigLi[0].offsetWidth))}
var now = 0;
	for(var i=0;
	i<aLiSmall.length;
	i++){
	aLiSmall[i].index = i;
	aLiSmall[i].onclick = function(){
	now = this.index;
	tab();
}
}
oPre.onclick = function(){
	now-- if(now ==-1){
	now = aBigLi.length;
}
tab();
}
oNext.onclick = function(){
	now++ if(now ==aBigLi.length){
	now = 0;
}
tab();
}
var timer = setInterval(oNext.onclick,3000) //�������ʱ������ oDiv.onmouseover = function(){
	clearInterval(timer)}
oDiv.onmouseout = function(){
	timer = setInterval(oNext.onclick,3000) //�������ʱ������}
}

CSS代码(css.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
*{margin:0;padding:0;list-style:none;}
#divSmallBox{overflow:hidden;*display:inline;*zoom:1;width:10px;height:10px;margin:0 5px;border-radius:10px;background:#ffffff;}
#playBox{width:1000px;height:409px;margin:20px auto;background:#333;position:relative;overflow:hidden;}
#playBox .oUlplay{width:99999px;position:absolute;left:0;top:0;}
#playBox .oUlplay li{float:left;}
#playBox .pre{cursor:pointer;width:45px;height:45px;background:url(../images/l.png) no-repeat;position:absolute;top:190px;left:10px;z-index:10;}
#playBox .next{cursor:pointer;width:45px;height:45px;background:url(../images/r.png) no-repeat;position:absolute;top:190px;right:10px;z-index:10;}
#playBox .smalltitle{width:1000px;height:10px;position:absolute;bottom:15px;z-index:10}
#playBox .smalltitle ul{width:120px;margin:0 auto;}
#playBox .smalltitle ul li{width:10px;height:10px;margin:0 5px;border-radius:10px;background:#ffffff;float:left;overflow:hidden;*display:inline;*zoom:1;}
#playBox .smalltitle .thistitle{background:#69aaec;}

附件:下载该文件资源,减少时间成本(增值服务)