网页图片滚动新闻代码

合集下载

用JS实现图片轮播效果代码（一）

⽤JS实现图⽚轮播效果代码（⼀）⼀.实现原理（1）将所有图⽚放在⼀个⽗容器div⾥⾯，通过display属性来设置图⽚的出现与隐藏；（2）轮播图分为⼿动轮播和⾃动轮播；⼿动轮播的重点是每次点击图⽚下⽅的⼩圆圈，获得它的索引号，并让与之对应索引号的图⽚显⽰，并且此时的⼩圆圈为⾼亮显⽰；⾃动轮播：利⽤定时器setInterval()，来每隔⼀定的时间来播放⼀次图⽚。

（3）所有的基础知识：dom操作，定时器，事件运⽤。

⼆.轮播图页⾯布局：<div id="content"> <div class="carousel-inner"> <div class="item "><img src="./img/lunbo1.jpg" alt="第⼀张图⽚"></div><div class="item"><img src="./img/lunbo2.jpg" alt="第⼆张图⽚"></div><div class="item"><img src="./img/lunbo3.jpg" alt="第三张图⽚"></div></div><ul class="carousel-indicators"><li id='pic1'>●</li><li id='pic2'>●</li><li id='pic3'>●</li></ul><a href="#" class="carousel-control prev"><span><</span></a><a href="#" class="carousel-control next"><span>></span></a></div>三.轮播图的css样式：#content{width: 100%;height:500px;position: relative;}.carousel-inner{position: relative;width: 100%;overflow: hidden;height:500px;}.carousel-inner>.item>img{display: block;line-height: 1;z-index: 1;}.carousel-indicators{position: absolute;bottom:10px;left:45%;z-index: 2;list-style-type: none;}.carousel-indicators li{display:inline-block;padding: 0 15px;font-size: 24px;color:#999;cursor: pointer;z-index: 2;}.active1{font-size: 28px;color:#fff;}.carousel-control{position: absolute;text-decoration:none;color: #999;font-weight: bold;opacity: .5;font-size: 40px;z-index: 3;}.carousel-control:hover{color:fff;text-decoration: none;opacity: .9;outline: none;font-size: 42px;}.prev{top: 30%;left:20px;}.next{top:30%;right: 20px;}四.轮播图的js实现代码：window.onload = function(){//轮播初始化var lunbo = document.getElementById('content');var imgs = lunbo.getElementsByTagName('img');var uls = lunbo.getElementsByTagName('ul');var lis = lunbo.getElementsByTagName('li');//初始状态下，⼀个圆圈为⾼亮模式lis[0].style.fontSize = '26px';lis[0].style.color = '#fff';//定义⼀个全局变量，⽤来进⾏⾃动轮播图⽚顺序的变化var pic_index = 1;//⾃动轮播.使⽤pic_time记录播放，可以随时使⽤clearInterval()清除掉。

[Web]通用轮播图代码示例

[Web]通⽤轮播图代码⽰例⾸先是准备好的⼏张图⽚, 它们的路径是: "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg"代码最基本的 HTML 代码:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Test</title><link rel="stylesheet" href="css/index.css" /> <script src="js/index.js"></script> </head><body><div id="test" class="slider"><img id="img1" src="img/1.jpg" class="current"><img id="img2" src="img/2.jpg"><img id="img3" src="img/3.jpg"></div><button onclick="setCurrent(0)">1</button> <button onclick="setCurrent(1)">2</button><button onclick="setCurrent(2)">3</button><button onclick="setCurrent(3)">4</button><button onclick="setCurrent(4)">5</button><button onclick="setCurrent(5)">6</button><script>setInterval(moveNext, 5000); // 每隔5s, 切换到下⼀张图⽚</script></body></html>引⼊的样式表:.slider { /* 指定轮播图容器尺⼨, 相对定位, 隐藏溢出内容 */width: 750px;height: 450px;position: relative;overflow: hidden;}.slider img { /* 指定每⼀个图⽚的尺⼨, 过渡时间, 绝对定位 */width: 100%;height: 100%;transition: all 0.5s;position: absolute;}.slider img { /* 指定所有图⽚⽔平位移-100% */transform: translateX(-100%);}.slider img.current { /* 指定带有current类的图⽚不进⾏⽔平移动 */transform: translateX(0);}.slider img.current~img{ /* 指定位于带有current类的图⽚之后的所有图⽚⽔平位移为100% */transform: translateX(100%);}.slider img.current, /* 指定带有current或last类的图⽚置顶 */.slider st{z-index: 999;}引⼊的JavaScript:function getImages() {return document.getElementById("test").querySelectorAll("img"); // 搜找该页⾯下轮播图容器中的所有img}function getCurrent() {return document.getElementById("test").querySelector("img.current"); // 搜找该页⾯下轮播图容器中当前展⽰的img}function setCurrent(index) {var imgs = getImages();var cur = getCurrent();imgs.forEach(v => v.className = ""); // 清空所有图⽚的类名cur.className = "last"; // 设置当前展⽰的图⽚的类名为 "last", 意为: "上⼀次展⽰的图⽚"imgs[index].className = "current"; // 设置要设置的图⽚的类名为 "current"}function moveNext() { // 移动展⽰图⽚到下⼀个var imgs = getImages();var curIndex;for (curIndex = 0; curIndex < imgs.length; curIndex++) {if (imgs[curIndex].className == "current") {break;}}if (curIndex + 1 < imgs.length) {setCurrent(curIndex + 1);} else {setCurrent(0);}}原理图⽚集为⼀个序列, 当前展⽰的图⽚在中间, 展⽰图⽚之前的图⽚则是在左边, ⽽之后的图⽚则是在右边.任意设置⼀个图⽚为当前展⽰的图⽚(即设置类名为current), 那么该图⽚将移动到中间. ⽽其它的图⽚, ⾃然也会移动到它两边.由于滑动时, 需要显⽰将要展⽰的图⽚, 以及将要隐藏的图⽚, 所以这两张图⽚需要置顶, 否则, 进⾏多张图⽚的切换时, 将由于默认层级关系⽽导致异常, 故设置 .current 与 .last 的 z-index 为 999.效果。

网页图片滚动新闻代码

自动切换的图片幻灯切换效果（图片滚动新闻）可自己修改滚动图片和增加滚动图片数量，以及修改滚动图片大小等！1.效果预览：2.代码部分：（将一下代码复制粘贴到记事本中，把后缀改成.html）<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>三个jQuery版淡入淡出自动切换的图片幻灯切换效果_</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">/******************************** @基于jQuery 1.4的渐入渐出切换幻灯插件* @Plugin Page:/jq-plugin-ifadeslide/* @Author Mr.Think* @Author blog /* @Creation date: 2010.08.20*******************************//*reset css*/body{font-size:0.8em;letter-spacing:1px;font-family:"MS SansSerif",Geneva,sans-serif;line-height:1.8em;}div,h2,p,ul,li{margin:0;padding:0;}h1{font-size:1em;font-weight:normal;}h1 a{background:#047;padding:2px 3px;color:#fff;text-decoration:none;}h1 a:hover{background:#a40000;color:#fff;text-decoration:underline;}h3{color:#888;font-weight:bold;font-size:1em;margin:1em auto;position:relative;}h5a{background:#000;color:#fff;text-decoration:none;font-size:12px;font-weight:normal;letter-spaci ng:3px;position:absolute;right:7px;top:7px;padding:1px 12px;}.box{width:700px;height:250px;}/*demo css*//*SAMPLE-A*/#slide{position:relative;width:200px;height:250px;overflow:hidden;border:1px solid #ccc;float:left;}#slide img{width:200px;height:250px;}#slide .ico{position:absolute;right:8px;bottom:6px;}#slide .ico li{background:#fff;float:left;display:block;width:15px;height:15px;line-height:15px;border:1px solid#cecece;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:2px;padding:1px;cursor:po inter;}#slide .ico li.high{background:#047;color:#fff;font-weight:bolder;}/*SAMPLE-B*/#slide_b{position:relative;width:460px;height:250px;overflow:hidden;border:1px solid #ccc;float:right ;}#slide_b img{width:500px;height:250px;}#slide_b .ico_b{position:absolute;right:8px;bottom:6px;}#slide_b .ico_b li{background:#fff;float:left;display:block;width:15px;height:15px;line-height:15px;border:1px solid#cecece;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:2px;padding:1px;cursor:po inter;}#slide_b .ico_b li.high_b{background:#a40000;color:#fff;font-weight:bolder;}/*SAMPLE-C*/#slide_c{position:relative;width:700px;height:250px;overflow:hidden;border:1px solid #ccc;margin-top:20px;}#slide_c img{width:700px;height:250px;}#slide_c .ico_c{position:absolute;right:8px;bottom:6px;}#slide_c .ico_c li{background:#fff;float:left;display:block;width:15px;height:15px;line-height:15px;border:1px solid#cecece;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:2px;padding:1px;cursor:po inter;}#slide_c .ico_c li.high{background:#000;color:#fff;font-weight:bolder;}</style><script src="/images/jquery-1.4.min.js"></script><script src="/js_img/4-14/images/jquery.iFadeSldie.pack.js">//压缩版文件</script><script language="javascript">/******************************** @基于jQuery淡入淡出可自动切换的幻灯插件* @jQuery V esion:1.4.2* @Plugin Page:/jq-plugin-ifadeslide/* @Author Mr.Think* @Author blog /* @Creation date: 2010.08.20*******************************///调用插件并传入插件参数//此处传入的参数将覆盖jquery.iFadeSlide.js的参数,为空即使用插件文件中默认参数$(function(){//SAMPLE-A调用---未传入任何参数,调用默认参数$('div#slide').iFadeSlide();//SAMPLE-B调用---传入新的参数,将覆盖原有参数,未传入的使用默认值$('div#slide_b').iFadeSlide({field: $('div#slide_b a'),icocon:$('div.ico_b'),hoverCls: 'high_b',curIndex: 2, //索引值0起始,故此处设置为第3项高亮interval: 2000});//SAMPLE-C调用---传入新的参数,将覆盖原有参数,未传入的使用默认值$('div#slide_c').iFadeSlide({field: $('div#slide_c img'),icocon: $('div.ico_c'),outTime:100,inTime: 200});});</script></head><body>预览效果时左下角会提示错误，而且看不到效果，<font color=red>刷新一下</font>就可以看到效果了；当然，在实际使用中，不会出现这样的问题。

图片滚动代码

我把“图片轮播”代码跟大家分享一下，代码如下：<DIV style="WIDTH: 宽度px; HEIGHT: 高度px" class="slider-promo J_Slider J_TWidget" data-widget-config="{'effect':'fade','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" data-type="fade"><ul class=lst-main><li><A style="WIDTH: 图片宽度px; HEIGHT: 图片高度px" href="商品连接地址" target=_blank><img alt="" src="图片地址"></A></li><li><A style="WIDTH: 图片宽度px; HEIGHT: 图片高度px" href="商品连接地址" target=_blank><img alt="" src="图片地址"></A></li></ul></DIV>上下切换代码：<DIV style="WIDTH: 宽度px; HEIGHT: 高度px" class="slider-promo J_Slider J_TWidget" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" data-type="scroll"><ul class=lst-main><li><A style="WIDTH: 图片宽度px; HEIGHT: 图片高度px" href="商品连接地址" target=_blank><img alt="" src="图片地址"></A></li><li><A style="WIDTH: 图片宽度px; HEIGHT: 图片高度px" href="商品连接地址" target=_blank><img alt="" src="图片地址"></A></li></ul></DIV>多图滚动<!doctype html><html><head><meta charset="UTF-8"><title>auto-image</title><script src="image/jquery.js"></script><style type="text/css">body,ul,li{padding: 0; margin: 0;}ul,li{list-style: none;}body{font-size: 14px;}#demo1{position: relative;margin: 50px auto;width: 700px;border:1px solid #ccc;}#demo1 .img_list{overflow: hidden; position: relative; height: 260px;}/* 根据图片的张数来设定ul的宽度*/.img_list ul{ width: 3500px; position: absolute; height: 260px; left: 0px;}.img_list li{ float: left; width: 700px;}.img_list img{ margin: 1px; width: 698px; height: 258px;}/* 图片对应的按钮样式*/.btn_list { overflow: hidden;padding: 4px;border: 1px solid #ccc;}.btn_list li{ float: left; margin-right: 10px; color: #999; border: 1px solid #ccc; } .btn_list li:hover,.btn_list li.on{ cursor: pointer; border: 1px solid #E204A4;}.btn_list li img{ width: 163px; height: 60px; display: block;}.btn_list .last{ margin-right: 0;}/* 左右点击的按钮样式*/#demo1 .toLeft,#demo1 .toRight{display: none;position: absolute;width: 20px;height: 30px;top: 110px;background: url(image/zbbg_24.png) no-repeat 0 -150px;}/* 图片对应的说明*/.img_intro{position: absolute;bottom: 0;left: 0;width: 100%;height: 25px;}.img_intro .img_intro_bg,.img_intro .text{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}.img_intro .img_intro_bg{background: #000;opacity: .3;z-index: 999;}.img_intro .text{padding: 5px 10px;z-index: 1000;color: #999;}#demo1 .toLeft{left: 20px;}#demo1 .toRight{right: 20px;background-position: -50px -150px;}</style></head><body><div id="demo1"><div class="wrap"><div class="img_list"><ul><li><a href="" target="_blank"><img src="image/gsh_banner1.jpg" alt="寻花故事"></a></li><li><a href="" target="_blank"><img src="image/gsh_banner2.jpg" alt="金瓶梅"></a></li><li><a href="" target="_blank"><img src="image/gsh_banner3.jpg" alt="视频听书"></a></li><li><a href="" target="_blank"><img src="image/gsh_banner4.jpg" alt="盗墓故事"></a></li></ul><a href="#" id="toLeft" class="link toLeft"></a><a href="#" id="toRight" class="link toRight"></a><div class="img_intro"><div class="text"><a href="#" target="_blank"></a></div><div class="img_intro_bg"></div></div></div><div class="btn_list"><ul></ul></div></div></div><script>var index = 0;var timer = 0;var ulist = $('.img_list ul');var blist = $('.btn_list ul');var list = ulist.find('li');var llength = list.length;//li的个数，用来做边缘判断var lwidth = $(list[0]).width();//每个li的长度，ul每次移动的距离var uwidth = llength * lwidth;//ul的总宽度function init(){//生成按钮(可以隐藏)addBtn(list);//显示隐藏左右点击开关$('.link').css('display', 'none');$('.link').bind('click', function(event) {var elm = $(event.target);doMove(elm.attr('id'));return false;});//初始化描述var text = ulist.find('li').eq(0).find('img').attr('alt');var link = ulist.find('li').eq(0).find('a').attr('href');$('.img_intro .text a').text(text);$('.img_intro .text a').attr('href',link);//显示和隐藏左右切换按钮$('.wrap').hover(function() {$('.link').fadeIn(1000);}, function() {$('.link').fadeOut(1000);});auto();}function auto(){//定时器timer = setInterval("doMove('toRight')",3000);$('.img_list a, .btn_list li').hover(function() {clearInterval(timer);}, function() {timer = setInterval("doMove('toRight')",3000);});}function changeBtn(i){blist.find('li').eq(i).addClass('on').siblings().removeClass('on');var text = ulist.find('li').eq(i).find('img').attr('alt');var link = ulist.find('li').eq(i).find('a').attr('href');$('.img_intro .text a').text(text);$('.img_intro .text a').attr('href',link);}function addBtn (list){for (var i = 0; i < list.length; i++) {var imgsrc = $(list[i]).find('img').attr('src');var listCon = '<li><img src="'+imgsrc+'""></li>';$(listCon).appendTo(blist);//隐藏button中的数字//list.css('text-indent', '10000px');};blist.find('li').first().addClass('on');blist.find('li').last().addClass('last');blist.find('li').click(function(event) {var _index = $(this).index();doMove(_index);});}function doMove(direction){//向右按钮if (direction =="toRight") {index++;if ( index< llength) {uwidth = lwidth *index;//ulist.css('left',-uwidth);ulist.animate({left: -uwidth}, "slow");}else{//ulist.css('left','0px');ulist.animate({left: '0px'}, "slow");index = 0;};//向左按钮}else if(direction =="toLeft"){index--;if ( index < 0) {index = llength - 1;}uwidth = lwidth *index;//ulist.css('left',-uwidth);ulist.animate({left: -uwidth}, "slow");//点击数字跳转}else{index = direction;uwidth = lwidth *index;//ulist.css('left',-uwidth);ulist.animate({left: -uwidth}, "slow");};changeBtn(index);}init();</script></body></html>。

网页里实现图片滚动代码

网页里实现图片滚动代码看看以下代码：<table cellspacing=0 cellpadding=0 width="100%" align=center border=0><tbody><tr><td align=middle><marquee scrollamount=1 scrolldelay=100 direction=right width=120><img src="../../infoimages/images7/2009413152913734.jpg"></marquee></td><td align=middle><marquee scrollamount=1 scrolldelay=100 width=120><img src="../../infoimages/images7/2009413152913734.jpg"></marquee></td></tr></tbody></table> 此代码的功能是使你所链接的图片交叉移动！实现步骤如下：1，打开发表文章，点击“显示源代码”。

2，在以红色为标记的图片地址换成你所链接图片的地址，当然了，本地址也可以用！3，在<DIV>和</DIV>之间粘贴上面代码！（注：图片格式为JPG或者GIF）下面的代码是让图片从左向又移动！<marquee direction=right><img src=../../infoimages/images7/2009413152913734.jpg width=200 height=150><br><font color=0000ff size=5 face=华文行楷><b>移右向左从我</b></font></marquee>实现步骤如下：1，打开发表文章，点击“显示源代码”。

网站首页图片轮转代码，很好用

网站首页图片轮转代码，很好用网站首页图片轮转代码聪明的朋友可以把它用到自己的网店里面做装修，非常好用的代码如下，注释的地方需要改变即可<SCRIPT>var widths =500;var heights =410;var counts =6;var times = 4000;img1=new Image ();img1.src='/07.jpg';img2=new Image ();img2.src='/06.jpg';img3=new Image ();img3.src='/05.jpg';img4=new Image ();img4.src='/04.jpg';img5=new Image ();img5.src='/03.jpg';img6=new Image ();img6.src='/02.jpg';url1=new Image ();url1.src='/';url2=new Image ();url2.src='/';url3=new Image ();url3.src='/';url4=new Image ();url4.src='/';url5=new Image ();url5.src='/';url6=new Image ();url6.src='/';//联盟商贸技术支持友情提供var nn=1;var key=0;function change_img(){if(key==0){key=1;}else if(document.all){document.getElementByIdx("pic").filters[0].Apply();document.getElementByIdx("pic").filters[0].Play(duration=2);}eval_r('document.getElementByIdx("pic").src=img'+nn+'.src' );eval_r('document.getElementByIdx("url").href=url'+nn+'.src' );for (var i=1;i<=counts;i++){document.getElementByIdx("xxjdjj"+i).className='axx';}document.getElementByIdx("xxjdjj"+nn).className='bxx';nn++;if(nn>counts){nn=1;}tt=setTimeout('change_img()',4000);}function changeimg(n){nn=n;window.clearInterval(tt);change_img();}document.write('<style>');document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}');document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}');document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');document.write('</style>');document.write('<divstyle="width:'+widths+'px;height:'+heights+'px;overflow:hidde n;text-overflow:clip;">');document.write('<div><a id="url" target="_blank"><img id="pic"style="border:0px;filter:progid:dximagetransform.microsoft.wip e(gradientsize=1.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>');document.write('<divstyle="filter:alpha(style=1,opacity=10,finishOpacity=80);backgr ound: #888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;height:12px;padding:0px;marg in: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>。

网页图片轮播代码

网页图片轮播代码（同时适用SharePointDesigner）<script language="javascript">j=0;function show(){for(ii=1;ii<6;ii++){document.getElementById("pic"+ii).style.display="none";document.getElementById("Submit"+ii).style.backgroundColor='';}j++if(j==6){j=1;}document.getElementById("pic"+j).style.display="block";document.getElementById("Submit"+j).style.backgroundColor='blue';a=setTimeout('show()',1000);}function pic(pic){clearTimeout(a);for(var i=1;i<=5;i++){if(i==pic){document.getElementById("pic"+pic).style.display="block";document.getElementById("Submit"+pic).style.backgroundColor='blu e';j=i}else {document.getElementById("pic"+i).style.display="none";document.getElementById("Submit"+i).style.backgroundColor='';}}a=setTimeout('show()',1000);}</script><style type="text/css">input{ background-color:white; border:#FF0000border: 0px;margin: 0px;padding: 0px;height: 20px;width: 20px;font-size: 14px;}</style><body onLoad="show()"><table width="461" height="163"><tr><td width="426" rowspan="7"><img id="pic3" style="display:none"src="image/class1-2.jpg" ><img id="pic1" src="image/class1-3.jpg"><img id="pic2" style="display:none" src="image/class1-1.jpg"><img id="pic4" style="display:none" src="image/class1-4.jpg"><img id="pic5" style="display:none" src="image/class1-5.jpg"></td> <td height="15"> </td></tr><tr><td><input type="button" name="Submit1" value="1"onClick="pic('1')"></td></tr><tr><td><input type="button" name="Submit2" value="2" onClick="pic('2')" /></td></tr><tr><td><input type="button" name="Submit3" value="3" onClick="pic('3')" /></td></tr><tr><td><input type="button" name="Submit4" value="4" onClick="pic('4')" /></td></tr><tr><td><input type="button" name="Submit5" value="5" onClick="pic('5')" /></td></tr><tr><td height="15"> </td></tr></table>。

最新图片轮播代码,淘宝网图片轮播代码

将以下代码保存为html格式，本代码由东阿阿胶价格网提供！<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=GB2312"></head><body style="margin: 0pt;"><style type="text/css">.container, .container *{margin:0; padding:0;}.container{width:310px; height:310px; overflow:hidden;position:relative;}.slider{position:absolute;}.slider li{ list-style:none;display:inline;}.slider img{ width:310px; height:310px; display:block;}.num{ position:absolute; right:5px; bottom:3px;}.num li{float: left;color: #FF7300;text-align: center;line-height: 12px;width: 12px;height: 12px;font-family: Arial;font-size: 10px;cursor: pointer;overflow: hidden;margin: 3px 1px;border: 1px solid #FF7300;background-color: #fff;}.num li.on{color: #fff;line-height: 16px;width: 16px;height: 16px;font-size: 16px;margin: 0 1px;border: 0;background-color: #FF7300;font-weight: bold;}</style><div style="overflow: hidden; position: relative;" class="container" id="idTransformV iew"><ul style="position: absolute; left: 0pt; top: -14px;" class="slider" id="idSlider"><li><ahref="/t_8?e=7HZ6jHSTaEdqe9B4JaKsvxvu8TZ/KbZ2VGn1yQ10ABo= &p=mm_14236404_0_0" target="_blank"><img src="/img/ejiao1.jpg" width="310px" height="310px" alt="东阿阿胶"></a></li><li><ahref="/t_8?e=7HZ6jHSTaEaFxZ%2FnIfWQd%2FynNXBejgK%2FW9x CV yzZ60B%2B&p=mm_14236404_0_0" target="_blank"><img src="/img/ejiao2.jpg" width="310px" height="310px" alt="东阿阿胶"></a></li><li><ahref="/t_8?e=7HZ6jHSTbIQwaAeNflOhsRh06jpb3CdjtNczY2XMm0i7 Ug==&p=mm_14236404_0_0" target="_blank"><img src="/img/ejiao3.jpg" alt="东阿阿胶" width="310px" height="310px" border="0"></a></li><li><ahref="/t_8?e=7HZ6jHSTb0CqODOAd0Sxu1RpsHHkYILj3Q4M5OIFcd PW&p=mm_14236404_0_0" target="_blank"><img src="/img/ejiao4.jpg" width="310px" height="310px" alt="东阿阿胶"></a></li><li><ahref="/t_8?e=7HZ6jHSTZPu%2FyD4mAzXprpRLErSsvYYjItT5kFWDe YQ%3D&p=mm_14236404_0_0" target="_blank"><img src="/img/ejiao5.jpg" width="310px" height="310px" alt="东阿阿胶"></a></li><li><ahref="/t_8?e=7HZ6jHSTarng5GF5IofZtCVTILzNOzj%2FTWnhJTrwz4i N&p=mm_14236404_0_0" target="_blank"><img src="/img/ejiao6.jpg" width="310px" height="310px" alt="东阿阿胶"></a></li><li><ahref="/t_8?e=7HZ6jHSTbjJ6uayJoTlhN8e6nGJxA%2Bqr6XhtyGTgNg %3D%3D&p=mm_14236404_0_0" target="_blank"><img src="/img/ejiao7.jpg" width="310px" height="310px" alt="东阿阿胶"></a></li><li><ahref="/t_8?e=7HZ6jHSTbIWYLQAN%2F3%2B4roTHLQxXKwLVx6X QpXmhyDwP9w%3D%3D&p=mm_14236404_0_0" target="_blank"><img src="/img/ejiao8.jpg" alt="东阿阿胶" width="310px" height="310px" border="0"></a></li><li><ahref="/t_8?e=7HZ6jHSTZPux5t6gEN6sVBSY8k732zpqx5u7vy0rduch& p=mm_14236404_0_0" target="_blank"><img src="/img/ejiao9.jpg" width="310px" height="310px" alt="东阿阿胶"></a></li><li><ahref="/t_8?e=7HZ6jHSTbIblzI6tUy2Tbl2QDmVqrqRclR49OthgeBnJ6A %3D%3D&p=mm_14236404_0_0" target="_blank"><img src="/img/ejiao10.jpg" width="310px" height="310px" alt="东阿阿胶"></a></li></ul><ul class="num" id="idNum"><li class="on">1</li><li class="on">2</li><li class="on">3</li><li class="on">4</li><li class="on">5</li><li class="on">6</li><li class="on">7</li><li class="on">8</li><li class="on">9</li><li class="on">10</li></ul></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 TransformV iew = Class.create();TransformV iew.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("idTransformV iew", "idSlider", 310, 10, {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();}})}</script></body></html>。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<br><div class="box"><div id="slide"><img src="/js_img/8-24/images/01.jpg" title="demo" alt="demo"><img src="/js_img/8-24/images/02.jpg" title="demo" alt="demo"><img src="/js_img/8-24/images/04.jpg" title="demo" alt="demo"><div class="ico"></div></div><div id="slide_b"><a href=""><img src="/js_img/8-24/images/01.jpg" title="demo" alt="demo"></a><a href=""><img src="/js_img/8-24/images/02.jpg" title="demo" alt="demo"></a><a href=""><img src="/js_img/8-24/images/03.jpg" title="demo" alt="demo"></a><a href=""><img src="/js_img/8-24/images/04.jpg" title="demo" alt="demo"></a><div class="ico_b"></div></div></div><div id="slide_c"><img src="/js_img/8-24/images/01.jpg" title="demo" alt="demo"><img src="/js_img/8-24/images/02.jpg" title="demo" alt="demo"><img src="/js_img/8-24/images/03.jpg" title="demo" alt="demo"><img src="/js_img/8-24/images/04.jpg" title="demo" alt="demo"><img src="/js_img/8-24/images/05.jpg" title="demo" alt="demo"><div class="ico_c"></div></div></body></html>。