你的位置:首页 > 软件开发 > Java > 图片轮播(左右切换)

图片轮播(左右切换)

发布时间:2015-04-22 23:03:43
图片轮播(左右切换)--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 (#换成@)。