- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <meta charset="utf-8"/>
- <script type="text/javascript" src1="jquery-1.8.3.js"></script>
- <style type="text/CSS">
- div,image,button,ul,li{
- margin: 0;
- padding: 0;
- }
- /*显示图片的内容区,大小刚好等于图片的大小*/
- .img-scroll{
- position: relative;
- width: 430px;
- height: 320px;
- margin: 0 auto;
- overflow: hidden;
- }
- /*上下一张按钮,样式随意控制*/
- .img-scroll>button{
- display: none;
- position: absolute;
- top: 50%;
- margin-top: -22px;
- width: 48px;
- height: 48px;
- border-radius: 50%;
- border: 3px solid #eee;
- outline: none;
- color: #eee;
- font-size: 30px;
- font-weight: bold;
- background-color: rgba(0,0,0,.3);
- cursor: pointer;
- }
- .next{
- right: 0;
- }
- /*有多少张图片,就把宽度设为内容区宽度*图片数量,让所有图片排成一横排,比如我这就是430*5=2150*/
- .img-content{
- width: 2150px;
- height: 320px;
- overflow: hidden;
- }
- /*装每张图片的div*/
- .img-content>div{
- float:left;
- width: 430px;
- height: 320px;
- }
- .arc-list{
- position: absolute;
- bottom: 0;
- }
- .arc-list>li{
- display: inline-block;
- width: 15px;
- height: 15px;
- border-radius: 50%;
- list-style-type: none;
- background-color: rgba(0,0,0,.5);
- }
- </style>
- </head>
- <body>
- <div class="img-scroll" id="imgScroll">
- <div class="img-content" id="imgContent">
- <div><a href="#"><img src1="1.png" alt="gg"/></a></div>
- <div><a href="#"><img src1="2.png" alt="gg"/></a></div>
- <div><a href="#"><img src1="3.png" alt="gg"/></a></div>
- <div><a href="#"><img src1="4.png" alt="gg"/></a></div>
- <div><a href="#"><img src1="5.png" alt="gg"/></a></div>
- </div>
- <button type="button" id="prev"><</button>
- <button type="button" class="next" id="next">></button>
- <ul class="arc-list" id="arcList">
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ul>
- </div>
- <script type="text/javascript">
- $(function(){
- //缓存存放图片的区域
- var $imgContent=$("#imgContent"),
- //得到内容去的宽度
- imgScrollWidth=$("#imgScroll").css("width");
- //缓存小圆点和它的数组长度
- $arcLi=$("#arcList li"),
- arcLiLen=$arcLi.length,
- //用来存放需要关闭的setInterval的值
- closeSet=null,
- //用于确定该显示第几个小圆点的参数
- arcNum=0;
- //默认将第一个小圆点点亮
- $arcLi.get(arcNum).style.backgroundColor="red";
- console.log(imgScrollWidth);
- /*自动滚动图片的方法,很简单,移走第一张,下一张自然的就显示出来了,
- 然后把第一张放到末尾去,并把它的marginLeft归零,当播放到最后一张就可以无缝衔接第一张了
- */
- function imgScroll(){
- //每次将第一个div向左移出内容区,下一个div自动显示在内容区,并将第一个div附加到父元素的最后
- $imgContent.children("div:first").animate({marginLeft:"-"+imgScrollWidth+""},1000,"swing",function(){
- $(this).css({marginLeft:"0"}).appendTo($imgContent);
- //将当前小圆点熄灭
- $arcLi.get(arcNum).style.backgroundColor="rgba(0,0,0,.5)";
- if(arcNum==arcLiLen-1){
- arcNum=0;
- }else{
- arcNum++;
- }
- //将下一个小圆点点亮
- $arcLi.get(arcNum).style.backgroundColor="red";
- //判断小圆点是否为最后一个,如果是,则将标记小圆点的参数归零,重新从第一个开始
- });
- }
- closeSet=setInterval(imgScroll,3000);
- //鼠标放在图片上停止滚动,鼠标离开图片继续滚动
- $("#imgScroll").hover(
- function(){
- clearInterval(closeSet);
- //控制按钮的显示
- $("#imgScroll button").show(300,"swing");
- },
- function(){
- closeSet=setInterval(imgScroll,3000);
- $("#imgScroll button").hide(300,"swing");
- });
- //手动点击下一张时只需手动调用imgScroll就行
- $("#next").on("click",function(){
- /*如果连续点击下一张的话,会引发不和谐的东西,所以我们判断第一张图片的marginLeft值,如果正在执行动画,它的marginLeft是不会为0的
- 所以这样判断就确保了执行完了一个动画才会调用下一张的方法
- */
- var marginLeft=parseInt($imgContent.children("div:first").css("marginLeft"));
- if(marginLeft==0){
- imgScroll();
- }
- });
- //手动点击上一张图片的方法
- $("#prev").on("click",function(){
- //判断同上
- var marginLeft=parseInt($imgContent.children("div:first").css("marginLeft"));
- if(marginLeft==0){
- //上一张图片就是刚才移动到末尾的那张,所以我把末尾的那张添加到第一张的前面
- $imgContent.children("div:first").before($imgContent.children("div:last"));
- /*注意这里的第一张是刚才末尾的那张图片了,设置marginLeft为-imgScrollWidth是将它放在内容区的左边,营造从左滑向右的效果
- 这里的图片滚动全部操作第一张图片,这张图片向左离开内容区时,就将位置留给下一张显示,当它从左到右回来是,就把下一张挤出内容区
- */
- $imgContent.children("div:first").css({marginLeft:"-"+imgScrollWidth+""}).animate({marginLeft:"0"},1000,"swing",function(){
- //将当前小圆点熄灭
- $arcLi.get(arcNum).style.backgroundColor="rgba(0,0,0,.5)";
- if(arcNum==0){
- arcNum=arcLiLen-1;
- }else{
- arcNum--;
- }
- //将上一个小圆点点亮
- $arcLi.get(arcNum).style.backgroundColor="red";
- //判断小圆点是否为第一个,如果是,则将标记圆点的参数设为最大,即最后一个小圆点
- });
- }
- });
- });
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/0508201410132.html
来源: http://www.codesnippet.cn/detail/0508201410132.html