【JavaScript&jQuery】轮展图

用bootstrap实现轮展图和用Jquery自定义轮展图两种
 
1.使用bootstrap插件
效果图:
用一个超简单的方法,那就是用bootstrap的插件,什么?不懂bootstrap?没关系,只要会换图片就可以了。
第一步:准备好bootstrap.min.css和bootstrap.min.js(不能是bootstrap.js,因为没有集成其插件),最后还有jquery.js。
第二步:开始干活,data-slide-to来设置图片底部滑动索引,data-slide设置是下一页还是上一页,最后是设置图片。
第三步:处理细节问题。


<!DOCTYPE html> <html> <head> <title>Bootstrap 轮播插件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <div id="myCarousel" class="carousel slide" style="500px;height:313px;margin:50px auto;"> <!-- 小圆点点击切换 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 轮播的内容 --> <div class="carousel-inner"> <div class="item active"> <img src="image/1.jpg" width="500" height="313" alt=""> </div> <div class="item"> <img src="image/2.jpg" width="500" height="313" alt=""> </div> <div class="item"> <img src="image/3.jpg" width="500" height="313" alt=""> </div> </div> <!-- 左右按钮点击切换 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev" style="10%">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next" style="10%">›</a> </div> <script type="text/javascript"> $(function(){ $('#myCarousel').carousel({ interval: 3000 // 默认5s }); }); </script> </body> </html>
这样轮展图就做完了,需要修改的就只有图片路径了。就是样式比较单一
如果你比较任性,就想做出属于自己的轮展图,没问题,下面就交你怎么做
 
 
2.自定义轮展图
 
效果图:
<!doctype html>  
<html>  
    <head>  
        <!--声明当前页面的编码集:charset=gbk,gbk2312(中文编码),utf-8(国际编码)-->  
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">  
        <!--当前页面的三要素-->  
        <title>图片切换</title>  
        <meta name="Keywords" content="关键词,关键词">  
        <meta name="Description" content="">  
        <!--css,js-->  
        <style type="text/css">  
            *{margin:0;padding:0;}  
            img{border:none;}  
            ul li{list-style:none;}  
            /*背景 start*/  
            .bg{100%;height:300px;background:#a534d6;position:relative;}  
            /*背景图片 start*/  
            .b_img{760px;height:300px;overflow:hidden;margin:50px auto;}  
            /*背景图片 end*/  
            /*图片下方的按钮 start*/  
            .bg .nav{position:absolute;bottom:10px;left:46%;background:#000;opacity:0.5;filter:alpha(opacity=50);border-radius:25px;}  
            .bg .nav ul{display:inline-block;padding:5px 9px;}  
            .bg .nav ul li{float:left;10px;height:10px;border:1px solid #fff;border-radius:10px;margin:0 5px;}  
            .bg .nav ul .select{background:#fff;}  
            .bg .btn{46px;height:70px;background:url("images/icon.png");position:absolute;display:none;}  
            .bg .show{display:block;}  
            .bg .b_pre{top:40%;left:300px;background-position:49px 0px;}  
            .bg .b_next{top:40%;left:1014px;background-position:0px 309px;}  
            /*图片下方的按钮 end*/  
            /*背景 end*/  
        </style>  
    </head>  
    <body>  
        <div class="bg">  
            <ul class="b_img">  
                <li>  
                    <a href="#">  
                        <img src="images/banner-1.jpg" width="760" height="300" alt=""/>  
                    </a>  
                </li>  
                <li>  
                    <a href="#">  
                        <img src="images/banner-2.jpg" width="760" height="300" alt=""/>  
                    </a>  
                </li>  
                <li>  
                    <a href="#">  
                        <img src="images/banner-3.jpg" width="760" height="300" alt=""/>  
                    </a>  
                </li>  
                <li>  
                    <a href="#">  
                        <img src="images/banner-4.jpg" width="760" height="300" alt=""/>  
                    </a>  
                </li>  
                <li>  
                    <a href="#">  
                        <img src="images/banner-5.jpg" width="760" height="300" alt=""/>  
                    </a>  
                </li>  
            </ul>  
            // 为了使过渡更和谐  
            <div class="nav">  
                <ul>  
                    <li class="select" data-color="#a534d6"></li>  
                    <li data-color="#6365ce"></li>  
                    <li data-color="#4a4d9c"></li>  
                    <li data-color="#523484"></li>  
                    <li data-color="#009ee7"></li>  
                </ul>  
            </div>  
            <a href="#" class="btn b_pre"></a>  
            <a href="#" class="btn b_next"></a>  
        </div>  
    <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        $(function(){  
            // 定义一个按钮的索引  
            var index = 0;  
            // 定义一个是否播放的属性,因为要判断鼠标停留在图片上的时候停止播放  
            var play_setInterval = null;  
            // 开始自动切换  
            auto_banner();  
            // 按钮的显与隐  
            $(".bg").mouseover(function(){  
                $(".btn").addClass("show");  
                // 鼠标划在上面时候停止播放  
                clearInterval(play_setInterval);  
            }).mouseout(function(){  
                $(".btn").removeClass("show");  
                auto_banner();  
            });  
            // 第一种:下标与图片联动  
            // 先是做下标动  
            $(".nav").find("li").mouseover(function(){  
                // this 表示当前的li;siblings是他的兄弟元素,没有select就add;有就remove  
                $(this).addClass("select").siblings().removeClass("select");  
                // 图片的下标的联动的  
                // 第一条件就是获取图片的下标  
                var _index = $(this).index();  
                // 因为要下标和按钮对应  
                index = _index;  
                // 第二条件就是让图片根据下标消失  
                $(".b_img").find("li").eq(_index).fadeIn(1000).siblings().hide();  
                // 如果背景图片是白色;在切换过程中会有刺眼的感觉,所以要在切换过程中更改背景颜色  
                // 获取背景颜色  
                var _background = $(this).data("color");  
                // 通过css样式更改背景颜色  
                $(this).parents(".bg").fadeIn(1000).css("background",_background);  
            });  
            // 第二种:按钮与图片联动  
            // 既然是按钮;就是需要点击(前进按钮)  
            $(".b_next").click(function(){  
                // 每点击一次,索引值加一  
                index ++;  
                // 索引长度 注意是length而不是length()  
                var _length = $(".nav").find("li").length;  
                // 当索引值大于索引长度的时候归零  
                if (index >= _length){index = 0;}  
                // 点击按钮图片切换  
                $(".b_img").find("li").eq(index).fadeIn(1000).siblings().hide();  
                // 点击按钮图片背景切换  
                var _background = $(".nav").find("li").eq(index).data("color");  
                $(this).parents(".bg").fadeIn(1000).css("background",_background);  
                // 点击按钮下标切换  
                $(".nav").find("li").eq(index).addClass("select").siblings().removeClass("select");  
            });  
            // 后退按钮  
            $(".b_pre").click(function(){  
                index --;  
                var _length = $(".nav").find("li").length;  
                if (index <0){index = _length - 1;}  
                $(".b_img").find("li").eq(index).fadeIn(1000).siblings().hide();  
                var _background = $(".nav").find("li").eq(index).data("color");  
                $(this).parents(".bg").fadeIn(1000).css("background",_background);  
                $(".nav").find("li").eq(index).addClass("select").siblings().removeClass("select");  
            });   
            // 自动切换  
            function auto_banner(){  
                var _length = $(".nav").find("li").length;  
                play_setInterval = setInterval(function(){  
                if(index > _length){index = _length; }  
                $(".b_img").find("li").eq(index).fadeIn(1000).siblings().hide();  
                var _background = $(".nav").find("li").eq(index).data("color");  
                $(".bg").fadeIn(1000).css("background",_background);  
                $(".nav").find("li").eq(index).addClass("select").siblings().removeClass("select");  
                if(index == _length){index = 0;}   
                else{index ++; }  
                },2000);  
            };  
        });   
    </script>  
    </body>  
</html>  
原文地址:https://www.cnblogs.com/dflmg/p/6385397.html