jquery点击切换图片(jquery切换页面)
2024-09-30 00:01:23
先给导航块的a标签设置img属性和data-img属性；img属性为未选中图片，data-img为选中图片。第一个按钮的img图片应设置为默认选中的状态。
//点击每个按钮后进行按钮切换图片操作
$(".tab-bar-item").on("click",?function?()?{
//先constclickImg变量为他的data属性（选中图片），然后找到img图片的src属性将未选中的图片点击后替换为选中图片
const?clickImg?=?$(this).data("img");
$(this).find("img").attr("src",clickImg);
//找到被点击标签的其他兄弟标签，用each遍历constnoclick为未选中的img图片，将点击标签的其他兄弟标签的img换为未选中图片就可以了
$(this).siblings().each(function(){
const?noclickImg=?$(this).attr("img")
$(this).find("img").attr("src",noclickImg);
})
}
怎么用jQuery做出按下不同的按钮切换不同的图片呢
var?$img=?$('image_div')
$('btn_four').on('click',?function?(e)?{
????var?url,
????????index?=?$(e.target).index();
????switch?(index)
????{
????????case?0:?{?url?=?'猫图的地址'?};?break;?//猫狗
????????//?case?1……
????}
????$img.attr('src',?url);
})
jquery如何将一个点击左右按钮切换图片的效果封装成可用于在同一个模板中其他块使用(function(A){
vardefaults={
picCourseListId:"pic_course_list",
picCourseListInnerId:"pic_course_list_inner",
prevId:"prev",
nextId:"next",
itemTag:"li"
};
A.a=functiontpqh(options){
varoption=defaults;
if(typeof(option)=="Object"){
for(varkinoptions){
option[k]=options[k];
}
}
varpic_course_list=document.getElementById(option.picCourseListId);
varpic_course_list_inner=document.getElementById(option.picCourseListInnerId);
varprev=document.getElementById(option.prevId);
varnext=document.getElementById(option.nextId);
varimgLen=pic_course_list.getElementsByTagName(option.itemTag).length;
pic_course_list_inner.style.width=pic_course_list.offsetWidth*imgLen+"px";
functionrunRight(prev,curBtn,wrap){
prev.style.cursor="pointer";
if((imgLen-(wrap.scrollLeft/442))2){
wrap.scrollLeft+=442;
}else{
wrap.scrollLeft+=442*(imgLen-(wrap.scrollLeft/442));
curBtn.style.cursor="default";
}
}
functionrunLeft(next,curBtn,wrap){
next.style.cursor="pointer";
if((wrap.scrollLeft/442)1){
wrap.scrollLeft-=442;
}else{
wrap.scrollLeft-=442*(wrap.scrollLeft/442);
curBtn.style.cursor="default";
}
}
prev.onclick=function(){
runLeft(next,this,pic_course_list);
}
next.onclick=function(){
runRight(prev,this,pic_course_list);
}
}
})(window)
封装成这样就可以在其它地方调用了：a({});
热门标签
