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

实现轮播图效果

最新推荐文章于 2020-03-31 10:25:05 发布

面条请不要欺负汉堡

最新推荐文章于 2020-03-31 10:25:05 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签：轮播图兼任ie7以上的轮播图适用于各个浏览器的轮播 jq适用于各个浏览器的轮播绝对定位

本文链接：https://blog.csdn.net/gao_xu_520/article/details/60571794

jquery 专栏收录该内容

19 篇文章

订阅专栏

这是使用绝对定位来做

<!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>