求一个简单的js实现轮播代码

 我来答
yugi111
2015-10-26 · TA获得超过8.1万个赞
知道大有可为答主
回答量:5.1万
采纳率:70%
帮助的人:1.3亿
展开全部
<!DOCTYPE HTML>    
<html>    
<head>    
<title>JS无缝滚动图片</title>    
<meta charset=UTF-8 />    
<style type="text/css">    
* {    
margin: 0;    
padding: 0;    
}    
#div2 {    
margin: auto;    
width: 602px;    
overflow: hidden;    
left: 200px;    
}    
#div1 {    
position: relative;    
left: 0px;    
width: 1200px;    
}    
#div1 li {    
list-style-type: none;    
float: left;    
width: 200px;    
height: 180px;    
}    
img {    
width: 200px;    
height: 180px;    
}    
ul#ul1 {    
position: relative;    
}    
</style>    
<script type="text/javascript">    
window.onload = function ()    
   {    
   var oUl = document.getElementById ('ul1');    
   var t,o;    
   var speed = 0;    
   var funny = function ()    
   {    
      t && clearInterval(t);    
   t = setInterval (function ()    
   {    
speed -= 200/11;    
if(speed<-200){    
speed=0;    
oUl.appendChild (oUl.children[0]);    
t && clearInterval(t);    
t = null;    
o && clearTimeout(o);    
o=setTimeout(funny,1000);    
}    
   oUl.style.left = speed + "px";    
   }, 60);    
   }    
funny ();    
   }    
</script>    
</head>    
<body>    
<div id="div2">    
<div id="div1">    
<ul id="ul1">    
<li><img src="../../images/choose.png">    
</li>    
<li><img src="../../images/deck.png">    
</li>    
<li><img src="../../images/duel.png">    
</li>    
<li><img src="../../images/list.png">    
</li>    
</ul>    
</div>    
</div>    
</body>    
</html>
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
南风往北飞网
2018-05-30 · 关注考试,学习和读书 www.nfwbf.com
南风往北飞网
采纳数:95 获赞数:514

向TA提问 私信TA
展开全部
一、修改方法:
1、将img后面的src地址改为自己网站的图片地址,可以是绝对地址,也可以是相对地址,默认有6张图片,分别为img1-img6,需要改变数量可直接增减img开头的代码行;
2、将url后面的src地址改为对应的图片点击后要跳转的链接地址,没有可以不填或者填“#”,对应图片相应的默认有6条链接,分别为url1-url6,需要改变数量可直接增减url开头的代码行;
二、代码:
<!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=utf-8″ />
<title>图片自动切换特效</title>
</head>
<body><script>
var widths=250;
var heights=250;
var counts=6;
img1=new Image ();img1.src=‘http://www.szzyyry.com/wp-content/uploads/2018/05/1.gif’;
img2=new Image ();img2.src=‘http://www.szzyyry.com/wp-content/uploads/2018/05/11.png’;
img3=new Image ();img3.src=‘http://www.szzyyry.com/wp-content/uploads/2018/05/4.png’;
img4=new Image ();img4.src=‘http://www.szzyyry.com/wp-content/uploads/2018/05/12.jpg’;
img5=new Image ();img5.src=‘http://www.szzyyry.com/wp-content/uploads/2018/05/2.png’;
img6=new Image ();img6.src=’http://www.szzyyry.com/wp-content/uploads/2018/05/7.jpg’;
url1=new Image ();url1.src=‘https://s.click.taobao.com/t?e=m%3D2%26s%3D3NIEOlwvB6IcQipKwQzePDAVflQIoZepK7Vc7tFgwiFRAdhuF14FMexG5cYUxVxa8sviUM61dt1JSpv2hKtrbX%2FtdFaZ9wXygnHbNuGz8Pan2HglfI2DoLYNXWa%2FvRQvEV%2FUYHU6yv8%3D’;
url2=new Image ();url2.src=‘https://s.click.taobao.com/t?e=m%3D2%26s%3DvP8jgTZ3UtscQipKwQzePDAVflQIoZepK7Vc7tFgwiFRAdhuF14FMQxiBGaiw75K5x%2BIUlGKNpVJSpv2hKtrbX%2FtdFaZ9wXygnHbNuGz8Pan2HglfI2DoF5p4OLil2iCUSwYGlubnWs%3D’;
url3=new Image ();url3.src=‘https://s.click.taobao.com/t?e=m%3D2%26s%3DWcIwZFyakWAcQipKwQzePDAVflQIoZepK7Vc7tFgwiFRAdhuF14FMZ5MyCOrrtZHMMgx22UI05ZJSpv2hKtrbX%2FtdFaZ9wXygnHbNuGz8Pan2HglfI2DoJJOd3I4k6ZJOYQwrhPE0iw%3D’;
url4=new Image ();url4.src=’https://s.click.taobao.com/t?e=m%3D2%26s%3DL%2FY4e4R9VVEcQipKwQzePDAVflQIoZepK7Vc7tFgwiFRAdhuF14FMS0XRsmQKhjct4hWD5k2kjNJSpv2hKtrbX%2FtdFaZ9wXygnHbNuGz8Pan2HglfI2DoJXuk30qqPUfTHSKda6%2BD90%3D’;
url5=new Image ();url5.src=’https://s.click.taobao.com/t?e=m%3D2%26s%3DHErA%2BEgSDGwcQipKwQzePDAVflQIoZepK7Vc7tFgwiFRAdhuF14FMXZ07T88LO358sviUM61dt1JSpv2hKtrbX%2FtdFaZ9wXygnHbNuGz8Pan2HglfI2DoJVcJ3jVGKWcWvo26CZ9O7c%3D’;
url6=new Image ();url6.src=‘https://s.click.taobao.com/t?e=m%3D2%26s%3DHZEttuKHgsIcQipKwQzePOeEDrYVVa64K7Vc7tFgwiHjf2vlNIV67v%2F8Y1H8VerAkJM98MoZX0htRXA4sav%2FhPGHrVlrwHlDy4OPN0jG0Y4EoxtUi1Msw3XCEVLUF7xLXsOHcg3FTFoSIz%2BVIb9tlH3Fe%2FPTz6B%2FiXAbQbpTkl3GJe8N%2FwNpGw%3D%3D&pvid=10_110.182.23.4_1746_1527642936773’;
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()’,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(‘<div style=”width:’+widths+’px;height:’+heights+’px;overflow:hidden;text-overflow:clip;”>’);
document.write(‘<div><a id=”url”><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: #888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;height:12px;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>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
天枰大胖纸123
2018-04-09 · TA获得超过1858个赞
知道小有建树答主
回答量:24
采纳率:92%
帮助的人:3677
展开全部

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-">

<title>最简单的轮播广告</title>

<style>

body, div, ul, li {

margin: ;

padding: ;

}

ul {

list-style-type: none;

}

body {

background: #;

text-align: center;

font: px/px Arial;

}

#box {

position: relative;

width: px;

height: px;

background: #fff;

border-radius: px;

border: px solid #fff;

margin: px auto;

}

#box .list {

position: relative;

width: px;

height: px;

overflow: hidden;

border: px solid #ccc;

}

#box .list li {

position: absolute;

top: ;

left: ;

width: px;

height: px;

opacity: ;

transition: opacity .s linear

}

#box .list li.current {

opacity: ;

}

#box .count {

position: absolute;

right: ;

bottom: px;

}

#box .count li {

color: #fff;

float: left;

width: px;

height: px;

cursor: pointer;

margin-right: px;

overflow: hidden;

background: #F;

opacity: .;

border-radius: px;

}

#box .count li.current {

color: #fff;

opacity: .;

font-weight: ;

background: #f

}

</style>

</head>

<body>

<div id="box">

<ul>

<li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>

<li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>

<li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>

<li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>

<li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>

</ul>

<ul>

<li></li>

<li class=""></li>

<li class=""></li>

<li class=""></li>

<li class=""></li>

</ul>

</div>

<script>

var box=document.getElementById('box');

var uls=document.getElementsByTagName('ul');

var imgs=uls[].getElementsByTagName('li');

var btn=uls[].getElementsByTagName('li');

var i=index=; //中间量,统一声明;

var play=null;

console.log(box,uls,imgs,btn);//获取正确

//图片切换, 淡入淡出效果我是用(transition: opacity .s linear)做的,不纠结、简单 在css里面

function show(a){    //方法定义的是当传入一个下标时,按钮和图片做出对的反应

for(i=;i<btn.length;i++ ){

btn[i].className='';  //很容易看懂吧?每个按钮都先设置成看不见,然后把当前按钮设置成可见。

btn[a].className='current';

}

for(i=;i<imgs.length;i++){ //把图片的效果设置和按钮相同

imgs[i].style.opacity=;

imgs[a].style.opacity=;

}

}

//切换按钮功能,响应对应图片

for(i=;i<btn.length;i++){

btn[i].index=i; //不知道你有没有发现,循环里的方法去调用循环里的变量体i,会出现调到的不是i的变动值的问题。所以我先在循环外保存住

btn[i].onmouseover=function(){

show(this.index);

clearInterval(play); //这就是最后那句话追加的功能

}

}

//自动轮播方法

function autoPlay(){

play=setInterval(function(){ //这个paly是为了保存定时器的,变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了

index++;

index>=imgs.length&&(index=);//可能有优先级问题,所以用了括号,没时间测试了。

show(index);

},)

}

autoPlay();//马上调用,我试过用window.onload调用这个方法,但是调用之后影响到了其他方法,使用autoPlay所以只能这样调用了

//div的鼠标移入移出事件

box.onmouseover=function(){

clearInterval(play);

};

box.onmouseout=function(){

autoPlay();

};

//按钮下标也要加上相同的鼠标事件,不然图片停止了,定时器没停,会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。

</script>

</body>

</html>

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 2条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式