图片轮播

  我的认为在web设计中,一个图片轮播比文字描述更直接,更简洁,最重要的是吸引眼球,特别是关于公司的产品,与其长篇大论还不如弄几张图片加个连接,若是客户想了解,点击图片内容天然就有了,好了,都是现学现卖,有不对的地方望大神更正指教,谢谢!!!css

 一、先来看一下效果图:(这种效果图怎么传,还有看到其余的博客张贴的代码,那是怎么搞得,实在不会,只能截图了,呵呵)jquery

   二、我作图片轮播是用在了关于公司项目上,在登陆主页上加的产品展现一项:web

(1)HTML部分:函数

(2)css部分:spa

(3)JS部分:主要是设置图片轮播间隔时间、左箭头、右箭头事件、右下角数字索引、清除定时器等;设计

设置间隔时间:blog

左箭头:索引

右箭头:事件

右下角数字索引:图片

清除定时器:

JS库:<script src="jquery.js" language="JavaScript"></script>

重大发现:我如今看到这个changeTo函数,终于明白了,当时调图片的时候为啥不对,总觉得css中imgList的width属性值必须是400的整数倍,就像如今图片上标识的同样,原来这个图片宽度400px是这里决定的,width与图片数量的乘积就是imgList的width值!!!当时搞不懂的问题,今天在总结中忽然明白了,太棒了!!!

      心得:虽然我不精通web,第一次作,可是只要用心仍是能够掌握的,望共勉!!!

相关文章
相关标签/搜索