HTML5技术

使用js制作一般网站首页图片轮播效果 - 骑猪敲代码

字号+ 作者:H5之家 来源:博客园 2016-08-30 16:00 我要评论( )

图片轮播 .warp { width height position margin overflow #box { width height position top left overflow #box #con { width height overflow #con img { float width height #btnL { position left top width height background cursor #btnR { position

图片轮播 .warp{ width height position margin overflow #box{ width height position top left overflow #box #con{ width height overflow #con img{ float width height #btnL{ position left top width height background cursor #btnR{ position right top width height background cursor #num{ position bottom left overflow list-style #num li{ float margin font-size line-height height width background text-align cursor #num li.select{ background-color color123456); ); ); ); ); ); ); ; ].clientWidth; ; box.scrollLeft; x; start; ; ; clearInterval(timer2); timer2(){ minstep++; maxstep) { clearInterval(timer2); } start+=stepLength; box.scrollLeft=start; },20) ) { lis[i].className; } lis[x].className; } clearInterval(timer1); timer1(){ x++; imgs.length) { x=0; } imgScroll(); ) { lis[i].className; lis[x].className; } },3000); } move();(){ clearInterval(timer1); x++; imgs.length) { x=0; } imgScroll(); move(); } btnL.onclick=function(){ clearInterval(timer1); x--; ) { x; } imgScroll(); move(); } ) { lis[i].index=i; lis[i].onclick=function(){ x=this.index; imgScroll(); move(); } }

具体效果我是仿照hao123导航页面图片轮播的效果,大家可以去那个网站参考

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 【高级功能】使用多媒体 - Luka.Ye

    【高级功能】使用多媒体 - Luka.Ye

    2016-08-27 11:00

  • 【高级功能】使用canvas元素(第一部分) - Luka.Ye

    【高级功能】使用canvas元素(第一部分) - Luka.Ye

    2016-08-27 10:00

  • 使用纯前端JavaScript 实现Excel IO - 胖乎乎的小奶油

    使用纯前端JavaScript 实现Excel IO - 胖乎乎的小奶油

    2016-08-26 15:00

  • canvas 制作flappy bird(像素小鸟)全流程 - 熊猫呵呵哒

    canvas 制作flappy bird(像素小鸟)全流程 - 熊猫呵呵哒

    2016-08-26 11:01

网友点评
i