求淘宝通栏图片轮播代码,包含js,css,html,类似下图,求各路大神。

html-css017

求淘宝通栏图片轮播代码,包含js,css,html,类似下图,求各路大神。,第1张

用firefox的 firebug插件查看元素,可以找到css,html的源代码。用js操作动画的代码实现的方式不同。

简单的思路:把三张图P到一起,设置成背景,假如每张图width:600px,用JS控制每1500毫秒(1.5秒)width增加600px,当width=1800px 设置width=600。

最常用的一种方法:就是浮动,浮动之后会自动往右挤,挤不下就到第二行了。  

     <ul>

           <li>第一张图片</li>

           <li>第二张图片</li>

           <li>第三张图片</li>

           <li>第四张图片</li>

           <li>第五张图片</li>

           <li>第六张图片</li>

           <li>第七张图片</li>

           <li>第八张图片</li>

    </ul>

<style> ul{width:800px height:200px} li{width:195pxheight:98pxmargin:1px auto float:leftlist-style-type:none}

</style>

通过背景上传的海报的确会和固定背景冲突,我试过。但是通栏海报可以用代码添加在950的自定义区就可以了,还可以是轮播的哦,虽然加在了950区,但是是1920的通栏效果。不影响你的固定背景 不冲突。

有一个缺点就是通过代码添加的海报 ,和导航之间有一个缝隙。

但是不想mai模版,就只能做到这样了