谁的错呢？ CSS或JavaScript？ [英] Whose fault is it? CSS or JavaScript?
本文介绍了谁的错呢？ CSS或JavaScript？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
滑块应该运行漂亮和平滑。相反，动画不能顺利工作。这里是HTML，CSS和Javascript。我看了看，看着，看不出线索。旋转不平滑，字幕与图像不匹配，最后的图像甚至不显示。 （这里是实际演示）。
这里有一些示例图片显示了一些问题：
The slider should function nice and smooth. Instead the animation isn't working smoothly. Here are the HTML, CSS and Javascript. I looked and looked and looked and can't find the clue. Rotating is not smooth, caption does not match the image, the last image doesn't even appear. (Here is the actual demo).
Here are some sample images showing a bit of the problem:
<IMG ID="slideshowPicturePlaceholder" src="/_layouts/images/GEARS_AN.GIF" style="display:none"/>
<div id="slideshowContentArea" style="display:none; width:255px;">
<div class="main_view">
<div class="window">
<div class="image_reel"> </div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
</div>
<style type="text/css">
/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height: 286px; width: 790px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
</style>
<script type="text/javascript" src="_layouts/jquery/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="_layouts/jquery/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function GetAllImages()
{
$("#slideshowPicturePlaceholder").css("display", "block");
var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'><soapenv:Body><GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>";
soapEnv += "<listName>NewsRotator</listName>";
soapEnv += "<query><Query><OrderBy Override='TRUE'><FieldRef Name='Created' Ascending='FALSE' /></OrderBy></Query></query>";
soapEnv += "<viewFields><ViewFields><FieldRef Name='Title'/><FieldRef Name='ows_FileLeafRef'/><FieldRef Name='NewsLink'/><FieldRef Name='Description'/></ViewFields></viewFields><rowLimit></rowLimit>";
soapEnv += "</GetListItems></soapenv:Body></soapenv:Envelope>";
var port = window.location.port;
if (port.length <= 0)
port = "";
else
port = ":" + port;
var webservice = window.location.protocol + "//" + window.location.hostname + port + L_Menu_BaseUrl + "/_vti_bin/lists.asmx";
$.ajax(
{
url : webservice,
type : "POST",
dataType : "xml",
data : soapEnv,
complete : processQueryResults,
contentType : "text/xml; charset=utf-8",
error : function (xhr)
{
alert('Error! Status = ' + xhr.status);
}
});
}
function processQueryResults(xData, status)
{
var port = window.location.port;
if (port.length <= 0)
port = "";
else
port = ":" + port;
// Change the below to point to your image library
var imageURL = window.location.protocol + "//" + window.location.hostname + port + L_Menu_BaseUrl + "/Splash Image Rotator/";
var itemURL = window.location.protocol + "//" + window.location.hostname + port + L_Menu_BaseUrl + "/Splash Image Rotator/Forms/DispForm.aspx?ID=";
// $("#slideshowContentArea").html("")
$(xData.responseXML).find("z\\:row").each(function ()
{
var title = $(this).attr("ows_Title");
var headlines = $(this).attr("ows_Description");
var imageLink = imageURL + $(this).attr("ows_FileLeafRef").substring($(this).attr("ows_FileLeafRef").indexOf('#') + 1);
// // var itemLink = itemURL + $(this).attr("ows_ID");
var itemLink = $(this).attr("ows_NewsLink");
//var liHtml = "<div><a href='" + itemLink + "' target='_blank'><img src='" + imageLink + "'/></a></div>";
//var liHtml ="<a target='_blank' border='0' href='"+itemLink+"'><img src='"+ imageLink +"'/></a>";
var liHtml = "<a href='"+itemLink+"' target='_blank' border='0'><img src='" + imageLink +"'/></a><p>"+ title + " - " + headlines + "</p>";
$(".image_reel").append(liHtml);
});
$("#slideshowPicturePlaceholder").css("display", "none");
$("#slideshowContentArea").css("display", "block");
// Show the paging and activate its first link
$(".paging").show();
$(".paging a:first").addClass("active");
// Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
// Adjust the image reel to its new size
$(".image_reel").css(
{
'width' : imageReelWidth
}
);
// Paging and Slider Function
rotate = function ()
{
var triggerID = $active.attr("rel") - 1;
// Get number of times to slide
var image_reelPosition = triggerID * imageWidth;
// Determines the distance the image reel needs to slide
$(".paging a").removeClass('active');
// Remove all active class
$active.addClass('active');
// Add active class (the $active is declared in the rotateSwitch function)
// Slider Animation
$(".image_reel").animate(
{
left : - image_reelPosition
}
, 500);
}
;
// Rotation and Timing Event
rotateSwitch = function ()
{
play = setInterval(function ()
{
// Set timer - this will repeat itself every 7 seconds
$active = $('.paging a.active').next();
// Move to the next paging
if ($active.length === 0)
{
// If paging reaches the end...
$active = $('.paging a:first');
// go back to first
}
rotate();
// Trigger the paging and slider function
}
, 3000);
// Timer speed in milliseconds (7 seconds)
}
;
rotateSwitch();
// Run function on launch
// On Hover
$(".image_reel a").hover(function ()
{
clearInterval(play);
// Stop the rotation
}
, function ()
{
rotateSwitch();
// Resume rotation timer
} );
// On Click
$(".paging a").click(function ()
{
$active = $(this);
// Activate the clicked paging
// Reset Timer
clearInterval(play);
// Stop the rotation
rotate();
// Trigger rotation immediately
rotateSwitch();
// Resume rotation timer
return false;
// Prevent browser jump to link anchor
}
);
}
GetAllImages();
});
</script>
推荐答案
。
position绝对不需要'.image_reel'类，请尝试使用float：left。
This issue might cause because of using position property in CSS. position absolute is not necessary for '.image_reel' class, try with float:left.
这篇关于谁的错呢？ CSS或JavaScript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
