carouFredSel导航无法正常工作

时间:2015-09-19 14:42:17

标签: javascript navigation caroufredsel

我已经尝试了所有的东西而且我无法为我的生活找出为什么我的下一次和之前的导航都不适用于此。任何帮助真的很感激,我的头痛在我的桌子上敲打!

问题出现在此页面http://relymedia.com.s209914.gridserver.com/?page_id=273



<script type="text/javascript">
    var $ =jQuery.noConflict();
			
			$(function() {

				$('#carousel').carouFredSel({
					prev: '#msprev',
					next: '#msnext',
					scroll: 1000
				});
	
			});
		
		</script>
&#13;
html, #c-carousel {
				height: 100%;
				padding: 0;
				margin: 0;
			}
#c-carousel {
    min-height: 200px;
}
			#c-carousel * {
				font-family: Arial, Geneva, SunSans-Regular, sans-serif;
				font-size: 14px;
				color: #333;
				line-height: 22px;
			}
			#c-carousel h3 {
				font-size: 20px;
				margin: 30px 0 10px 0;
			}
			#c-carousel a:hover {
				color: #000;
			}
#wrapper {
    width: 910px;
    height: 55%;
    min-height: 200px;
    margin: 0 auto;
}
#inner {
    width: 910px;
    height: 230px;
    margin-top: 15px;
    position: relative;
    overflow: hidden;
}
#carousel div {
    border: 1px solid #999;
    background: #fff;
    width: 140px;
    height: 200px;
    float: left;
    padding: 10px;
    margin: 0 5px;
    border-radius: 8px;
}
#carousel img {
    min-height: 118px;
}
#carousel h6 {
    text-align: center;
    border-top: 1px solid #D9DBDE;
}
			#pager {
				text-align: center;
				margin-top: 20px;
				color: #666;
			}
			#pager a {
				color: #666;
				text-decoration: none;
				display: inline-block;
				padding: 5px 10px;
			}
			#pager a:hover {
				color: #333;
			}
			#pager a.selected {
				background-color: #333;
				color: #ccc;
			}
			#msprev, #msnext {
				display: block;
				width: 50px;
				height: 80px;
				margin-top: -40px;
				position: absolute;
				top: 50%;
				z-index: 2;
			}
			#msprev {
				background: url('images/ui-prev.png') no-repeat;
				left: 50%;
				margin-left: -520px;
			}
			#msnext {
				background: url('images/ui-next.png') no-repeat;
				right: 50%;
				margin-right: -520px;
			}
&#13;
<div id="c-carousel">
		<div id="wrapper">
			<div id="inner">
				<div class="caroufredsel_wrapper" style="display: block; text-align: start; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 900px; height: 200px; margin: 0px; overflow: hidden;"><div id="carousel" style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 0px; margin: 0px; width: 7200px; height: 200px; z-index: auto;">
                    					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
				<div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=237" rel="bookmark" title="Jeweled"><img width="150" height="124" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMJ01-150x124.jpg" class="attachment-medium wp-post-image" alt="RMJ01"><br>
						<h6>Jeweled</h6>
                        </a>
					</div><div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=240" rel="bookmark" title="MP3 Players"><img width="150" height="144" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMMP21-150x144.jpg" class="attachment-medium wp-post-image" alt="RMMP21"><br>
						<h6>MP3 Players</h6>
                        </a>
					</div><div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=243" rel="bookmark" title="MP4 Players"><img width="150" height="120" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMME05-150x120.jpg" class="attachment-medium wp-post-image" alt="RMME05"><br>
						<h6>MP4 Players</h6>
                        </a>
					</div><div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=246" rel="bookmark" title="1.8 Inch"><img width="150" height="127" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMMN07-150x127.jpg" class="attachment-medium wp-post-image" alt="RMMN07"><br>
						<h6>1.8 Inch</h6>
                        </a>
					</div><div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=249" rel="bookmark" title="2.0 Inch"><img width="150" height="150" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMMV03-150x150.jpg" class="attachment-medium wp-post-image" alt="RMMV03"><br>
						<h6>2.0 Inch</h6>
                        </a>
					</div><div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=252" rel="bookmark" title="2.4 Inch"><img width="150" height="135" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMME07-150x135.jpg" class="attachment-medium wp-post-image" alt="RMME07"><br>
						<h6>2.4 Inch</h6>
                        </a>
					</div><div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=255" rel="bookmark" title="2.8 Inch"><img width="150" height="150" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMMW09-150x150.jpg" class="attachment-medium wp-post-image" alt="RMMW09"><br>
						<h6>2.8 Inch</h6>
                        </a>
					</div><div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=258" rel="bookmark" title="Packaging"><img width="150" height="150" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMPK18-150x150.jpg" class="attachment-medium wp-post-image" alt="RMPK18"><br>
						<h6>Packaging</h6>
                        </a>
					</div><div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=261" rel="bookmark" title="Accessories"><img width="150" height="150" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMA01-150x150.jpg" class="attachment-medium wp-post-image" alt="RMA01"><br>
						<h6>Accessories</h6>
                        </a>
					</div><div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=193" rel="bookmark" title="Classic Square Corners"><img width="150" height="124" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMC23-150x124.jpg" class="attachment-medium wp-post-image" alt="RMC23"><br>
						<h6>Classic Square Corners</h6>
                        </a>
					</div><div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=195" rel="bookmark" title="Classic Round Corners"><img width="150" height="105" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMC08-150x105.jpg" class="attachment-medium wp-post-image" alt="RMC08"><br>
						<h6>Classic Round Corners</h6>
                        </a>
					</div><div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=198" rel="bookmark" title="Aluminum Case"><img width="150" height="150" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMC16-150x150.jpg" class="attachment-medium wp-post-image" alt="RMC16"><br>
						<h6>Aluminum Case</h6>
                        </a>
					</div><div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=204" rel="bookmark" title="Special Designs"><img width="150" height="150" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMD04-150x150.jpg" class="attachment-medium wp-post-image" alt="RMD04"><br>
						<h6>Special Designs</h6>
                        </a>
					</div><div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=207" rel="bookmark" title="Pens"><img width="150" height="150" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMP02-150x150.jpg" class="attachment-medium wp-post-image" alt="RMP02"><br>
						<h6>Pens</h6>
                        </a>
					</div><div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=210" rel="bookmark" title="Bullet Series"><img width="150" height="118" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMC09-150x118.jpg" class="attachment-medium wp-post-image" alt="RMC09"><br>
						<h6>Bullet Series</h6>
                        </a>
					</div><div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=213" rel="bookmark" title="Rubber"><img width="150" height="146" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMC48-150x146.jpg" class="attachment-medium wp-post-image" alt="RMC48"><br>
						<h6>Rubber</h6>
                        </a>
					</div><div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=216" rel="bookmark" title="Metal"><img width="150" height="135" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMM07-150x135.jpg" class="attachment-medium wp-post-image" alt="RMM07"><br>
						<h6>Metal</h6>
                        </a>
					</div><div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=222" rel="bookmark" title="Leather"><img width="150" height="113" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RML02-150x113.jpg" class="attachment-medium wp-post-image" alt="RML02"><br>
						<h6>Leather</h6>
                        </a>
					</div><div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=225" rel="bookmark" title="Card"><img width="150" height="110" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMF03-150x110.jpg" class="attachment-medium wp-post-image" alt="RMF03"><br>
						<h6>Card</h6>
                        </a>
					</div><div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=231" rel="bookmark" title="Slim"><img width="150" height="150" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMC82-150x150.jpg" class="attachment-medium wp-post-image" alt="RMC82"><br>
						<h6>Slim</h6>
                        </a>
					</div><div class="usb" id="usb">
						<a href="http://relymedia.com.s209914.gridserver.com/?page_id=234" rel="bookmark" title="Fingerprint"><img width="150" height="112" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMFP04-150x112.jpg" class="attachment-medium wp-post-image" alt="RMFP04"><br>
						<h6>Fingerprint</h6>
                        </a>
					</div></div></div>

				<a id="msprev" class="msprev" href="#" style="display: block;"></a>
				<a id="msnext" class="msnext" href="#" style="display: block;"></a>
			</div>
		</div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

我发现旋转木马在你的网站上运行良好,我猜你的问题是当滚动持续时间设置为1000时carouFredSel不能正常工作?

在你粘贴的html代码中,我发现没有id为“#carousel”的div,你需要创建一个像<div id ="carousel">这样的内容,它的内容应该是你要在轮播中显示的图像。

我试过,效果如下: http://jsfiddle.net/ra1j3cee/