作者:hacker发布时间:2022-08-17分类:黑客教程浏览:99评论:1
那些容器的宽都要给的。图片的宽高。
给图片最近的父级元素设置position:relative;
再给装图片的容器设置position:absolute;top:~;bottom:~;right:~;left:~;
还有不要用id,用class就够了。一般id都会少用,
1、先让为整个轮播块添加居中属性:class=‘container’
2、如果整个轮播图默认居中后还是觉得占了大部分的页面想让整个轮播图占页面比例小些,可以给整个轮播块添加一个id,改变其CSS样式为7%或者其他百分比,只能改成百分比,千万不能改成有明确的宽度限制,如果不小心改成如8px的宽,则无法实现响应式,当窗口缩小后无法自适应。
不要用绝对定位,用了绝对定位需要给margin属性调试到自己想要的位置
试试这个图片切换
有12345数字一起切换
鼠标点一下数字会变换到另一张图片,不点就会自动换
里面有教程和源码
你的事件绑定有问题:
...
for (var i=0; ilen; i++) {
(function(num) {
li[num].onmouseover = function() {
console.log(timer);
clearInterval(timer);
}
li[num].onmouseover = function() {
timer = setInterval(myTimer, 3000);
}
}(i));
}
...
首先,每个slide都需要绑定事件, 而且这种绑定需要使用闭包,不然永远只能绑定到最后一个slide上面,...代表你写的其他代码
给你几个思路
将所有需要轮播的图片横向并排排列,定位设置为绝对定位,暂定为pic-list。设置一个轮播图box,暂定为lb-box,lb-box依每张图片的宽高设置宽高,并将over-flow设置为hidden。将pic-list放到lb-box里,现在应该看到的是一张图片,设置一个定时器,每三秒或几秒执行一次,执行事件是将pic-list的left属性每次减去一张图片的宽度,到减完pic-list的宽度后,将left设置为0,轮播图完成。
第二种思路,设置一个放置轮播图的box,定为lb-box,宽高一样为一张图片的宽高,将所有的轮播图名字命名为统一格式,比如(pic-1.png,pic-2.png,pic-3.png)。lb-box里放轮播图种的第一张图如(pic-1.png),设置一个定时器,每三秒或几秒执行一次,执行的事件是将轮播图的src属性改成pic-2.png(具体可设置一个变量进行++操作)。到最后一个轮播图再将轮播图src属性设置为pic-1.png。轮播图完成
PS.自己动手,丰衣足食
标签:轮播图定位
已有1位网友发表了看法:
访客 评论于 2022-08-17 12:45:08 回复
st的left属性每次减去一张图片的宽度,到减完pic-list的宽度后,将left设置为0,轮播图完成。第二种思路,设置一个放置轮播图的box,定为lb-box,宽高一样为一张图片的宽高,将所有的轮播图名字命名为统一格式,比如(pic-1.png,pic-2.png,pic-