图片轮播图

最新推荐文章于 2024-04-15 10:28:24 发布

置顶樱梦雪苹宝

最新推荐文章于 2024-04-15 10:28:24 发布

阅读量309

点赞数

分类专栏： js样式

js样式专栏收录该内容

20 篇文章 0 订阅

订阅专栏

转载：https://blog.csdn.net/qq_17615475/article/details/50474240

大家好：今天其实想写的是一个手动右滑显示图片的功能，结果写废了，结果搞成了轮播图。。。

好吧，记录一下轮播图，参考了上面链接的代码，再加上自己的修改。

项目结构

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>欢迎来到-艺馨制造</title>
<link rel="stylesheet" type="text/css"  href="css/css3.css"  charset="utf-8">
<script src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function (){
    $('.slider').each(function() {
        var $this=$(this);
        var $group=$this.find('.slide-group');
        var $slides=$this.find('.slide');
        var buttonArray=[];
        var currentIndex=0;
        var timeout;
     
        
        function move(newIndex){//向下一张图片移动的方法
            var animateLeft, slideLeft;
            
            advance();//循环播放图片
            
            if($group.is(':animated')||currentIndex===newIndex){//如果是当前图片，直接返回，什么也不做
                return;
            }
            
            buttonArray[currentIndex].removeClass('active');  //将图片下方的小圆点移到下一个
            buttonArray[newIndex].addClass('active');
            
            if(newIndex>currentIndex){ //如果下张图片在当前图片的右边，则向左移动
                slideLeft='100%';
                animateLeft='-100%';
            }else{//反之，向相反方向移动
                slideLeft='-100%';
                animateLeft='100%';
            }
            $slides.eq(newIndex).css({left:slideLeft,display:'block'});//为新索引指向的图片添加css属性，显示该图片及设置左边位置
            
            $group.animate({left:animateLeft},function(){//设置动画
                $slides.eq(currentIndex).css({display:'none'});//隐藏当前图片
                $slides.eq(newIndex).css({left:0});
                $group.css({left:0});
                currentIndex=newIndex;
            });
        }
        function advance(){
            clearTimeout(timeout);
            timeout=setTimeout(function(){//setTimeout方法在指定毫秒数后调用函数
                if(currentIndex<($slides.length-1)){//如果当前不是最后一张图片，则向下一张图片移动
                    move(currentIndex+1);
                }else{//如果当前是最后一张图片，移到第一张图片
                    move(0);
                }
            },4000);
        }
        $.each($slides,function(index){ //对页面上的每一个图片循环，参数是这个图片的索引，程序从这里开始执行，这段意在添加图片下方的小圆点按钮
            var $button=$('<button type="button" class="slide-btn">•</button>');//新建按钮元素，存在变量$button，即图片下方的小圆点
            if(index===currentIndex){ //如果索引与变量当前索引的值相同，这个按钮添加active类，在css中可看到active的行为，灰点变黑
                $button.addClass('active');
            }
            $button.on('click',function(){//点击按钮时，执行move函数，即将显示该按钮指向的图片
                move(index);
            }).appendTo('.slide-buttons'); //将按钮添加到图片下方的类为slide-buttons的div区域内
            buttonArray.push($button); //push()方法向数组末尾添加一个元素
        });
        advance();//循环播放图片
    });
});
</script>
</head>
<body>
    艺馨测试
    <div class="slider">
                    <div class="slide-viewer">
                        <div class="slide-group">
                            
                            <div class="slide slide-1">
                                <img class="img-responsive" src="img/yellowcard/1.png" alt="黄卡1" />
                            </div>
                            <div class="slide slide-2">
                                <img class="img-responsive" src="img/yellowcard/2.png" alt="黄卡2" />
                            </div>
                            <div class="slide slide-3">
                                <img class="img-responsive" src="img/yellowcard/3.png" alt="黄卡3" />
                            </div>
                            <div class="slide slide-4">
                                <img class="img-responsive" src="img/yellowcard/4.png" alt="黄卡4" />
                            </div>
                        </div>
                    </div>
                    <div class="slide-buttons"></div>
                </div>
</body>
</html>

css3

.slide-viewer{
	position:relative;
	overflow:hidden;
	height:400px;
}
.slide{
	height:100%;
	width:100%;
	display:none;
	position:absolute;
}
.slide:first-child{
	display:block;
}
.slide-buttons{
	text-align:center;
}
img{
  background-size:contain;
  display: block;
  height: auto;
  max-width: 100%;
}

1.png
2.png
3.png
4.png

jquery-1.7.2.js

传不上来，自行下载吧。。

效果：

下面的4个按钮是轮播的。

樱梦雪苹宝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片轮播图

转载：https://blog.csdn.net/qq_17615475/article/details/50474240大家好：今天其实想写的是一个手动右滑显示图片的功能，结果写废了，结果搞成了轮播图。。。好吧，记录一下轮播图，参考了上面链接的代码，再加上自己的修改。index.html&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4...
复制链接

扫一扫