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

最新推荐文章于 2024-05-17 03:12:00 发布

想吃米豆腐

最新推荐文章于 2024-05-17 03:12:00 发布

阅读量4k

点赞数 3

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_50823456/article/details/116697696

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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
评论
jQuery制作一个简易的轮播图切换效果

jQuery制作一个简易的轮播图切换效果（写项目的时候可以用这些代码实现轮播图切换！）style.cssbody,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; }
复制链接

扫一扫