大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
更换背景图片有两种方式:
网站建设哪家好,找创新互联建站!专注于网页设计、网站建设、微信开发、小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了罗庄免费建站欢迎大家使用!
1、直接给元素附加css,因为js附加的css样式要比css中的样式权限高,那么js设置的背景图片就会覆盖之前的图片
$(this).css("background","url(1.jpg) no-repeat 0 0");
2、写两个class,一个class里面写一个背景图片,js中操作的话直接改变元素的class就可以了
$(this).removeClass('classA').addClass('classB');
相对而言,第二种方式更好一点,实现了js中尽量不书写css的理念,同时第二种可以实现背景图片不断替换,而第一种不行
首先你这个最简单的做法需要的不是3张图而是6张!然后原理:点击一张图片更换3张图的src属性的图片路径就行了!
$("#"+id).attr("src","123.jpg");
!DOCTYPE html
html
head
style type="text/css"
.box {
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid pink;
}
.box img {
display: inline-block;
width: 100%;
height: 100%;
}
/style
/head
body
div class="box"
img src=""
/div
script src=""/script
script type="text/javascript"
$(function () {
var imgArr = [
"./img/0.png",
"./img/1.png",
"./img/2.png",
"./img/3.png",
"./img/4.png",
];
$(".box img").attr("src", imgArr[0]);
var i = 0;
setInterval(function () {
i++;
if (i imgArr.length - 1) {
i = 0
}
$(".box img").attr("src", imgArr[i]);
}, 2000);
})
/script
/body
/html
上面是代码:
实现原理是通过间隔定时器,每过2秒去设置img的src属性。
imgArr是保存图片的数组,当每一张图片都展示后重头再开始
imgArr的值是一张张图片我这里是在img文件夹下放了5张图片,题主可以根据自己的需求选择网上或者本地图片。
代码效果:
一般是改css
$('#x').click(function(){
var img = $(this).css('background-image');
if(img =='xxx.png'){
img = 'yyy.png';
}else{
img='xxx.png';
}
$(this).css('background-image','url("'+img+'")')
})
实现的方法和操作步骤如下:
1、首先,打开html编辑器,创建一个新的html文件,例如index.html,然后引入jquery,如下图所示。
2、其次,完成上述步骤后,在index.html的script标记中,输入下图红框中的jquery代码,如下图所示。
3、接着,完成上述步骤后,浏览器运行index.html页面,显示出了其中1张背景图片,如下图所示。
4、最后,完成上述步骤后,再次单击“点击更换”按钮,这时背景图像被更改为另一幅,如下图所示。这样,问题就解决了。
图片展示的左右滚动
必须要做的3条:
1、当图片展示内同处于最后一个版面时,如果在向后后,则应该跳转到第一个版面;
2、当图片展示内容处于第一个版面的时候,如果在向前,就应该跳转到最后一个版面;
3、标注第几张的数字应该与动画一起切换。