简易的图片轮播

PROMULGATOR

______。墨纸

福建省泉州市

← 计算机考试中的全选

→ 程序员表白神器

相关代码

轮播图(原创)

jQuery轮播图

jQuery轮播图

轮播图（原创）

jQuery轮播图

jQuery轮播图

Html

Css

Js

* {
	margin:0px;
	padding:0px;
}
ul li {
	list-style:none
}
#slide {
	margin:0px auto;
	position:relative;
}
.slide_img li {
	position:absolute;
	display:none;
	top:0px;
	left:0px
}
.dotted {
	width:100%;
	position:absolute;
	bottom:10px;
	left:0px;
	font-size:0px;
	text-align:center;
}
.dotted li {
	width:16px;
	height:16px;
	background:rgba(255,255,255,0.5);
	font-size:14px;
	line-height:16px;
	text-align:center;
	display:inline-block;
	margin:0px 5px;
	cursor:pointer;
	border-radius:50%;
}
.dotted li span {
	display:inline-block;
	width:8px;
	height:8px;
	margin-top:4px;
	background:rgba(255,255,255,0.8);
	border-radius:50%;
}
.dotted .active {
	background:rgba(255,255,255,0.8);
}
.left,.right {
	height:50px;
	width:30px;
	background:rgba(255,255,255,0.5);
	position:absolute;
	top:0px;
	display:none;
	cursor:pointer;
	text-align:center;
	line-height:50px;
	font-family:"宋体";
	font-weight:bold;
}
.right {
	right:0px;
}

$(document).ready(function() {

function Slide(sTime) {
        var $arrow = true; //是否启用左右箭头 true为启用
        var $numb = false; //是否启用数字 true为启用
        $('#slide,#slide img').css('width', '500px').css('height', '300px'); //容器宽高
        //创建li
        $('#slide').append('<ul class="dotted"></ul><div class="left"><</div><div class="right">></div>');
        for (var j = 0; j < $('.slide_img li').length; j++) {
            if ($numb) {
                $('.dotted').append('<li>' + (j + 1) + '</li>');
            } else {
                $('.dotted').append('<li><span></span></li>');
            }
        }
        $('.slide_img li').first().show();
        $('.dotted li').first().addClass('active');
        //通过点击li 切换
        $('.dotted li').mouseover(function() {
            $(this).addClass("active").siblings('li').removeClass('active');
            var index = $(this).index();
            i = index;
            $('.slide_img li').eq(index).fadeIn().siblings('li').fadeOut();
        });

//移动函数
        function move() {
            i++;
            if (i == $('.dotted li').length) {
                i = 0;
            }
            change()
        }

function change() {
            $('.dotted li').eq(i).addClass("active").siblings('li').removeClass('active');
            $('.slide_img li').eq(i).fadeIn().siblings('li').fadeOut();
        }
        //自动轮播
        //alert(($('#slide').height()-$('.left').height()));
        var i = 0;
        var t = setInterval(move, sTime);
        //鼠标移动到容器内
        $('#slide').hover(function() {
            clearInterval(t);
            if ($arrow) {
                $('.left,.right').css('top', ($('#slide').height() - $('.left').height()) / 2);
                $('.left,.right').fadeIn();
            }
        }, function() {
            t = setInterval(move, sTime);
            $('.left,.right').fadeOut();
        });
        //左箭头
        $('.left').click(function() {
            i = i - 1;
            if (i == -1) {
                i = $('.slide_img li').length - 1;
            }
            change()
        });
        //右箭头
        $('.right').click(function() {
            i = i + 1;
            if (i == $('.slide_img li').length) {
                i = 0;
            }
            change()
        });

}
    Slide(3000);
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.9.1

立即下载

简易的图片轮播



代码描述：使用jQuery制作的轮播图

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>简易的图片轮播-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号