jquery里面的attr和css来设置轮播图竟然效果不一致
/*封装$*/
// window.$=HTMLElement.prototype.$=function(selector){
// var elems=(this==window?document:this)
// .querySelectorAll(selector);
// return elems.length==0?null:elems.length==1?elems[0]:elems;
// }
/*广告图片数组*/
var imgs=[
{"i":0,"img":"images/index/banner_01.jpg"},
{"i":1,"img":"images/index/banner_02.jpg"},
{"i":2,"img":"images/index/banner_03.jpg"},
{"i":3,"img":"images/index/banner_04.jpg"},
{"i":4,"img":"images/index/banner_05.jpg"},
];
var adv={
LIWIDTH:0,
$ulImages:null,
INTERVAL:1000,
WAIT:3000,
timer:null,
init:function () {
this.LIWIDTH=parseFloat($('#slider').css("width"));
this.$ulImages=$("#imgs");
this.updateView();
$("#indexs").on("mouseover","li",(e)=>{
var target=$("#indexs>li").index(e.target); var old=imgs[0].i; this.move(target-old);
});
this.autoMove(); },
autoMove:function(){
this.timer=setTimeout(
()=>this.move(1),this.WAIT
); },
movePre:function(n){
n*=-1;
imgs=imgs.splice(-n,n).concat(imgs);
this.updateView();
this.$ulImages.css("left",parseFloat(this.$ulImages.css("left"))-n*this.LIWIDTH); },
move:function (n) {
clearTimeout(this.timer);
if(n<0){
this.movePre(n);
this.$ulImages.stop(true);
this.$ulImages.animate({left:0},this.INTERVAL,()=>this.autoMove())
}else {
this.$ulImages.stop(true);
this.$ulImages.animate({left:-n*this.LIWIDTH},this.INTERVAL,
()=>this.moveCallback(n) ); } }, moveCallback:function (n) {
imgs=imgs.concat(imgs.splice(0,n));
this.updateView();
this.$ulImages.css("left",0);
this.autoMove(); },
updateView:function(){
for(var i=0 ,lis='',idxs='';i<imgs.length;i++)
{
// lis+='<li> <img src='+imgs[i].img+'></li>';
lis+=`<li> <img src=" ${imgs[i].img}"></li>`; idxs+='<li></li>'; }
this.$ulImages.html(lis).css("width",imgs.length*this.LIWIDTH);
$("#indexs").html(idxs);
// $("#indexs").children(":nth-child("+imgs[1].i+")").addClass("hover");
$("#indexs").children(`li:eq(${imgs[0].i})`).addClass("hover"); }
};
adv.init();
今天在写轮播图的时候发现了jquery的一个小问题,很希望和大家进行交流一下,
上面是轮播图的js代码,和奇怪的是:
this.$ulImgs.css("left",0);
this.autoMove();//启动自动轮播
这种写法轮播图会有滑动的效果。
this.$ulImgs.attr("left",0);
this.autoMove();//启动自动轮播
这种写法就没有滑动的效果,但是也是轮播,不平滑。
找了有些资料如下
<a href="#" style="xxx" title="" alt="">xxx</a> 两个不相同呀,css是和style有关,attr是都可以获取,比如上面href,title,alt. 既然attr可以同时获取不能设置吗?????????????
jquery里面的attr和css来设置轮播图竟然效果不一致的更多相关文章
- HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...
- css动画属性--轮播图效果
通过css的动画属性实现轮播图的显示效果 代码如下: 主体部分: <div id="move"> <ul> <li><img src=&q ...
- css3 - 纯css实现一个轮播图
这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...
- 纯HTML和CSS实现JD轮播图
博主使用了纯HTML和CSS实现了JD的轮播图,没有加动态效果,主要是使用了定位的知识. ,如图为两个侧边箭头图片(其实实际中应该使用CSS3的图标字体,这里没有使用). <!DOCTYPE ...
- jQuery实现简易轮播图的效果
(图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...
- JQuery和html+css实现带小圆点和左右按钮的轮播图
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...
- Jquery 轮播图简易框架
=====================基本结构===================== <div class="carousel" style="width: ...
随机推荐
- android sqlite使用之模糊查询数据库数据的三种方式
android应用开发中常常需要记录一下数据,而在查询的时候如何实现模糊查询呢?很少有文章来做这样的介绍,所以这里简单的介绍下三种sqlite的模糊查询方式,直接上代码把: package com.e ...
- HTTP协议系列(2)--顺带离职的一些想法
一.聊聊离职感悟 来杭州也是将近3个月了,也迎来我的第一次辞职,有可能你会说我傻怎么不拿年终奖,也有可能你会不理解为什么3个月就要辞职:我只能说我是怀揣的梦想来的,我想着进一步的提升,想着成 ...
- 制作类似ThinkPHP框架中的PATHINFO模式功能(二)
距离上一次发布的<制作类似ThinkPHP框架中的PATHINFO模式功能>(文章地址:http://www.cnblogs.com/phpstudy2015-6/p/6242700.ht ...
- Flexible 弹性盒子模型之CSS align-items 属性
实例 居中对齐弹性盒的各项 <div> 元素: div { display: flex; align-items:center; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性 ...
- pythong下的unittest框架
今天有空测试了下TestSuit的执行顺序,用discover遍历过来的tests,用runner执行. 只会识别继承了unittest的测试类中的测试用例.按setup和teardown的顺序进行执 ...
- 你确实应该学习并使用的 10 个 C# 特性
1) async / await 使用 async / await 模式,可以在执行代码块操作的时候不会阻塞 UI 或者当前的线程.即使该操作被某些执行动作延迟了(比如一个 web 请求),async ...
- CodeForces 718C Sasha and Array
线段树. 线段树维护区间矩阵和,操作都是最简单的线段树.$lazy$标记不要记录乘了几次,直接记录乘了几次之后的矩阵就可以了,不然每次下传的时候再算一遍时间复杂度会提高. #pragma commen ...
- table排名次
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- mysql分享记录
今天公司进行了一次mysql的分享,做一下记录,也许很多东西很简单,但是对于不知道的人就很难 1.用最小代价存储 举个例子来说,如果能确定某个字段是存数字的,并且数字的大小一定不会超过127或255, ...
- JsSIP.UA.JsSIP 总是返回错误:422 Session Interval Too Small
在JsSIP 中 JsSIP.UA.call 总是 返回错误:422 Session Interval Too Small 关于错详情在这篇文章中解释的比较详尽:http://www.cnblogs. ...