鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果
上一次在我的文库中分享了点击按钮，图片左右切换轮播效果代码，今天主要是分享【鼠标点击按钮，图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码】。
最后的效果如下：
Html代码部分：
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>图片轮播效果制作</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/style.js"></script>
</head>
<body>
    <div class="banner">
        <ul class="pic">
            <li>
                <a href="#"><img src="images/1.jpg" alt="美女" width="350" height="495"></a>
            </li>
            <li>
                <a href="#"><img src="images/2.jpg" alt="美女" width="350" height="495"></a>
            </li>
            <li>
                <a href="#"><img src="images/3.jpg" alt="美女" width="350" height="495"></a>
            </li>
            <li>
                <a href="#"><img src="images/4.jpg" alt="美女" width="350" height="495"></a>
            </li>
            <li>
                <a href="#"><img src="images/5.jpg" alt="美女" width="350" height="495"></a>
            </li>
        </ul>
        <ul class="anniu">
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="lr">
            <li class="pre"><a href="#"> < </a></li>
            <li class="next"><a href="#"> > </a></li>
        </ul>
    </div>
</body>
</html>
Css代码部分：
*{margin:0px;padding:0px}
li{list-style:none}
a{text-decoration:none}
img{border:0px}
.banner{width:350px;height:495px;margin:100px auto;position:relative;overflow:hidden}
.banner .pic{width:9999px;height:495px}
.banner .pic li{width:350px;height:495px;float:left}
.banner .anniu{width:100px;height:16px;position:absolute;left:165px;top:470px}
.banner .anniu li{width:16px;height:16px;background:white;float:left;margin:2px;display:inline;
cursor:pointer;border-radius:100%}
.banner .{background:red}
.banner .lr{width:350px;height:50px;position:absolute;top:250px;display:none}
.banner .lr a{color:white}
.banner .lr .pre{width:20px;height:50px;float:left;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}
.banner .lr .next{width:20px;height:50px;float:right;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}
js简易轮播图代码Javascript代码部分：
$(function(){
    //鼠标滑过banner，左右按钮进行显示和隐藏
    $(".banner").hover(function(){
        $(".lr").show();
    },function(){
        $(".lr").hide();
    });
    //点击下面的小按钮，图片进行左右切换效果
    $(".anniu li").click(function(){
        $(this).addClass("on").siblings().removeClass("on");
        var num=$(this).index();
        $(".pic").animate({marginLeft:-350*num},"slow");
    });
    //图片自动轮播效果
    var a=0;
    var automatic=setInterval(function(){
        a++;
        a=a%5;
        $(".pic").animate({marginLeft:-350*a},"slow");
        $(".anniu li").eq(a).addClass("on").siblings().removeClass("on");
    },6000);
    //点击左右按钮，图片进行切换效果
    $(".pre").click(function(){
        a--;
        a=(a+5)%5;
        $(".pic").animate({marginLeft:-350*a},"slow");
        $(".anniu li").eq(a).addClass("on").siblings().removeClass("on");
    });
    $(".next").click(function(){
        a++;
        a=a%5;
        $(".pic").animate({marginLeft:-350*a},"slow");
        $(".anniu li").eq(a).addClass("on").siblings().removeClass("on");
    });
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。