简单的 js手写轮播图
<div>
<div>
<div>
<img src="">
</div>
<div>
<img src="">
</div>
<div>
<img src="">
</div>
<div>
<img src="">
</div>
</div>
</div>
css
.na1 {
width: 1349px;
height: 620px;
overflow: hidden;
}
.dd {
/* width: 100%; */
height: 100%;
margin-left: -586px;
}
.pp {
width: 5396px;
height: 620px;
margin-left: 0px;
}
.aa {
/* width: 100%; */
height: 100%;
margin-left: -586px;
}
js
/* 轮播图 */
var aa=0;
var waili=document.getElementsByClassName("pp")[0];
var timer;
// dingshiqi
timer=setInterval(function(){
waili.style.transition="1s";
aa=aa-1349;
if (aa<=-4077) {
waili.style.transition="0s";
aa=0;
}
waili.style.marginLeft=aa+"px";
},2500)
})
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="" type="text/javascript" charset="utf-8"></script> </head> <style type="text/css"> .na1 { width: 1349px; height: 620px; overflow: hidden; } .dd { /* width: 100%; */ height: 100%; margin-left: -586px; } .pp { width: 5396px; height: 620px; margin-left: 0px; } .aa { /* width: 100%; */ height: 100%; margin-left: -586px; } </style> <body> <!-- header--> <div> <div> <div> <img src=""> </div> <div> <img src=""> </div> <div> <img src=""> </div> <div> <img src=""> </div> </div> </div> <!-- 摸快2 --> </body> </html> <script type="text/javascript"> // 2.轮播图 $(function(){ /* huidingbu */ $(window).scroll(function() { var hui = $(document).scrollTop(); // alert(hui); // console.log(hui); if (hui > 300 ) { $(".jiantou").fadeIn(); } else{ $(".jiantou").fadeOut(); } }) $(".jiantou").click(function(){ $("html,body").animate({ scrollTop:‘0px‘},500); }) // $(".cent211").mouseover(function(){ // $(this).css("border-right","1px solid grey"); // setTimeout(function(){ // $(".cent211").css("border-right","none"); // },1000); // }); // $(".cent311").mouseover(function(){ // $(this).css("border-right","1px solid grey"); // setTimeout(function(){ // $(".cent311").css("border-right","none"); // },1000); // }); /* 轮播图jq */ /* var aa=0; var waili=$(".pp").eq(0); var timer; // dingshiqi timer=setInterval(function(){ waili.css("transition","1s"); aa=aa-1349; if (aa<=-4077) { waili.css("transition","0"); aa=0; } waili.css("marginLeft",aa+"px"); },2500) */ /* 轮播图 */ var aa=0; var waili=document.getElementsByClassName("pp")[0]; var timer; // dingshiqi timer=setInterval(function(){ waili.style.transition="1s"; aa=aa-1349; if (aa<=-4077) { waili.style.transition="0s"; aa=0; } waili.style.marginLeft=aa+"px"; },2500) }) /* $(".cent211").mouseover(function(){ $(this).animate("border-right","1px solid grey").delay(1000).("border-right","none"); }) */ </script>
简单的 js手写轮播图
，温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/41964.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")