图片轮播(左右切换)--js原生和jquery实现左右切换的做法基本步骤跟 上一篇文章 淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分对于我这种左右切换式1.首先是个外围部分(其实也就是最外边的整体wrapper)2.接着就是你设置图片轮播的地方 ...
图片轮播(左右切换)--js原生和jquery实现
左右切换的做法基本步骤跟 上一篇文章 淡入淡出 类似,只不过修改了一些特定的部分
(1)首先是页面的结构部分
对于我这种左右切换式
1.首先是个外围部分(其实也就是最外边的整体wrapper)2.接着就是你设置图片轮播的地方(也就是一个banner吧)3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式)
4.然后是图片两端的左箭头和右箭头6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li)7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div 或 ul-->li)
由此,可以先构造出html结构
<div id="wrapper"><!-- 最外层部分 --> <div id="banner"><!-- 轮播部分 --> <ul class="imgList"><!-- 图片部分 --> <li><a href="#"><img src='/images/loading.gif' data-original="./img/test1.jpg" width="400px" height="200px" ></a></li> <li><a href="#"><img src='/images/loading.gif' data-original="./img/test2.jpg" width="400px" height="200px" ></a></li> <li><a href="#"><img src='/images/loading.gif' data-original="./img/test3.jpg" width="400px" height="200px" ></a></li> <li><a href="#"><img src='/images/loading.gif' data-original="./img/test4.jpg" width="400px" height="200px" ></a></li> <li><a href="#"><img src='/images/loading.gif' data-original="./img/test5.jpg" width="400px" height="200px" ></a></li> </ul> <img src='/images/loading.gif' data-original="./img/prev.png" width="20px" height="40px" id="prev"> <img src='/images/loading.gif' data-original="./img/next.png" width="20px" height="40px" id="next"> <div class="bg"></div> <!-- 图片底部背景层部分--> <ul class="infoList"><!-- 图片左下角文字信息部分 --> <li class="infoOn">puss in boots1</li> <li>puss in boots2</li> <li>puss in boots3</li> <li>puss in boots4</li> <li>puss in boots5</li> </ul> <ul class="indexList"><!-- 图片右下角序号部分 --> <li class="indexOn">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div>
原标题:图片轮播(左右切换)
关键词:图片
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。