`

图片轮播js代码

阅读更多
图片轮播js代码,简洁明了!可代替flash轮播功能!
<div style="width:287px; height:248px; border:solid 1px #cecece;background:#F3F3F3; padding:6px; ">
<SCRIPT language="javascript" type="text/javascript">   
var widths=287;   //宽              
var heights=242;   //高              
var counts=4;    //显示的数量
img1=new Image ();img1.src='images/index/3.jpg';//图片地址
img2=new Image ();img2.src='images/index/4.jpg';
img3=new Image ();img3.src='images/index/2.jpg';
img4=new Image ();img4.src='images/index/1.jpg';
url1=new Image ();url1.src='http://URL?action-viewnews-itemid-2439';//图片链接的URL
url2=new Image ();url2.src='http://URL/?action-viewnews-itemid-2386-page-1';
url3=new Image ();url3.src='http://URL/?action-viewnews-itemid-2384-page-4';
url4=new Image ();url4.src='http://URL/?action-viewnews-itemid-2377-page-2';
var nn=1;   
var key=0;   
function change_img()   
{if(key==0){key=1;}   
else if(document.all)   
{document.getElementById("pic").filters[0].Apply();document.getElementById("pic").filters[0].Play(duration=2);}   
eval('document.getElementById("pic").src=img'+nn+'.src');   
eval('document.getElementById("url").href=url'+nn+'.src');   
for (var i=1;i<=counts;i++){document.getElementById("xxjdjj"+i).className='axx';}   
document.getElementById("xxjdjj"+nn).className='bxx';   
nn++;if(nn>counts){nn=1;}   
tt=setTimeout('change_img()',6000);}   
function changeimg(n){nn=n;window.clearInterval(tt);change_img();}   
document.write('<style>');   
document.write('.axx{padding:1px 7px;border-left:#ffffff 1px solid;font-weight: bold;}');   
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:14px;font:11px sans-serif;font-weight: bold;}');   
document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:14px;font:11px sans-serif;font-weight: bold;}');   
document.write('.bxx{padding:1px 7px;border-left:#ffffff 1px solid;font-weight: bold;}');   
document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:14px;font:11px sans-serif;background-color:#ff0000;font-weight: bold;}');   
document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:14px;font:11px sans-serif;background-color:#ff0000;font-weight: bold;}');   
document.write('</style>');   
document.write('<div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;">');   
document.write('<div><a id="url" target="_blank"><img id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>');   
document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=80);background: #000000;width:100%-2px;text-align:right;top:-14px;position:relative;margin:1px;height:20px;padding:0px;margin:0px;border:0px;">');
for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');}   
document.write('</div></div>');   
change_img();   
</SCRIPT>
</div>
分享到:
评论

相关推荐

    网页设计-js弧形展示图片轮播切换代码

    网页设计-js弧形展示图片轮播切换代码。 代码简述:一般的首页轮播图是左右方向的走动,但是此demo独有其风格,走得是弧形路线的轮播,别具风格,分别对每个商品进行轮播,鼠标聚焦后商品有聚焦样式(点击商品跳转...

    js 非常优秀的 图片轮播源代码

    js 非常优秀的图片轮播源代码,你可以放任意多的图片,有许多切换,可以设置切换时间

    html背景轮播js代码

    HTML 背景轮播 JS 代码是一段可以插入 HTML 页面的 JavaScript 代码,用于实现背景图片轮播效果。这段代码可以直接嵌入 HTML 代码的最后面,以实现页面背景图片的轮播功能。 知识点 1: JavaScript 变量声明 在这段...

    图片弧形展示轮播切换js代码

    【图片弧形展示轮播切换js代码】是一个用于创建独特视觉体验的JavaScript插件,它专为网站设计,提供了一种吸引用户注意力的方式。这款特效代码使得图片以弧形排列并进行轮播切换,增加了网站的动态感和交互性。在...

    js弧形展示图片轮播切换代码.zip

    【标题】中的“js弧形展示图片轮播切换代码”是指一种使用JavaScript实现的网页图像展示技术,它通过创建一个动态的、弧形排列的图片轮播效果来吸引用户注意力,提供良好的用户体验。这种效果常见于网站的首页或产品...

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

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

    各大网站主流图片轮播js代码

    67个主流轮播特效代码(有预览图) JavaScript 滑动条效果 jQuery ToolTip插件 网页title提示效果 jquery翻书效果 精细美工完整特效代码下载 jQuery仿360度图片旋转展示代码

    swiper移动端触屏滑动图片轮播切换代码.zip

    在本项目"swiper移动端触屏滑动图片轮播切换代码.zip"中,我们可以看到一个使用 Swiper.js 的实现,用于创建一个带有索引、左右切换按钮以及触屏滑动功能的移动端图片轮播。 首先,我们需要了解Swiper.js的核心特性...

    jquery阿里巴巴滑动展示图片轮播切换代码

    本文将深入探讨“jquery阿里巴巴滑动展示图片轮播切换代码”这一主题,帮助开发者理解如何利用jQuery实现高效且美观的图片轮播效果。 首先,轮播图是一种常见的网页元素,用于展示一组图片或内容,通过自动切换或...

    jquery flash带按钮控制动画焦点图片轮播切换代码

    标题中的“jquery flash带按钮控制动画焦点图片轮播切换代码”揭示了这是一个使用jQuery库和Flash技术实现的图片轮播功能。在网页设计中,图片轮播是一种常见的展示多张图片的方式,它允许用户通过自动播放或者手动...

    jQuery图片视差轮播切换代码.zip

    5. `js`:JavaScript代码文件,主要包含jQuery库和swiper.js库,以及自定义的脚本。 6. `css`:样式表文件,定义了页面的布局和样式。 总结,"jQuery图片视差轮播切换代码"巧妙地将jQuery与swiper.js结合,实现了...

    图片轮播php代码

    以上代码展示了如何使用PHP、HTML、CSS和JavaScript协同工作,创建一个简单的图片轮播功能。在实际应用中,可能还需要考虑更多细节,如自动播放、延迟时间、触摸滑动支持等。对于初学者,理解并实践这段代码有助于...

    简单的jquery四张图片轮播滚动切换效果代码

    本篇文章将深入探讨如何使用jQuery创建一个简单的四张图片轮播滚动切换效果。 首先,我们需要理解轮播的基本原理。图片轮播通常是通过定时改变显示的图片来实现的,同时提供手动切换选项,如左右箭头或导航点。在这...

    JavaScript图片轮播代码

    JavaScript图片轮播是一种常见的网页动态效果,用于展示一组图片并以循环或定时切换的方式呈现,为网站增添互动性和视觉吸引力。在本项目中,我们利用JavaScript配合SWF(ShockWave Flash)技术实现了一个灵活的图片...

    简单的js百叶窗图片轮播切换代码

    在本文中,我们将深入探讨如何使用JavaScript实现一个简单的百叶窗图片轮播切换效果。百叶窗效果是一种视觉上引人入胜的动画效果,它通过逐行或逐列揭示新图片来创建过渡,使用户在浏览图片时感受到动态的变化。 ...

    HTML5全屏图片左右滑动轮播代码.zip

    轮播的核心在于JavaScript(JS)特效部分,这里的"jiaoben6150"可能是指具体的JavaScript脚本或类库。JavaScript用于处理图片的动态切换、滑动动画以及用户交互事件。常见的实现方式可能是使用定时器(如`...

    web前端自动滚动且点击切换轮播图代码

    通常会有一个JavaScript文件(如`script.js`),其中包含轮播图的逻辑代码,包括初始化轮播图、设置自动滚动、添加点击事件监听器等功能。此文件可能需要引入到`demo.html`中,通过`&lt;script&gt;`标签实现。 7. **优化...

    jQuery手风琴五屏图片轮播切换代码

    本项目"jQuery手风琴五屏图片轮播切换代码"结合了jQuery的功能与创新的用户体验设计,实现了大图在五屏之间平滑过渡的动画效果。这种效果通常被称为焦点图轮播,它为网站或应用增添了一种吸引用户的视觉呈现方式。 ...

    jQuery-图片视差轮播切换代码.zip

    在网页设计中,动态效果的运用可以极大地提升用户体验,其中图片轮播切换与视差滚动效果是常见且深受喜爱的设计手法。今天我们将深入探讨如何利用jQuery库来实现一个具有视差效果的图片轮播切换功能。 首先,jQuery...

Global site tag (gtag.js) - Google Analytics