求一个简单的js实现轮播代码
<!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>
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>
<!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>