使用简单的jqury实现幻灯片效果（有很多问题，先记下来）

本文链接：https://blog.csdn.net/u013062731/article/details/46041509

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>幻灯片效果</title>
<link href="css/app.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var n=1;
        $(".left_button").click(function(){
            $(".li_"+n).next(this).fadeIn("300");
            $(".li_"+n).fadeOut("300");
            n++;
            if(n>=6){
                $(".li_"+n).fadeOut("300");
                n=1;
                $(".li_"+n).fadeIn("300");
                }
            });
        $(".right_button").click(function(){
            n--;
            $(".li_"+n).fadeOut("300");
            alert(".li_"+n);
            $(".li_"+n).prev(this).fadeIn("300");

            if(n>=1){
                $(".li_"+n).fadeOut("300");
                n=6;
                $(".li_"+n).fadeIn("300");
                }
            });
      });
</script>
</head>

<body>
    <div class="demo">
        <div class="left_button"></div>
        <div class="right_button"></div>
        <ul class="demo_ul">
            <li class="demo_li li_1"></li>
            <li class="demo_li li_2"></li>
            <li class="demo_li li_3"></li>
            <li class="demo_li li_4"></li>
            <li class="demo_li li_5"></li>
        </ul>

</div>
</body>
</html>

app.css

@charset "utf-8";
/* CSS Document */
.demo{
    width:700px;
    height:270px;
    position:relative;
    padding-left:0px;
    margin-left:50px;
    overflow-x:hidden;/*这一个比较重要*/
    }
.demo_ul{
    list-style:none;
    padding-left:0px;
    margin-top:0px;
    width:5000px;
    }
.demo_li{
    margin-left:0px;
    float:left;
    }
.left_button{
    background: url(../img/btn_left.png) no-repeat center;
    background-repeat: no-repeat;
    position: absolute;
    width: 56px;
    height: 202px;
    background-color: #C7C3C3;
    opacity: 0.5;
    }
.right_button{
    background: url(../img/btn_right.png) no-repeat center;
    position:absolute;
    background-color: #C7C3C3;
    opacity: 0.5;
    width: 56px;
    height: 202px;
    margin-left: 585px;
    }
.li_1{
    background: url(../img/1.jpg) no-repeat;
    width:752px;
    height:270px;
    }
.li_2{
    background: url(../img/2.jpg) no-repeat;
    width: 752px;
    height: 270px;
    display:none;
    }
.li_3{
    background: url(../img/3.jpg) no-repeat;
    width: 752px;
    height: 270px;
    display:none;
    }
.li_4{
    background: url(../img/4.jpg) no-repeat;
    width: 752px;
    height: 270px;
    display:none;
    }
.li_5{
    background: url(../img/5.jpg) no-repeat;
    width: 752px;
    height: 270px;
    display:none;
    }

定义
overflow : visible | auto | hidden | scroll
当然overflow可以单独设置X（overflow-x ）和Y（overflow-y）方向的滚动条样式其值与应用与overflow语法用法结构相同。

说明

这个属性定义溢出元素内容区的内容会如何处理。

overflow属性值：

1.visible：默认值。内容不会被修剪，会呈现在元素框之外。
2.hidden：内容会被修剪，并且其余内容是不可见的。
3.scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4.auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5.inherit：规定应该从父元素继承 overflow 属性的值。

总结：overflow属性值中visible和hidden是对立的，scroll和auto是对立的。inherit是继承父元素的overflow属性值，默认是scroll.

background: url(../img/btn_right.png) no-repeat center;
/*背景图片居中，不平铺显示，也就是只显示一个背景图片*/

*相对位置和绝对位置的设计也很重要
问题：
切换效果不明显
向左滑动好用，向右滑动有许多问题