正在回答 回答被采纳积分+1
2回答
好帮手慕小尤
2019-12-12 14:18:58
同学你好，是老师理解错误，图片滑动的效果，同学可参考以下代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滑动轮播案例</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src="./index.js"></script> <link rel="stylesheet" href="./index.css"> </head> <body> <div id="wrapper"> <div id="show-area"> <ul> <li><a href="#"><img src="../img/bg1.jpg"></a></li> <li><a href="#"><img src="../img/bg2.jpg"></a></li> <li><a href="#"><img src="../img/bg3.jpg"></a></li> </ul> <div id="button-left" title="上一张"><</div> <div id="button-right" title="下一张">></div> <div id="indicator"></div><!--控制按钮,为了日后方便后台操作这里的控制按钮在js代码中控制添加--> </div> </div> </body> </html>
*{
padding:0px;
margin:0px;
border:0px;
}
li{
list-style-type:none;
}
/*给a标签去除下划线*/
a{
text-decoration:none;
}
#wrapper{
margin:20px auto;
}
#show-area{
width:1000px;
height:470px;
position:relative;
margin:0px auto;
overflow:hidden;
}
#show-area ul{
position:relative;
width:5310px;
height:470px;
right:0;
}
#show-area ul li{
float:left;
width:1000px;
}
/*指示器*/
#indicator{
width:140px;
text-align:center;
position:absolute;
top:450px;
left:0;
right: 0;
margin: auto;
z-index:1;
/*ackground-color: #00ccff;*/
}
#indicator div{
height:12px;
width:12px;
border-radius:100%;
background-color:#ccc;
float:left;
margin-left:5px;
opacity:0.9;
filter:Alpha(opacity=90);/*为了适应旧的浏览器*/
}
#button-left,#button-right{
/*display:none;*/
position: absolute;
width: 50px;
height: 110px;
z-index: 2;
background-color: #cccccc;
font-size: 40px;
color: #FFFFFF;
text-align: center;
line-height: 110px;
opacity:0;
filter:Alpha(opacity=50);/*为了适应旧的浏览器*/
cursor: default;
}
#button-left{
top: 180px;
left: 0px;
}
#button-right{
top: 180px;
left: 950px;
}
.onclick{
background-color:#FFF !important;
} $(function () {
/*设置鼠标移动到整个show区域则左右按钮显示出来，否则不显示*/
$("#show-area").mouseenter(function () {
$("#button-right,#button-left").css({opacity:0.5});
});
$("#show-area").mouseleave(function () {
$("#button-right,#button-left").css({opacity:0});
});
var i=0;
/*假装自己很智能，自动获取一下，在后面left值移动时就可以用它了*/
var imgWidth = $("#show-area ul li").width();
var clone = $("#show-area ul li").first().clone(true);
/*copy 第一张的照片并且添加到最后已达到无缝对接的效果*/
$("#show-area ul").append(clone);
/*get 所有li的个数,只有length才是属性*/
var size = $("#show-area ul li").length;
/*step 1: */
//一开始循环添加按钮
//为什么要size - 1？因为最后一张图片只是作一个过渡效果我们显示的始终还是4张图片
//所以添加按钮的时候我们也应该添加4个按钮
for(var j=0;j<size -1 ;j++){
$("#indicator").append("<div></div>");
}
$("#indicator div").eq(i).addClass("onclick");
/*step 2: */
//左按钮
$("#button-left").click(function () {
toLeft();
});
//右按钮
$("#button-right").click(function () {
toRight();
});
/*step 3：*/
//按钮指示器鼠标移出移入事件
$("#indicator div").hover(function () {
i = $(this).index();
clearInterval(timer);
$("#show-area ul").stop().animate({left:-i * imgWidth});
$(this).addClass("onclick").siblings().removeClass("onclick");
},function () {
timer = setInterval(function () {
toRight();
},2000)
});
//两个方向按钮鼠标移出移入事件
$("#button-left,#button-right").mouseenter(function () {
clearInterval(timer);
}).mouseleave(function () {
timer = setInterval(function () {
toRight();
},2000);
});
//定时器,注意，这里是最开始启动的，所以呢，这里不设值，会导致页面开始刷新出现错误。
var timer = setInterval(function () {
toRight();
},2000);
/*step 2-2*/
//左按钮实现的函数
function toLeft(){
//同理，如果当前图片位置是第一张图片我再按一下右按钮那么我们也利用css的快速变换使它的位置来到最后一张图片的位置（size-1），并且让倒数第二张图片滑动进来
i--;
if(i==-1){
$("#show-area ul").css({left:-(size - 1)*imgWidth});
i=size-2;
}
$("#show-area ul").animate({left:-i*imgWidth},1000);
$("#indicator div").eq(i).addClass("onclick").siblings().removeClass("onclick");
}
/*step2-2:*/
//右按钮的实现函数
function toRight() {
i++;
/*当前图片为最后一张图片的时候（我们一开始复制并且添加到ul最后面的图片）
并且再点击了一次左按钮，这时候我们就利用css的快速转换效果把ul移动第一张图片的位置
并且第二张图片滑入达到无缝效果（css的变换效果很快我们肉眼是很难看见的）*/
if(i==size){
console.log("qq");
$("#show-area ul").css({left:0});
i=1;
}
$("#show-area ul").stop().animate({left: -i * imgWidth}, 1000);
//设置下面指示器的颜色索引
if(i == size-1){
$("#indicator div").eq(0).addClass("onclick").siblings().removeClass("onclick");
}else{
$("#indicator div").eq(i).addClass("onclick").siblings().removeClass("onclick");
}
}
});如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
2. 从网页搭建入门JavaWeb
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星