适用于各个浏览器并兼任ie7以上的轮播图

末蓝、 2021-09-12 01:32 127阅读 0赞

![20170306103622463][]

这是使用绝对定位来做

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>轮播图</title>
        <style type="text/css">
            body,ul,li{margin: 0;padding: 0;}
            /*幻灯片*/
            .bannerwarp{
                width: 100%;
                height: 600px;
                position: relative;
                overflow: hidden;
            }
            .banner{
                width: 100%;
                height: 600px;
                min-width: 1920px;
                left: 50%;
                margin-left: -960px;
                position: absolute;
            }
            .banner>ul{
                height:600px;
                position:absolute;
            }
            .banner>ul li{
                float:left;
                min-width:1920px;
                height:600px;
                overflow:hidden;
                position:relative;
            }
            .banner>ul li a{
                display: block;
            }
            .bannerbtn{
                position: absolute;
                bottom: 10px;
                left: 0px;
                right: 0px;
                text-align: center;
            }
            .bannerbtn span{
                display: inline-block;
                _display: inline;
                _zoom: 1;
                width: 15px;
                height: 15px;
                _font-size: 0;
                margin:2px 8px;
                cursor: pointer;
                border-radius: 50%;
                background: #ECE6E6; 
                box-shadow: 1px 4px 16px #C0BDBD;
            }
            .bannerbtn span.on{
                width: 17px;
                height: 17px;
                background-color: #688C1C;
                box-shadow: 1px 4px 16px #C0BDBD;
            }
        </style>
    </head>
    <body>
    <div class="bannerwarp">
        <div  class="banner">
            <ul>
         <li><a href="#"><img src="http://img1.sinopromise.com/941in2/ad/1608/57a8283e50e80.jpg"></a></li>
         <li><a href="#"><img src="http://img1.sinopromise.com/941in2/ad/1608/57a8288bd5172.jpg"></a></li>
         <li><a href="#"><img src="http://img1.sinopromise.com/941in2/ad/1608/57a83e0cbcb2b.jpg"></a></li>
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
       $(document).ready(function () {
            var sWidth = $(".banner").width(); //获取焦点图的宽度（显示面积）
            var len = $(".banner ul li").length; //获取焦点图个数
            var index = 0;
            var picTimer;
            //以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
            var btn = "<div class='bannerbtn'>";
            for(var i=0; i < len; i++) {
                btn += "<span></span>";
            }
            btn += "</div>";
            $(".bannerwarp ").append(btn);
            //为小按钮添加鼠标滑入事件，以显示相应的内容
            $(".bannerbtn span").mouseenter(function() {
                index = $(".bannerbtn span").index(this);
                showPics(index);
            }).eq(0).trigger("mouseenter");
             //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
            $(".banner").hover(function() {
                clearInterval(picTimer);
            },function() {
                picTimer = setInterval(function() {
                    showPics(index);
                    index++;
                    if(index == len) {index = 0;}
                },3000); //此4000代表自动播放的间隔，单位：毫秒
            }).trigger("mouseleave");
            $(" .banner ul").css("width",len* sWidth); 
            //显示图片函数，根据接收的index值显示相应的内容
            function showPics(index) { //普通切换
                var moveLen = -index *sWidth;
                $(".banner ul").stop(true,false).animate({left:moveLen},300); 
    //通过animate()调整ul元素滚动到计算出的position
                $(".bannerbtn span").removeClass("on").eq(index).addClass("on"); 
    //为当前的按钮切换到选中的
    $(".bannerbtn span").stop(true,false).animate({"opacity":"1"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); 
    //为当前的按钮切换到选中的效果
            }
       });
    </script>
    </body>
    </html>

[20170306103622463]: /images/20210813/6950b406110a4506844e0998848b8b81.png