最简单jquery实现带左右箭头和数字焦点的图片轮播

本是古典何须时尚 2022-07-16 13:11 163阅读 0赞

直接上代码（请自行引入jquery）：

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>轮播</title>
    <style type="text/css">
    body{font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:normal;color:#666666;margin:0px;padding:0px;background:#fff;}
    p,from,h1,h2,h3,h4,h5,h6{margin:0px;padding:0px;}
    ul,ol,li{margin:0px;padding:0px;list-style:none;}
    img{border:none;}
    a{color:#333333;text-decoration:none;}
    a:hover{color:#666666;text-decoration:none;}
    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    .clearfix{display:inline-table}
    
    .main {
    	position: relative;
    	width: 500px;  height: 350px;
    }
    .myslide {
    	float: left;  position: absolute;  overflow: hidden;
    	width: 500px;  height: 350px;
    }
    .myslidetwo {
    	position: absolute;
    	overflow: hidden;
    	width: 2000px;
    }
    .myslidetwo li {
    	position:relative;
    	float: left; background:#ccc; text-align:center; line-height:350px; width: 500px;  height: 350px;
    }
    .label{
    	position: absolute;
    	bottom: 15px;
    	left: 210px;
    	width: 200px;
    }
    .label li {
    	float: left;
    	width:20px;height:20px;line-height:20px;text-align: center;
    	margin-right: 5px;
    	border:1px solid #3F8AE3;
    	font-size: 14px;
    	background: #fff;
    	cursor: pointer;
    }
    .label li.current {
    	color:#fff;
    	background: #3F8AE3;
    }
    .arrows{
    	position: absolute;
    	left:0px;  top:0px;
    	color:#666;  font-size: 40px;font-weight: bold;
    }
    .arrows a{
    	cursor:pointer;
    	background: rgba(0,0,0,0.2);
    	display: inline-block;width:30px;height: 70px;text-align: center;line-height: 70px;
    }
    .arrows a:hover{
    	background: #3F8AE3;
    	color:#fff;
    }
    .arrows .pre{
    	margin-right: 429px;
    }
    </style>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    	 var _now=0;
            var oul = $(".myslidetwo");
            var numl = $(".label li");
            var wid = $(".myslide").eq(0).width();
            //数字图标实现
            numl.click(function () {
                var index = $(this).index();
                $(this).addClass("current").siblings().removeClass();
                oul.animate({'left': -wid * index}, 500);
            })
            //左右箭头轮播
            $(".pre").click(function () {
                if (_now>=1) _now--;
                else _now=3;
                ani();
            });
            $(".next").click(function () {
                if (_now == numl.size() - 1) {
                    _now = 0;
                }
                else _now++;
                ani();
            });
            //动画函数
            function ani(){
                numl.eq(_now).addClass("current").siblings().removeClass();
                oul.animate({'left': -wid * _now}, 500);
            }
            //以下代码如果不需要自动轮播可删除
            //自动动画
            var _interval=setInterval(showTime,5000);
            function  showTime() {
                if (_now == numl.size() - 1) {
                    _now = 0;
                }
                else _now++;
                ani();
            }
            //鼠标停留在画面时停止自动动画，离开恢复
            $(".myslide").mouseover(function(){
                clearTimeout(_interval);
            });
            $(".myslide").mouseout(function(){
                _interval=setInterval(showTime,2000);
            });
    })
    </script>
    </head>
    
    <body>
    <div class="main">
        <div class="myslide">
            <ul class="myslidetwo">
                <li>1
                	<p class="arrows">
                        <a class="pre"><</a>
                        <a class="next">></a>
                    </p>
                </li>
                <li>2
                	<p class="arrows">
                        <a class="pre"><</a>
                        <a class="next">></a>
                    </p>
                </li>
                <li>3
                	<p class="arrows">
                        <a class="pre"><</a>
                        <a class="next">></a>
                    </p>
                </li>
                <li>4
                	<p class="arrows">
                        <a class="pre"><</a>
                        <a class="next">></a>
                    </p>
                </li>
            </ul>
            
            <ol class="label">
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ol>
        </div>
    </div>
    </body>
    </html>