Single

JavaScript轮播

[title]js轮播[/title]

刚开始学js用过,不过会框架后基本不用了

<script type="text/javascript" src="jquery-3.1.0.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style type="text/css">
body{
width: 100%;
height: 700px;
display: flex;
justify-content: center;
align-items: center;
}
ul li {
list-style: none;
}
#scrollPics {
height: 420px;
width: 790px;
margin-bottom: 10px;
overflow: hidden;
position: relative;
}
.slider {
margin-top: 0;
}
.num {
position: absolute;
right: 5px;
bottom: 5px;
}
#scrollPics .num li {
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
background-color: #fff;
}
#scrollPics .num li.on {
color: #fff;
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color: #FF7300;
font-weight: bold;
}
</style>

&nbsp;
<div id="scrollPics">
<ul class="slider">
 	<li><img src="图片" /></li>
 	<li><img src="图片" /></li>
 	<li><img src="图片" /></li>
</ul>
</div>
<script type="text/javascript">
$(function () {

var slider = $('#scrollPics .slider');

var imgCon = $('#scrollPics .slider li'); //获取图片

imgCon.not(imgCon.eq(0)).hide(); //除第一张其它隐藏

var num = $('#scrollPics .num'); //定义页码

var len = slider.find('li').length;

var html_page = '', index = 0;

//添加页码

for (var i = 0; i < len; i++) {

if (i === 0) {
j
html_page += '<li class=on >' + (i + 1) + '</li>';

} else {

html_page += '<li>' + (i + 1) + '</li>';

}

}

num.html(html_page);

//显示索引对应的图片

function showPic(index) {

imgCon.eq(index).show().siblings("li").hide();

num.find("li").eq(index).addClass('on').siblings("li").removeClass("on");

}

//页码按钮移入

$('.num li').mouseover(function () {

index = $(this).index(); //获取索引

showPic(index);

})

$('#scrollPics').hover(function () {

clearInterval(window.timer);

}, function () {

window.timer = setInterval(function () {

showPic(index);

index++;

if (index === len) {

index = 0;

}

}, 2000);

}).trigger('mouseleave'); //触发被选元素的指定事件

});
</script>

 

暂无评论

发表评论