哪位高手能和小弟我说一下焦点图(幻灯片)的具体原理是什么
谁能和我说一下焦点图(幻灯片)的具体原理是什么
因为是初学者 这块内容不是很懂 就是想清楚的知道焦点图(幻灯片)他的原理是什么 具体有什么步骤。比如点击按钮切换或者自动轮播。哪位能告诉一下,因为网上的说实话看了很多了 都看不懂 不明白。用jq
------解决思路----------------------
应该也有别的实现方法。
一定要步骤的话。
1.装备好图片,固定大小,排成一排。

<ul><img><img><img>就可以实现。 ul的宽度等于所有图片宽度之和。
2.设置显示层的div。那一排图片的ul放在这个div中。 但是这个div宽度等于一张图片的大小。设置overflow:hidden.
把显示不下的另外两张图片隐藏起来。
3.把让ul相对div绝对定位。 left:0。 这是初始状态,我们只能看到第一张图片。
4.动画效果。 从第一张轮播到下一张去。 开始用jquery动画函数animate。
$("ul").animate({
left:-425*picnum+'px'//通过控制ul的位置显示不同的图片。
},1000);
在一秒内切换到第二张图片。 不清楚建议 上 w3去看一下。 jquery动画以及相对定位绝对定位的知识。
也就是这个ul的css.会从left:0->left:-425px->left:-850px ->left:0; 跳到最后一张再回到第一张。
我这里是通过Slides()这个函数来切换。
用全局变量 picnum来计算应该跳转到left值。
再用定时器 setintval 让这个函数每2秒调用一下Slides()进行图片切换。初步实现轮播。
楼主还不理解我也帮不了了。 只有等大神来给你解释。
这只是基本的demo。实际运用中还要考虑更多的东西。 比如点击跳到下一张啊。 下面的小加点啊。
本质上讲都差不多的。
楼主多看看就理解了。
------解决思路----------------------
看文字代码什么的,多麻烦,眼睛看着累还得动脑子想;
直接下个视频看看,就搞定了;
百度音乐轮播图
因为是初学者 这块内容不是很懂 就是想清楚的知道焦点图(幻灯片)他的原理是什么 具体有什么步骤。比如点击按钮切换或者自动轮播。哪位能告诉一下,因为网上的说实话看了很多了 都看不懂 不明白。用jq
------解决思路----------------------
应该也有别的实现方法。
一定要步骤的话。
1.装备好图片,固定大小,排成一排。
<ul><img><img><img>就可以实现。 ul的宽度等于所有图片宽度之和。
2.设置显示层的div。那一排图片的ul放在这个div中。 但是这个div宽度等于一张图片的大小。设置overflow:hidden.
把显示不下的另外两张图片隐藏起来。
3.把让ul相对div绝对定位。 left:0。 这是初始状态,我们只能看到第一张图片。
4.动画效果。 从第一张轮播到下一张去。 开始用jquery动画函数animate。
$("ul").animate({
left:-425*picnum+'px'//通过控制ul的位置显示不同的图片。
},1000);
在一秒内切换到第二张图片。 不清楚建议 上 w3去看一下。 jquery动画以及相对定位绝对定位的知识。
也就是这个ul的css.会从left:0->left:-425px->left:-850px ->left:0; 跳到最后一张再回到第一张。
我这里是通过Slides()这个函数来切换。
用全局变量 picnum来计算应该跳转到left值。
再用定时器 setintval 让这个函数每2秒调用一下Slides()进行图片切换。初步实现轮播。
楼主还不理解我也帮不了了。 只有等大神来给你解释。
这只是基本的demo。实际运用中还要考虑更多的东西。 比如点击跳到下一张啊。 下面的小加点啊。
本质上讲都差不多的。
楼主多看看就理解了。
------解决思路----------------------
看文字代码什么的,多麻烦,眼睛看着累还得动脑子想;
直接下个视频看看,就搞定了;
百度音乐轮播图