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

最新推荐文章于 2023-01-10 18:57:05 发布

夏末_阳光依然耀眼

最新推荐文章于 2023-01-10 18:57:05 发布

阅读量4.1k

点赞数 1

分类专栏： jquery 文章标签：轮播焦点图带箭头

jquery 专栏收录该内容

39 篇文章 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>
        <!--<p class="arrows">
            <a class="pre"><</a>
            <a class="next">></a>
        </p>-->
        <ol class="label">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>
</div>
</body>
</html>

夏末_阳光依然耀眼

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
最简单jquery实现带左右箭头和数字焦点的图片轮播

直接上代码（请自行引入jquery）：轮播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;
复制链接

扫一扫