jQuery制作一个简易的轮播图切换效果

jQuery制作一个简易的轮播图切换效果(写项目的时候 可以用这些代码实现轮播图切换!)

style.css

body,h1,h2,p,div{margin: 0; padding: 0;}
body{font-size: 14px; line-height: 28px; font-family: "΢���ź�";}
#book{
    margin: 0 auto;
    width: 800px;
    overflow: hidden;
    padding-top: 10px;
    }
img{float: left; margin-right: 10px;}
h1{font-size: 32px; line-height: 45px;}
.intro{clear: both; display: none;}
h2{line-height: 45px; background: #999999; padding-left: 15px; color: #ffffff;}
.intro p{text-indent: 2em;}
.title{
    font-size: 24px;
    color: #0000ff;
}

adver.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="adver">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
</body>
<script src="../../../../../js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	 $(function () {
	    //记录当前位置
	    var index = 0;
	    //显示左右侧按钮
	    $(".adver").hover(function () {
	      $(".arrowLeft,.arrowRight").toggle();
	    })
	    //左侧按钮
	    $(".arrowLeft").click(function () {
	      index--;
	      if (index < 0) {
	        index = 5;
	      }
	      $(".adver").css("background","url(images/adver0" + (index+1) + ".jpg)");
	      $("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black");
	    });
	    //右侧按钮
	    $(".arrowRight").click(function () {
	      index++;
	      if(index > 5) {
	        index = 0;
	      }
	      $(".adver").css("background","url(images/adver0" + (index+1) + ".jpg)");
	      $("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black");
	    });
	    //切换图片
	    $("ul li").hover(function () {
	      index = $(this).index();
	      $(".adver").css("background","url(images/adver0" + (index+1) + ".jpg)");
	      $("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black");
	    });
	    //定时滚动
	    var runId = "";
	    function run() {
	      runId = setInterval(function(){
	        index++;
	        if(index > 5) {
	          index = 0;
	        }
	        $(".adver").css("background","url(images/adver0" + (index+1) + ".jpg)");
	        $("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black");
	      },1000);
	    }
	    run();
	    //移入暂停和移出恢复定时滚动
	    $(".adver").mousemove(function () {
	      clearInterval(runId);
	    }).mouseout(function () {
	      run();
	    })
	  })
	
</script>

</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 3
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值