JQ实现左右轮播效果

作者: Miss_Fairy | 来源:发表于2017-08-08 17:25 被阅读0次

JQ实现左右轮播效果
android轮播图效果
angular下实现轮播图
轮播图—纯js(javascript)实现：
在简书中如何引用代码
jQuery打造淘宝展示效果和淘宝轮播图
任务27 - jquery实战 - 轮播
瀑布流布局_木桶布局
js实现效果：循环轮播图
jq实现碎片轮播

这篇文章主要是实现图片左右轮播效果，功能：进入页面自动播放图片，鼠标悬浮，暂停图片轮播，鼠标离开，继续图片轮播，点击页面按钮，滑到对应的图片，鼠标离开，从该位置继续轮播。代码中有详细的注释
代码如下

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul li {
            list-style: none;
        }
        img {
            display: block;
        }
        .box {
            width: 500px;
            height: 300px;
            border: 1px solid #ccc;
            overflow: hidden;
            margin: 100px auto;
            position: relative;
        }
        .banner {
            left: 0;
            top: 0;
            position: absolute;
        }
        .banner .img {
            width: 500px;
            height: 300px;
            float: left;
        }
        ul {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        ul li {
            float: left;
            width: 30px;
            height: 30px;
            background: #ccc;
            color: #000;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
            opacity: .7;
            cursor: pointer;
        }
        li+li {
            margin-left: 10px;
        }
        .on {
            background: #4eb900;
            color: #fff;
        }
        .none{
            display: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="banner" id="banner">
            ![](img/man1.jpg)
            ![](img/man2.jpg)
            ![](img/man3.jpg)
        </div>
        <ul class="btn">
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//定义一个全局变量，用来控制播放到哪一张图片
var currentIndex = 0;
//定义定时器
var timer;
//获取图片的宽度
var imgWidth = $(".banner img").eq(0).width();
//定义banner盒子的宽度
$(".banner").css({"width":imgWidth*$(".banner img").length});
//点击每个按钮调到相应的界面
function clickBtn(){
   for(var i = 0; i< $(".btn").find("li").length; i++){
        $(".btn").find("li").click(function(){
            $(this).addClass("on").siblings("li").removeClass("on");//为当前按钮添加样式
            currentIndex = $(this).index();
            $(".banner").animate({
                "left": -imgWidth*currentIndex
            })//让banner向左移动的距离
        })
   }
}
clickBtn();
//定义一个函数来控制按钮样式的变化以及banner距离左侧的距离
function autoPlay(){
    timer = setInterval(function(){
                currentIndex++;
                //当i大于图片的总长度减一的时候，让其等于0
                if (currentIndex > $(".banner img").length - 1) {
                    currentIndex = 0;
                }
                $(".btn").find("li").eq(currentIndex).addClass("on").siblings("li").removeClass("on");
                $(".banner").animate({"left":-currentIndex*imgWidth});
            },2000)
}
autoPlay();
//当鼠标悬浮在box里面的时候，暂停动画；
$(".box").mouseenter(function(){
    clearInterval(timer);
})
//当鼠标离开的时候，开启动画
$(".box").mouseleave(function(){
    autoPlay();
})
</script>
</html>