html页面实现图片滚动
css代码
* {
margin: 0px;/*设置一个元素所有外边距的宽度*/
padding: 0px;/*设置元素所有内边距的宽度*/
text-align: center;/*规定元素中的文本的水平对齐方式。*/
}
#banner {
width: 62.5%;
height: 50%;
margin: 50px auto;
position: relative; /*相对定位,相对于.btn按钮*/
text-align: left;
}
.pic image {
display: block; /*默认有图片不显示*/
width: 50%;
height: 50%;
position: relative; /*相对定位.对应的是.pic这个div*/
top: 0px;
left: 0px;
}
.pic a {
display: none;
}
.pic { /*专门显现图片区*/
position: relative; /*相对定位.对应.pic img*/
border: 1px solid red;
}
.btn {
width: 50%;
height: 5%;
position: absolute; /*绝对定位相对于banner div*/
bottom: 5px;
right: 5px;
}
.btn ul li {
background-color: #000000; /*黑色*/
color: #ffffff;
list-style-type: none;
width: 18px;
height: 18px;
float: left;
border-radius: 9px; /*变成圆的*/
text-align: center;
line-height: 18px;
cursor: pointer; /*鼠标移动变手指状态*/
margin-left: 5px;
}
.btn ul li.one {
background-color: #ff9966;
}
JavaScript代码载入jquery
<script type="text/jscript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/jscript">
$(function () {
$("#all li").mouseover(function () {//鼠标进入离开事件
$(this).css("background-color", "#ff00ff").siblings().css("background-color", "white");
$(this).css({ "background-color": "red", "font-size": "9px" }).siblings().hide();
});
$(window).scroll(function () {//鼠标滚动事件
var _top = $(window).scrollTop(); //获得鼠标滚动的距离
});
//手动播放图片
$(".btn ul li").hover(function () {
$(this).addClass("one").siblings().removeClass("one");
index = $(this).index();
i = index;
$(".pic a").eq(index).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
});
//自动播放图片
var i = 0;
var t = setInterval(autoplay, 3000);
function autoplay() {
i++;
if (i > 4) i = 0;
$(".btn ul li").eq(i).addClass("one").siblings().removeClass("one");
$(".pic a").eq(i).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
}
$("#banner").hover(function () {
clearInterval(t);
}, function () {
t = setInterval(autoplay, 3000);
});
});
</script>
body部分
<body>
<div id="head">
<a href="login2.jsp">登录</a>
<a href="register2.jsp">注册</a>
<a href="main.html">首页</a>
</div>
<div id="banner">
<div class="pic">
<a href="#" style="display:block"><img alt="" src="images/1.jpg" /></a>
<a href="#"><img alt="" src="images/2.jpg" /></a>
<a href="#"><img alt="" src="images/3.jpg" /></a>
<a href="#"><img alt="" src="images/4.jpg" /></a>
<a href="#"><img alt="" src="images/5.jpg" /></a>
</div>
<div class="btn">
<ul>
<li class="one">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</body>
页面图片
更多推荐
html页面实现图片滚动
发布评论