原生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=GBK">
<title>原生JS左右滚动焦点图</title>
<link href="css/zzsc.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="slideBox">
  <ul id="show_pic" style="left: -950px; ">
    <li><a href="#" target="_blank"><img alt="标题" title="" height="300" width="475" src="images/dk.jpg"></a></li>
    <li><a href="#" target="_blank"><img alt="标题" title="" height="300" width="475" src="images/ldhkf.jpg"></a></li>
    <li><a href="#" target="_blank"><img alt="标题" title="" height="300" width="475" src="images/hbdz.jpg"></a></li>
    <li><a href="#" target="_blank"><img alt="标题" title="" height="300" width="475" src="images/baoxianvip.jpg"></a></li>
    <li><a href="#" target="_blank"><img alt="标题" title="" height="300" width="475" src="images/slide4.jpg"></a></li>
    <li><a href="#" target="_blank"><img alt="标题" title="" height="300" width="475" src="images/bdrhm.jpg"></a></li>
  </ul>
  <div id="slideText"></div>
  <ul id="iconBall">
    <li class="active">1</li>
    <li class="">2</li>
    <li class="">3</li>
    <li class="">4</li>
    <li class="">5</li>
    <li class="">6</li>
  </ul>
  <ul id="textBall">
    <li class="active"><a href="javascript:void(0)">【标题】玩家用了都说好</a></li>
    <li class=""><a href="javascript:void(0)">【标题】20000份百万庄园咖啡免费领</a></li>
    <li class=""><a href="javascript:void(0)">【标题】93折抢彩票红包</a></li>
    <li class=""><a href="javascript:void(0)">【标题】变身车主VIP有好礼</a></li>
    <li class=""><a href="javascript:void(0)">【标题】让团购变得更划算</a></li>
    <li class=""><a href="javascript:void(0)">【标题】包大人心心念念的神器</a></li>
  </ul>
</div>
<!--slideBox end-->
<script type="text/javascript" src="js/zzsc.js"></script>
</body>
</html>

JS代码(zzsc.js):

var glide =new function(){
	function $id(id){
	return document.getElementById(id);
}
;
	this.layerGlide=function(auto,oEventCont,oTxtCont,oSlider,sSingleSize,second,fSpeed,point){
	var oSubLi = $id(oEventCont).getElementsByTagName('li');
	var oTxtLi = $id(oTxtCont).getElementsByTagName('li');
	var interval,timeout,oslideRange;
	var time=1;
	var speed = fSpeedvar sum = oSubLi.length;
	var a=0;
	var delay=second * 1000;
	var setValLeft=function(s){
	return function(){
	oslideRange = Math.abs(parseInt($id(oSlider).style[point]));
	$id(oSlider).style[point] =-Math.floor(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';
	if(oslideRange==[(sSingleSize * s)]){
	clearInterval(interval);
	a=s;
}
}
}
;
	var setValRight=function(s){
	return function(){
	oslideRange = Math.abs(parseInt($id(oSlider).style[point]));
	$id(oSlider).style[point] =-Math.ceil(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';
	if(oslideRange==[(sSingleSize * s)]){
	clearInterval(interval);
	a=s;
}
}
}
function autoGlide(){
	for(var c=0;
	c<sum;
	c++){
	oSubLi[c].className='';
	oTxtLi[c].className='';
}
;
	clearTimeout(interval);
	if(a==(parseInt(sum)-1)){
	for(var c=0;
	c<sum;
	c++){
	oSubLi[c].className='';
	oTxtLi[c].className='';
}
;
	a=0;
	oSubLi[a].className="active";
	oTxtLi[a].className = "active";
	interval = setInterval(setValLeft(a),time);
	timeout = setTimeout(autoGlide,delay);
}
else{
	a++;
	oSubLi[a].className="active";
	oTxtLi[a].className = "active";
	interval = setInterval(setValRight(a),time);
	timeout = setTimeout(autoGlide,delay);
}
}
if(auto){
	timeout = setTimeout(autoGlide,delay);
}
;
	for(var i=0;
	i<sum;
	i++){
	oSubLi[i].onmouseover = (function(i){
	return function(){
	for(var c=0;
	c<sum;
	c++){
	oSubLi[c].className='';
	oTxtLi[c].className='';
}
;
	clearTimeout(timeout);
	clearInterval(interval);
	oSubLi[i].className = "active";
	oTxtLi[i].className = "active";
	if(Math.abs(parseInt($id(oSlider).style[point]))>[(sSingleSize * i)]){
	interval = setInterval(setValLeft(i),time);
	this.onmouseout=function(){
	if(auto){
	timeout = setTimeout(autoGlide,delay);
}
;
}
;
}
else if(Math.abs(parseInt($id(oSlider).style[point]))<[(sSingleSize * i)]){
	interval = setInterval(setValRight(i),time);
	this.onmouseout=function(){
	if(auto){
	timeout = setTimeout(autoGlide,delay);
}
;
}
;
}
}
}
)(i)}
}
}
//调用语句glide.layerGlide(true,//设置是否自动滚动'iconBall',//对应索引按钮'textBall',//标题内容文本'show_pic',//焦点图片容器475,//设置滚动图片位移像素2,//设置滚动时间2秒0.1,//设置过渡滚动速度'left' //设置滚动方向“向左”);

CSS代码(zzsc.css):

*{margin:0;padding:0;list-style-type:none;}
body{font:12px/180% "宋体",Arial,Helvetica,sans-serif;background:#999;}
/*图片轮换*/
#slideBox{width:475px;height:300px;overflow:hidden;position:relative;margin:20px auto;}
#slideBox ul#show_pic{margin:0;padding:0;list-style:none;height:300px;width:4750px;position:absolute;}
#slideBox ul#show_pic li{float:left;margin:0;padding:0;height:285px;}
#slideBox ul#show_pic li img{display:block;}
#iconBall{position:absolute;bottom:0;right:0;}
#iconBall li{float:left;color:#7a7a7a;width:32px;height:28px;line-height:28px;cursor:pointer;text-align:center;font-size:14px;font-weight:bold;padding-top:4px;}
#iconBall li.active{background:url(../images/iconbg.png) no-repeat;color:#fff;}
#slideText{width:475px;height:28px;background:rgba(0,0,0,0.7);color:#fff;position:absolute;left:0px;bottom:0px;*background:transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000);}
#textBall{position:absolute;left:10px;bottom:3px;}
#textBall li{float:left;cursor:pointer;display:none;color:#fff;font-size:14px;}
#textBall li.active{display:block;}
#textBall li a{text-decoration:none;color:#fff;}
p,p a{font-size:12px;color:#666;}

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