jQuery实现广告图片轮播切换

美奇开发工作室

于 2018-03-11 14:37:34 发布

阅读量4.4k

点赞数

分类专栏： # jQuery

本文链接：https://blog.csdn.net/qq15577969/article/details/79516227

版权

jQuery 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery实现广告图片轮播切换</title>
<style>
.scroll{
    width:540px;
    height:200px;
    overflow:hidden;
    padding:5px 0 5px 0;
    position:relative;
}
.scroll img{width: 540px;}
.scroll #scroll_img li{
    margin-bottom:20px;
}
#scroll_number{
    right:0;
    padding-right:5px;
    position:absolute;
    bottom:10px;
}
#scroll_number li{
    width:28px;
    height:28px;
    border-radius: 50%;
    text-align:center;
    color: #fff;
    margin-left:5px;
    float: left;
    font-size:16px;
    font-weight: bold;
    line-height:26px;
    cursor:pointer;
    background: #a9a9a9;
}
.scroll_number_out{
}
.scroll_number_over{
    background: #9b2d30;
    color:#FFF;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//轮播图片jQuery代码
function changeImg(){
var index=0;//默认显示第一张
var $li=$("#scroll_img li");
var $num=$("#scroll_number li");
var stop=false;
//默认让第一个数字高亮
$num.eq(index).addClass("scroll_number_over").stop(true,true).siblings().removeClass("scroll_number_over");
//鼠标放到数字上
$num.hover(function(){
    stop=true;
    index=$num.index($(this));
    $li.eq(index).stop(true,true).fadeIn().siblings().fadeOut();
    $(this).addClass("scroll_number_over").stop(true,true).siblings().removeClass("scroll_number_over");
},function(){
    stop=false;
});
//定时播放图片
setInterval(function(){
    if(stop==true){
    return;
}
index++;
if(index>=$li.length){
index=0;
}
$li.eq(index).stop(true,true).fadeIn().siblings().fadeOut();
$num.eq(index).addClass("scroll_number_over").stop(true,true).siblings().removeClass("scroll_number_over");
},3000);
}
changeImg();
  });
</script>
</head>
<body>
        <!--轮换显示的横幅广告图片-->
        <div class="scroll">
            <ul id="scroll_img">
                <li><img src="images/scroll-01.jpg"/></li>
                <li><img src="images/scroll-02.jpg"/></li>
                <li><img src="images/scroll-03.jpg"/></li>
                <li><img src="images/scroll-04.jpg"/></li>
            </ul>
            <ul id="scroll_number">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
</body>
</html>