magento中的多个幻灯片.js实例
Multiple slideshow.js instances in magento
我在magento 1.9中有一个关于RWD主题的股票jquery幻灯片的问题。
我必须使用9个小幻灯片，让它们独立工作。这是我写的自定义代码
<div class="slideshow-container">
<ul class="slideshow">
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/1a.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/1b.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/1c.jpg'}}" /></a></li>
</ul>
<span class="slideshow-prev"> </span> <span class="slideshow-next"> </span></div>
<div class="slideshow-container">
<ul class="slideshow">
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/2a.png'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/2b.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/2c.jpg'}}" /></a></li>
</ul>
<span class="slideshow-prev"> </span> <span class="slideshow-next"> </span></div>
<div class="slideshow-container">
<ul class="slideshow">
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/3a.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/3b.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/3c.jpg'}}" /></a></li>
</ul>
<span class="slideshow-prev"> </span> <span class="slideshow-next"> </span></div>
<div class="slideshow-container">
<ul class="slideshow">
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/4a.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/4b.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/4c.jpg'}}" /></a></li>
</ul>
<span class="slideshow-prev"> </span> <span class="slideshow-next"> </span></div>
<div class="slideshow-container">
<ul class="slideshow">
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/5a.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/5b.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/5c.jpg'}}" /></a></li>
</ul>
<span class="slideshow-prev"> </span> <span class="slideshow-next"> </span></div>
<div class="slideshow-container">
<ul class="slideshow">
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/6a.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/6b.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/6c.jpg'}}" /></a></li>
</ul>
<span class="slideshow-prev"> </span> <span class="slideshow-next"> </span></div>
<div class="slideshow-container">
<ul class="slideshow">
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/7a.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/7b.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/7c.jpg'}}" /></a></li>
</ul>
<span class="slideshow-prev"> </span> <span class="slideshow-next"> </span></div>
<div class="slideshow-container">
<ul class="slideshow">
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/8a.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/8b.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/8c.jpg'}}" /></a></li>
</ul>
<span class="slideshow-prev"> </span> <span class="slideshow-next"> </span></div>
<div class="slideshow-container">
<ul class="slideshow">
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/9a.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/9b.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/9c.jpg'}}" /></a></li>
</ul>
<span class="slideshow-prev"> </span> <span class="slideshow-next"> </span></div>
和jquery代码
$j(document).ready(function () {
// ==============================================
// UI Pattern - Slideshow
// ==============================================
$j('.slideshow-container .slideshow')
.cycle({
slides: '> li',
pager: '.slideshow-pager',
pagerTemplate: '<span class="pager-box"></span>',
speed: 600,
pauseOnHover: true,
swipe: true,
prev: '.slideshow-prev',
next: '.slideshow-next',
fx: 'scrollHorz'
}).cycle('pause');
});
代码的其余部分都没有受到影响。除了一件事，滑块工作得很好。当我点击下一个和上一个按钮时，所有滑块都会一起更改图像。如何解决每个滑块独立更改图像的问题？
感谢您的帮助
<div class="slideshow-container">
<ul class="slideshow">
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/1a.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/1b.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/1c.jpg'}}" /></a></li>
</ul>
<span class="slideshow-prev"> </span> <span class="slideshow-next"> </span></div>
<div class="slideshow-container">
<ul class="slideshow">
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/2a.png'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/2b.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/2c.jpg'}}" /></a></li>
</ul>
<span class="slideshow-prev"> </span> <span class="slideshow-next"> </span></div>
<div class="slideshow-container1">
<ul class="slideshow1">
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/3a.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/3b.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/3c.jpg'}}" /></a></li>
</ul>
<span class="slideshow-prev1"> </span> <span class="slideshow-next1"> </span></div>
<div class="slideshow-container2">
<ul class="slideshow2">
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/4a.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/4b.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/4c.jpg'}}" /></a></li>
</ul>
<span class="slideshow-prev2"> </span> <span class="slideshow-next2"> </span></div>
<div class="slideshow-container3">
<ul class="slideshow3">
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/5a.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/5b.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/5c.jpg'}}" /></a></li>
</ul>
<span class="slideshow-prev3"> </span> <span class="slideshow-next3"> </span></div>
<div class="slideshow-container4">
<ul class="slideshow4">
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/6a.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/6b.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/6c.jpg'}}" /></a></li>
</ul>
<span class="slideshow-prev4"> </span> <span class="slideshow-next4"> </span></div>
<div class="slideshow-container5">
<ul class="slideshow5">
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/7a.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/7b.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/7c.jpg'}}" /></a></li>
</ul>
<span class="slideshow-prev5"> </span> <span class="slideshow-next5"> </span></div>
<div class="slideshow-container6">
<ul class="slideshow6">
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/8a.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/8b.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/8c.jpg'}}" /></a></li>
</ul>
<span class="slideshow-prev6"> </span> <span class="slideshow-next6"> </span></div>
<div class="slideshow-container7">
<ul class="slideshow7">
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/9a.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/9b.jpg'}}" /></a></li>
<li><a href="linkhere"><img alt="" src="{{media url='homepage_banner/9c.jpg'}}" /></a></li>
</ul>
<span class="slideshow-prev7"> </span> <span class="slideshow-next7"> </span></div>
和jquery函数
$j(document).ready(function () {
// ==============================================
// UI Pattern - Slideshow
// ==============================================
$j('.slideshow-container .slideshow')
.cycle({
slides: '> li',
pager: '.slideshow-pager',
pagerTemplate: '<span class="pager-box"></span>',
speed: 600,
pauseOnHover: true,
swipe: true,
prev: '.slideshow-prev',
next: '.slideshow-next',
fx: 'scrollHorz'
}).cycle('pause');
$j('.slideshow-container1 .slideshow1')
.cycle({
slides: '> li',
pager: '.slideshow-pager',
pagerTemplate: '<span class="pager-box"></span>',
speed: 600,
pauseOnHover: true,
swipe: true,
prev: '.slideshow-prev1',
next: '.slideshow-next1',
fx: 'scrollHorz'
}).cycle('pause');
$j('.slideshow-container2 .slideshow2')
.cycle({
slides: '> li',
pager: '.slideshow-pager',
pagerTemplate: '<span class="pager-box"></span>',
speed: 600,
pauseOnHover: true,
swipe: true,
prev: '.slideshow-prev2',
next: '.slideshow-next2',
fx: 'scrollHorz'
}).cycle('pause');
$j('.slideshow-container3 .slideshow3')
.cycle({
slides: '> li',
pager: '.slideshow-pager',
pagerTemplate: '<span class="pager-box"></span>',
speed: 600,
pauseOnHover: true,
swipe: true,
prev: '.slideshow-prev3',
next: '.slideshow-next3',
fx: 'scrollHorz'
}).cycle('pause');
$j('.slideshow-container4 .slideshow4')
.cycle({
slides: '> li',
pager: '.slideshow-pager',
pagerTemplate: '<span class="pager-box"></span>',
speed: 600,
pauseOnHover: true,
swipe: true,
prev: '.slideshow-prev4',
next: '.slideshow-next4',
fx: 'scrollHorz'
}).cycle('pause');
$j('.slideshow-container5 .slideshow5')
.cycle({
slides: '> li',
pager: '.slideshow-pager',
pagerTemplate: '<span class="pager-box"></span>',
speed: 600,
pauseOnHover: true,
swipe: true,
prev: '.slideshow-prev5',
next: '.slideshow-next5',
fx: 'scrollHorz'
}).cycle('pause');
$j('.slideshow-container6 .slideshow6')
.cycle({
slides: '> li',
pager: '.slideshow-pager',
pagerTemplate: '<span class="pager-box"></span>',
speed: 600,
pauseOnHover: true,
swipe: true,
prev: '.slideshow-prev6',
next: '.slideshow-next6',
fx: 'scrollHorz'
}).cycle('pause');
$j('.slideshow-container7 .slideshow7')
.cycle({
slides: '> li',
pager: '.slideshow-pager',
pagerTemplate: '<span class="pager-box"></span>',
speed: 600,
pauseOnHover: true,
swipe: true,
prev: '.slideshow-prev7',
next: '.slideshow-next7',
fx: 'scrollHorz'
}).cycle('pause');
});
相关文章：
- JS幻灯片与CSS背景颜色变化
- reveal.js幻灯片的多重功能
- JS为幻灯片创建与WP冲突
- JS幻灯片重叠CSS下拉图像菜单
- 获取完整页面上加载的幻灯片.js slideload回调
- 平滑幻灯片.js图像预加载
- 幻灯片.js在IE 8中不起作用
- 幻灯片JS高度和按钮定位问题
- 如何启动/停止响应式幻灯片.js
- 响应式幻灯片.js插件在IE中不起作用
- 幻灯片.js不起作用
- 动态地从显示中添加/删除幻灯片.JS
- 幻灯片JS隐藏分页
- 余烬中的光滑幻灯片.js模板
- 如何通过jQuery动态刷新幻灯片JS
- 将缩略图添加到响应式幻灯片.js
- magento中的多个幻灯片.js实例
- 幻灯片.js jQuery插件在Chrome或Safari中无法正确加载，但在Firefox中很好
- 响应式幻灯片.js - 自动不起作用
- 幻灯片JS自动高度问题
