首页 > 超级简单的jquery轮播图demo

超级简单的jquery轮播图demo

DOCTYPE html>
<html><head><meta charset="UTF-8"><title>轮播图demotitle><script type="text/javascript" src="js/jquery-3.2.1.slim.js" >script><link rel="stylesheet" href="css/demo.css" /><script type="text/javascript">var t = n = i = 0, count;$(function(){count=$(".scroll_pic a").length;//求出图片数量
                $(".scroll_pic a:not(:first)").hide();//隐藏第一张以外的所有图片
                $("#scroll_button li").click(function(){i = n = $(this).index();//index() 方法返回指定元素相对于其他指定元素的 index 位置。
                    $(".scroll_pic a").eq(i).show().siblings().hide();//siblings()选择除自身以外的所有同胞元素
                    $(this).addClass("scroll_in").siblings().removeClass("scroll_in");//鼠标经过图片区域停止setInterval()调用函数，移开恢复
                });t = setInterval("picShowAuto()", 3500);//setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭
                $(".scroll").hover(function(){clearInterval(t)}, function(){t = setInterval("picShowAuto()", 3500);});});function picShowAuto(){n = n >=(count -1) ?0 : ++n;$("#scroll_button li").eq(n).trigger("click");//trigger() 方法触发被选元素的指定事件类型
            }script>head><body><div class="scroll"><div class="scroll_pic"><a href="#"><img src="img/pic1.jpg" alt=""/>a><a href="#"><img src="img/pic2.jpg" alt=""/>a><a href="#"><img src="img/pic3.jpg" alt=""/>a><a href="#"><img src="img/pic.jpg" alt=""/>a>div><ul id="scroll_button"><li class="scroll_in">li><li>li><li>li><li>li>ul>div>body>
html>
.scroll { width: 720px;height: 410px;margin: 0 auto;margin-top: 100px;overflow: hidden;position: relative;
}.scroll ul { padding: 5px 5px;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);position: absolute;bottom: 10px;left: 50%;background:rgba(455,455,455,0.4);border-radius: 28px;
}.scroll ul li { float: left;margin: 0px 5px;width: 16px;height: 16px;border-radius: 16px;border:1px #73B613 solid;background: #FCBE47;cursor: pointer;}.scroll ul li.scroll_in{ background:#FF6600;
}

 

转载于:https://www.cnblogs.com/Strom-HYL/p/6904438.html

更多相关：