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

来源：互联网发布：php 十六进制转字符串编辑：程序博客网时间：2024/05/18 20:50
这是使用绝对定位来做
<!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>
0 0