jQuery五屏上下滚动焦点图滚动切换特效代码

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

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

以下是 jQuery五屏上下滚动焦点图滚动切换特效代码的示例演示效果:

当前平台(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="此代码内容为jQuery五屏上下滚动焦点图代码" />
<title>jQuery五屏上下滚动焦点图代码</title><link rel=stylesheet type=text/css href="css/lrtk.css">
<link rel=stylesheet type=text/css href="css/lrtk.css">
<script type=text/javascript src="js/lrtk.js"></script>
<script type=text/javascript src="js/jquery-1.4.2.min.js"></script>
</head>
<body>
<p></p>
<table width="330" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td>
<!-- 代码 开始 -->      
<div style="HEIGHT: 240px; OVERFLOW: hidden;" id=idTransformView>
<ul id=idSlider class=slider>
  <div style="POSITION: relative">
      <ul class=txtbg></ul>
      <span>2013年宜宾市规划设计成果求意见</span>
      <a href="#" target="_blank"><img alt="2013年宜宾市规划设计成果求意见" src="images/01.jpg" width=320 height=240></a>
  </div>
  <div style="POSITION: relative">
      <ul class=txtbg></ul>
      <span>宜宾县16日起限制部分车辆同行</span>
      <a href="#" target="_blank"><img alt="宜宾县16日起限制部分车辆同行" src="images/02.jpg" width=320 height=240></a>
  </div>
  
  <div style="POSITION: relative">
    <ul class=txtbg></ul>
    <span>网络“神兽”到宜宾了！</span>
    <a href="#" target="_blank"><img alt="网络“神兽”到宜宾了！" src="images/03.jpg" width=320 height=240></a>
  </div>
  <div style="POSITION: relative">
      <ul class=txtbg></ul>
      <span>客人吃醉了!宜宾星乐迪小伙伴拾“金”归还</span>
      <a href="#" target="_blank"><img alt="客人吃醉了!宜宾星乐迪小伙伴拾“金”归还" src="images/04.jpg" width=320 height=240></a>
  </div>
  <div style="POSITION: relative">
      <ul class=txtbg></ul>
      <span>宜宾翠柏大道又发生惨烈车祸，别克车被压变</span>
      <a href="#" target="_blank"><img alt="宜宾翠柏大道又发生惨烈车祸，别克车被压变" src="images/05.jpg" width=320 height=240></a>
  </div>
</ul>
</div>

<div>
<ul id=idNum class=hdnum>
  <li><img src="images/01.jpg" width=61px height=45px></li>
  <li><img src="images/02.jpg" width=61px height=45px></li>
  <li><img src="images/03.jpg" width=61px height=45px></li>
  <li><img src="images/04.jpg" width=61px height=45px></li>
  <li><img src="images/05.jpg" width=61px height=45px></li>
</ul>
<script language=javascript>
  mytv("idNum","idTransformView","idSlider",240,5,true,2000,5,true,"onmouseover");
  //按钮容器aa，滚动容器bb，滚动内容cc，滚动宽度dd，滚动数量ee，滚动方向ff，延时gg，滚动速度hh，自动滚动ii，
  </script>
</div>
<!-- 代码 结束 --></td>
    </tr>
  </table>
</body>
</html>

JS代码(lrtk.js):

var ybvvjdt = function (id){
	return "string" == typeof id ? document.getElementById(id):id;
}
;
	var Class ={
	create:function(){
	return function(){
	this.initialize.apply(this,arguments);
}
}
}
Object.extend = function(destination,source){
	for (var property in source){
	destination[property] = source[property];
}
return destination;
}
var TransformView = Class.create();
	TransformView.prototype ={
	initialize:function(container,slider,parameter,count,options){
	if(parameter <= 0 || count <= 0) return;
	var oContainer = ybvvjdt(container),oSlider = ybvvjdt(slider),oThis = this;
	this.Index = 0;
	this._timer = null;
	this._slider = oSlider;
	this._parameter = parameter;
	this._count = count || 0;
	this._target = 0;
	this.SetOptions(options);
	this.Up = !!this.options.Up;
	this.Step = Math.abs(this.options.Step);
	this.Time = Math.abs(this.options.Time);
	this.Auto = !!this.options.Auto;
	this.Pause = Math.abs(this.options.Pause);
	this.onStart = this.options.onStart;
	this.onFinish = this.options.onFinish;
	oContainer.style.overflow = "hidden";
	oContainer.style.position = "relative";
	oSlider.style.position = "absolute";
	oSlider.style.top = oSlider.style.left = 0;
}
,SetOptions:function(options){
	this.options ={
	Up:true,Step:5,Time:10,Auto:true,Pause:200,onStart:function(){
}
,onFinish:function(){
}
}
;
	Object.extend(this.options,options ||{
}
);
}
,Start:function(){
	if(this.Index < 0){
	this.Index = this._count - 1;
}
else if (this.Index >= this._count){
	this.Index = 0;
}
this._target = -1 * this._parameter * this.Index;
	this.onStart();
	this.Move();
}
,Move:function(){
	clearTimeout(this._timer);
	var oThis = this,style = this.Up ? "top":"left",iNow = parseInt(this._slider.style[style]) || 0,iStep = this.GetStep(this._target,iNow);
	if (iStep != 0){
	this._slider.style[style] = (iNow + iStep) + "px";
	this._timer = setTimeout(function(){
	oThis.Move();
}
,this.Time);
}
else{
	this._slider.style[style] = this._target + "px";
	this.onFinish();
	if (this.Auto){
	this._timer = setTimeout(function(){
	oThis.Index++;
	oThis.Start();
}
,this.Pause);
}
}
}
,GetStep:function(iTarget,iNow){
	var iStep = (iTarget - iNow) / this.Step;
	if (iStep == 0) return 0;
	if (Math.abs(iStep) < 1) return (iStep > 0 ? 1:-1);
	return iStep;
}
,Stop:function(iTarget,iNow){
	clearTimeout(this._timer);
	this._slider.style[this.Up ? "top":"left"] = this._target + "px";
}
}
;
	function Each(list,fun){
	for (var i = 0,len = list.length;
	i < len;
	i++){
	fun(list[i],i);
}
}
;
	function mytv(aa,bb,cc,dd,ee,ff,gg,hh,ii,jj){
	var objs = ybvvjdt(aa).getElementsByTagName("li");
	var tv = new TransformView(bb,cc,dd,ee,{
	onStart:function(){
	Each(objs,function(o,i){
	o.className = tv.Index == i ? "on":"";
}
)}
//��ť��ʽ}
);
	Each(objs,function(o,i){
	function autoplay(){
	//tv.Index = i;
	tv.Up = ff;
	tv.Pause = gg;
	tv.Step = hh;
	if(ii==true){
	tv.Auto=true;
	tv.Start();
}
else{
	tv.Auto = false;
	tv.Start();
}
}
autoplay();
	if(jj=="onmouseover"){
	o.onmouseover = function(){
	o.className = "on";
	tv.Index = i;
	ii=false;
	autoplay();
}
o.onmouseout = function(){
	o.className = "";
	ii=true;
	autoplay();
}
}
if(jj=="onclick"){
	o.onclick = function(){
	o.className = "on";
	tv.Index = i;
	autoplay();
}
}
}
)}

CSS代码(lrtk.css):

body,ul,ol,li{padding:0px;margin:0px}
.slider{position:relative}
.slider div{position:relative;text-align:center;padding:0px;list-style-type:none;margin:0px;width:320px;background:#ffffff;height:240px;overflow:hidden;}
.slider span{z-index:99;position:absolute;text-align:center;width:100%;bottom:2px;color:#ffffff;font-size:12px;font-weight:bold}
.slider .txtbg{position:absolute;filter:alpha(opacity=70);width:100%;bottom:0px;background:#000;height:17px;padding-top:5px;left:0px;opacity:0.7;-moz-opacity:0.7;-khtml-opacity:0.7}
.slider .txtbg img{width:620px;height:240px;}
.hdnum{width:320px;height:47px;overflow:hidden;padding-top:2px}
.hdnum li{padding:1px;background-color:#000;width:61px;float:left;margin:0 0 0 1px;overflow:hidden;}
.hdnum li img{width:61px;height:45px;filter:alpha(opacity=50);opacity:0.5;-moz-opacity:0.5;-khtml-opacity:0.5}
.hdnum li.on{padding:0;background-color:#f54102;width:63px;}
.hdnum li.on img{border:#f54102 2px solid;filter:alpha(opacity=100);width:59px;height:43px;opacity:1;-moz-opacity:1;-khtml-opacity:1}

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