jQuery实现广告图片轮播切换

jQuery实现广告图片轮播切换_第1张图片


<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>1li>
                <li>2li>
                <li>3li>
                <li>4li>
            ul>
        div>
body>
html>

你可能感兴趣的:(jQuery)