最近写了头版。作为一个只写了两个月前端的人，觉得用jq什么的写出自己想要的效果真的很棒。只用了一个下午就完成了一个特效的画面切换：

渲染：

Jq代码，全是自己写的，下午写完，初学者，留着以后用。

直接编码：

////////2017-2-27//////$(function(){ var num=0；var div str=' # imageShowSmallAnchor '；//移动div var s=300$(' . 'imgNum ').单击(function(){ var _ this=$(this)；var status=_ this。attr('数据-状态')；var total_num=_this.parent().查找(' ul li ').长度；var NumSpic=4；//最多显示的小图的个数var srcif(status==' left '){ if(num=0){ num=total _ num-1；} else { num-；} } else { if(num=total _ num-1){ num=0；} else { num} } //4一次做多显示四张小图$('#div ').停止（假，真);//让当前动画直接到达末状态，继续下一个动画//第一种情况当小图数量小于5时，直接进行右移if (total_num=numSPic) {$(divStr).停止（真，假)。动画({left:num*106 39 'px'}，s)；} else {/////////////图片左移//////////if(status==' left '){ if(num total _ num-numSPic){ _ this。parent().查找(' ul li ').eq(数量)。show()；} else{ //特殊情況左移时，从第一张图切换到最后一张图时//如果判断当前是否显示最后张图，如果不是最后一张图则当变成右移时，无需刷新小图的显示状态。 //左移时，需要将李全部隐藏后，再将最后的numSPice张图显示出来，if(num==total _ num-1){ _ this。parent().查找(' ul li ').hide()；for(var x=total _ num-1；x=total _ num-NumSpic；x - ) { _this.parent().查找(' ul li ').方程式.show()；} } } } else {////////////图片右移//////////if(num=NumSpic){ _ this。parent().查找(' ul li ').eq(num-NumPic).hide()；} else{ //特殊情況右移时，从最后一张图切换到第一张图时//判断是否是第一张图，如果不是则再变成左移时，无需刷新小图的显示状态if(num==0){ for(var x=0；x NumPicx){ _ this . parent().查找(' ul li ').方程式.show()；} } } } //快速点击切换时吗，动画出现滞后和反复问题， //让当前动画直接到达末状态，继续下一个动画$('#div ').停止（假，真);$('#div ').停止()。animate()；集合使用效果更佳$(divStr).停止（假，真);//////////样式左移//////////if(status==' left '){//39定位divStr的左边的距离父级元素的像素距离//等样式移动到最右边时，样式位置固定//$(divStr).位置()。左边的获取定位元素左边的值if ($(divStr).位置()。left=39 ) { $(divStr).停止()。动画({ left : ' 39px ' })；//当从第一张切换到最后一张时，样式应在最右边if (num==total_num-1) { $(divStr).停止()。动画({left:3 * 106 39 'px'}，s)；} } else{ $(divStr).停止()。动画({left:'-=106px'}，s)；} } else {////////////样式右移//////////if ($(divStr).位置()。left=357) { $(divStr).停止()。动画({ left : ' 357 px ' })；//当从最后一张切换到第一张时，样式应在最左边if (num==0) { $(divStr).停止()。动画({left:'39px'}，s)；} } else{ $(divStr).停止()。动画({left:'=106px'}，s)；} } } src=_this.parent().查找(' ul li ').eq(数量)。查找(' img ').attr(' src ')；_this.parents(' .xq-IMgsw ').查找('。img SW-顶部李说.attr('src '，src)；});//点击小图切换大图和小图上的样式。 $('.imgSW-bt li ').单击(function(){ var _ this=$(this)；var srcnum=_ this。index()；//ParSeint(10/3)；整除//获取点击的位置，来计算样式的位置var X=parseInt(_this.position().左/106);$(divStr).停止()。动画({left:X*106 39 'px'}，s)；src=_this.find('img ').attr(' src ')；_this.parents(' .xq-IMgsw ').查找('。img SW-顶部李说.attr('src '，src)；});});超文本标记语言界面代码：

div class=' xq-IMgsw ' div class=' IMgsw-top ' ul liimg src=' http : images/xq-IMg 1。png ' alt=' '/Li/ul/div class=' clear '/div class=' imgSW-Bt ' input class=' imgSW-zoo imgNum ' type=' button ' data-status=' left ' div id=' imageShowSmallAnchor '/div ul Li class=' imgSW-xz ' img class='高度：60 pxalt=' div class=' IMgsw-bot '户型1/div/Li Li img src=' http : images/xq-img-S2。png ' style=' width :90 px高度：60 pxalt=' div class=' IMgsw-bot '户型2/div/Li Li img src=' http : images/xq-img-S3。png ' style=' width :90 px高度：60 pxalt=' div class=' IMgsw-bot '户型3/div/Li Li img src=' http : images/xq-img-S4。png ' style=' width :90 px高度：60 pxalt=' div class=' IMgsw-bot '户型4/div/Li Li img src=' http : images/xq-img-。png ' style=' width :90 px高度：60 pxalt=' div class=' IMgsw-bot '户型5/div/Li Li img src=' http : images/xq-img-S4。png ' style=' width :90 px高度：60 pxalt=' div class=' IMgsw-bot '户型6/div/Li Li img src=' http : images/xq-img-。png ' style=' width :90 px高度：60 pxalt=' div class=' IMgsw-bot '户型7/div/Li Li img src=' http : images/xq-img-。png ' style=' width :90 px高度：60 pxalt=' div class=' IMgsw-bot '户型8/div/Li/ul input class=' IMGsw-you IMGnum ' data-status=' right ' type=' button '/div/div div id=' imageShowSmallAnchor '/div是定位上去的

另外：快速点击是会出现动画延迟现象，影响体验，处理动画延迟jQuery stop()语法：

$('#div ').stop()；//停止当前动画，继续下一个动画$('#div ').停止（真);//清除元素的所有动画$('#div ').停止（假，真);//让当前动画直接到达末状态，继续下一个动画$('#div ').停止（真，真);//清除元素的所有动画，让当前动画直接到达末状态在日本季刊日本季刊中有用到并有注释。//让当前动画直接到达末状态，继续下一个动画$('#div ').停止（假，真);$('#div ').停止()。animate()；集合使用效果更佳。

作为前端新手，记录下，以后可能会用到。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。