`
pcajax
  • 浏览: 2159120 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

一段图片轮换代码

阅读更多

<html>
<!-- 脚本代码开始 -->
<head>

    <script language="JavaScript" type="text/javascript">
<!--
var bannerAD=new Array();
var adNum=0;

bannerAD[0]='cyjq_R_banner1.jpg';
bannerAD[1]='cyjq_R_banner2.jpg';
bannerAD[2]='cyjq_R_banner.jpg';

var preloadedimages=new Array();
for (i=1;i<bannerAD.length;i++) {
preloadedimages[i]=new Image();
preloadedimages[i].src=bannerAD[i];

}

function setTransition() {
if (document.all) {
bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);
bannerADrotator.filters.revealTrans.apply();
}
}

function playTransition() {
if (document.all) {
bannerADrotator.filters.revealTrans.play();
}
}

function nextAd() {
if (adNum<bannerAD.length-1) {
adNum++;
} else {
adNum=0;
}
setTransition();
document.images.bannerADrotator.src=bannerAD[adNum];
playTransition();
theTimer=setTimeout("nextAd()", 5000);
}
//-->
    </script>

    <!-- 脚本代码结束 -->
</head>
<body>
    <!--调用开始-->
    <table>
        <td width="159" valign="middle">
            <img src="" name="bannerADrotator" width="159" height="184" style="filter: revealTrans(duration=2,transition=20);">

            <script language="JavaScript" type="text/javascript">
nextAd()
            </script>

        </td>
        <!-- 调用结束 -->
    </table>
</body>
</html>
还有一个牛人写的JS
<!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" />
    <title>JavaScript 图片切换展示效果</title>
</head>
<body>
    <style type="text/css">
        .container, .container *
        {
            margin: 0;
            padding: 0;
        }
        .container
        {
            width: 169px;
            height: 323px;
            overflow: hidden;
        }
        .slider
        {
            position: absolute;
        }
        .slider li
        {
            list-style: none;
            display: inline;
        }
        .slider img
        {
            width: 169px;
            height: 323px;
            display: block;
        }
        .slider2
        {
            width: 2000px;
        }
        .slider2 li
        {
            float: left;
        }
        .num
        {
            position: absolute;
            right: 5px;
            bottom: 5px;
        }
        .num li
        {
            float: left;
            color: #FF7300;
            text-align: center;
            line-height: 16px;
            width: 16px;
            height: 16px;
            font-family: Arial;
            font-size: 12px;
            cursor: pointer;
            overflow: hidden;
            margin: 3px 1px;
            border: 1px solid #FF7300;
            background-color: #fff;
        }
        .num li.on
        {
            color: #fff;
            line-height: 21px;
            width: 21px;
            height: 21px; <script language="JavaScript" src="http://book.book560.com/ads/ads728x15.js" type="text/javascript"></script>
            font-size: 16px;
            margin: 0 1px;
            border: 0;
            background-color: #FF7300;
            font-weight: bold;
        }
    </style>
    <div class="container" id="idTransformView">
        <ul class="slider" id="idSlider">
            <li>
                <img src="cyjq_R_banner1.jpg" /></li>
            <li>
                <img src="cyjq_R_banner2.jpg" /></li>
            <li>
                <img src="cyjq_R_banner.jpg" /></li>
        </ul>
        <ul class="num" id="idNum">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <br />
    <div class="container" id="idTransformView2">
        <ul class="slider slider2" id="idSlider2">
            <li>
                <img src="cyjq_R_banner1.jpg" /></li>
            <li>
                <img src="cyjq_R_banner2.jpg" /></li>
            <li>
                <img src="cyjq_R_banner.jpg" /></li>
        </ul>
        <ul class="num" id="idNum2">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <br />
    <div>
        <input id="idStop" type="button" value=" 停止自动 " />
        <input id="idStart" type="button" value=" 开始自动 " />
        <br />
        <br />
        <input id="idPre" type="button" value=" <- 上一个 " />
        <input id="idNext" type="button" value=" 下一个 -> " />
        <br />
        <br />
        切换速度:
        <input id="idFast" type="button" value=" + 加 速 " />
        <input id="idSlow" type="button" value=" - 减 速 " />
        <br />
        <br />
        停顿时间:
        <input id="idAdd" type="button" value=" + 加时间 " />
        <input id="idReduce" type="button" value=" - 减时间 " />
        <br />
        <br />
        <input id="idReset" type="button" value=" Reset " />
    </div>

    <script type="text/javascript">
var $ = 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 = $(container), oSlider = $(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: 2000,//停顿时间(Auto为true时有效)
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";
}
};

window.onload=function(){
function Each(list, fun){
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};

var objs = $("idNum").getElementsByTagName("li");

var tv = new TransformView("idTransformView", "idSlider", 168, 3, {
onStart : function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) }//按钮样式
});

tv.Start();

Each(objs, function(o, i){
o.onmouseover = function(){
o.className = "on";
tv.Auto = false;
tv.Index = i;
tv.Start();
}
o.onmouseout = function(){
o.className = "";
tv.Auto = true;
tv.Start();
}
})

////////////////////////test2

var objs2 = $("idNum2").getElementsByTagName("li");

var tv2 = new TransformView("idTransformView2", "idSlider2", 408, 3, {
onStart: function(){ Each(objs2, function(o, i){ o.className = tv2.Index == i ? "on" : ""; }) },//按钮样式
Up: false
});

tv2.Start();

Each(objs2, function(o, i){
o.onmouseover = function(){
o.className = "on";
tv2.Auto = false;
tv2.Index = i;
tv2.Start();
}
o.onmouseout = function(){
o.className = "";
tv2.Auto = true;
tv2.Start();
}
})

$("idStop").onclick = function(){ tv2.Auto = false; tv2.Stop(); }
$("idStart").onclick = function(){ tv2.Auto = true; tv2.Start(); }
$("idNext").onclick = function(){ tv2.Index++; tv2.Start(); }
$("idPre").onclick = function(){ tv2.Index--;tv2.Start(); }
$("idFast").onclick = function(){ if(--tv2.Step <= 0){tv2.Step = 1;} }
$("idSlow").onclick = function(){ if(++tv2.Step >= 10){tv2.Step = 10;} }
$("idReduce").onclick = function(){ tv2.Pause-=1000; if(tv2.Pause <= 0){tv2.Pause = 0;} }
$("idAdd").onclick = function(){ tv2.Pause+=1000; if(tv2.Pause >= 5000){tv2.Pause = 5000;} }

<script language="JavaScript" src="http://book.book560.com/ads/ads728x15.js" type="text/javascript"></script>

$("idReset").onclick = function(){
tv2.Step = Math.abs(tv2.options.Step);
tv2.Time = Math.abs(tv2.options.Time);
tv2.Auto = !!tv2.options.Auto;
tv2.Pause = Math.abs(tv2.options.Pause);
}

}
    </script>

</body>
</html>

分享到:
评论

相关推荐

    图片轮换js代码焦点图图片切换,图片js代码

    在网页设计中,图片轮换效果常常用于展示一组...通过上述步骤,你可以创建一个基本的图片轮换效果,当然,实际应用中可能还需要考虑其他功能,如手动切换、添加导航点、过渡效果等,这都需要进一步扩展JavaScript代码。

    FLASH图片切换代码

    // 每隔一段时间自动切换图片 setInterval(switchImage, 3000); // 3秒切换一次 ``` 在这个例子中,我们创建了一个图片数组,然后使用一个定时器每隔3秒钟调用`switchImage`函数,实现图片的自动切换。当图片加载...

    jsp图片切换代码

    在探讨“jsp图片切换代码”的知识点时,我们主要聚焦于如何在JSP(JavaServer Pages)页面中实现图片的自动切换或轮播效果。这段代码示例提供了在JSP环境中实现这一功能的具体方法,涉及了JavaScript、HTML以及CSS的...

    图片随机切换代码

    在IT领域,图片随机切换是一种常见的网页动态效果,主要用于展示多张图片并让它们以某种随机顺序自动或用户触发地进行切换。这种效果通常通过JavaScript(JS)脚本实现,结合HTML和CSS来完成视觉呈现。现在我们来...

    图片切换效果代码html图片切换

    ### 图片切换效果代码:HTML图片切换 在探讨图片切换效果代码时,我们主要关注的是如何利用HTML、CSS以及JavaScript来实现动态的图片展示效果,尤其是像幻灯片切换这样的功能。这种效果广泛应用于网站设计中,以...

    HTMl 上实现图片的切换 简单的一段代码

    这段JavaScript代码首先获取了所有的图片元素,然后定义了一个`switchImage`函数,该函数会隐藏所有图片并显示当前索引的图片。`currentIndex`变量用于跟踪当前显示的是哪张图片,每次调用`switchImage`时,它都会...

    纯JS图片轮换代码,效果超炫

    五屏切换则是指图片轮换的效果中包含五张图片,每张图片在展示一段时间后自动切换到下一张。 在描述中提到的"XP按钮风格",指的是借鉴了Windows XP系统中按钮的样式,这可能涉及到CSS样式的设计,包括边框、阴影、...

    焦点图片——轮换代码

    "焦点图片轮换代码"就是实现这一功能的编程代码,它可以自动化地在网页上交替显示一组图片,每过一段时间自动切换到下一张,为用户提供动态且引人入目的体验。 焦点图片轮换代码通常由HTML、CSS和JavaScript三部分...

    asp图片切换幻灯特效代码

    以下是一个基本的JavaScript示例,每隔一段时间更换图片: ```javascript var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("slide"); for (i...

    实用的图片切换代码(css+jQuery)

    在网页设计中,图片切换效果是一种常见的交互设计手法,它能吸引用户注意力并提供动态的视觉体验。本教程将深入探讨如何使用CSS和jQuery来实现一个实用的图片切换功能。 首先,我们需要理解CSS(层叠样式表)的作用...

    jquery旅游网站带标题的焦点图片切换代码

    "jQuery旅游网站带标题的焦点图片切换代码"就是一个实现这种效果的技术方案,旨在为用户提供一种动态且引人入胜的浏览体验。jQuery作为一个轻量级、高性能的JavaScript库,提供了丰富的API和插件,使得实现这种功能...

    jQuery带标题的焦点图片轮播切换代码

    在这个主题中,“jQuery 带标题的焦点图片轮播切换代码”涉及到如何利用 jQuery 实现一个具有标题功能的图片轮播效果。 首先,我们需要理解基本的 HTML 结构,这通常包括一个容器元素来承载轮播,每个图片和对应的...

    jq代码图片切换

    这段代码首先获取所有图片元素,然后定义一个变量记录当前显示的图片索引。`switchImage`函数负责切换图片,移除所有图片的`active`类,然后将当前索引对应的图片添加`active`类以显示。最后,使用`setInterval`定时...

    JavaScript图片轮换源代码

    JavaScript图片轮换是一种常见的网页动态效果,用于展示一组图片并自动进行切换,为用户提供更丰富的视觉体验。在网页设计和开发中,JavaScript结合jQuery库可以非常方便地实现这一功能。以下将详细介绍如何利用...

    带缩图级简介的七屏js图片轮换代码

    2. **定时器**:为了实现自动轮换,JavaScript代码会设置一个定时器,每隔一段时间自动切换到下一张图片。这通常通过修改图片的CSS样式(如display属性)来实现。 3. **事件处理**:除了自动轮换,代码还会监听用户...

    js图片轮换css html 不错的来看看

    在网页设计中,图片轮换是一种常见的视觉效果,用于展示多张图片并自动切换,以增加网站的吸引力和用户体验。本篇文章将详细讲解如何利用CSS、JavaScript和HTML实现一个实用的图片轮换功能。 首先,我们需要创建...

    简单的易修改javascript图片切换代码

    这个"简单的易修改javascript图片切换代码"提供了实现这一效果的基础框架,帮助开发者理解图片切换的原理并根据实际需求进行定制。 首先,我们需要了解JavaScript的基本语法,它是Web开发中的客户端脚本语言,可以...

    FLASH制作图片轮换广告核心代码

    在本文中,我们将深入探讨如何使用ACTIONSCRIPT(AS)来创建一个基于FLASH的图片轮换广告。这个项目的核心代码展示了如何实现一个常见的网络广告效果,即动态地展示一系列图片并平滑地过渡到下一张。这不仅对于网页...

    Js 图片轮换显示 图片轮换显示 源代码

    通过设置定时器,每隔一段时间就改变图片的可见性或位置,从而达到轮换显示的效果。以下是一个简单的图片轮换显示的步骤: 1. **HTML结构**:首先,在HTML中,我们需要创建一个`div`元素作为图片容器,并将所有图片...

    javascript写的图片切换代码

    下面我们将深入探讨如何使用JavaScript编写图片切换代码,以及其中涉及的关键知识点。 首先,我们需要了解HTML结构,它是页面的基础,包含图片元素。例如,我们可以有多个图片元素,通过CSS隐藏除了第一个之外的...

Global site tag (gtag.js) - Google Analytics