我有一個非常好的滑塊腳本在這裏,並已經想出了它下面的子彈,但我只想知道..是否有可能添加一些簡單的線條,使圖像暫停/保持在鼠標懸停?添加暫停功能滑塊
這裏是我現在的代碼:
jQuery的
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#slideshow div:gt(0)").hide();
var index;
index = 0;
var totalslides;
totalslides = 2;
var nextSlide = function() {
$('#slideshow div').eq(index).fadeOut(1000);
$('#nav' + index).toggleClass('navselected');
index++;
if (index > totalslides - 1) { index = 0; }
$('#slideshow div').eq(index).fadeIn(3000);
$('#nav' + index).toggleClass('navselected');
}
var nextSlideTimer = setInterval(nextSlide, 7000);
function nav(selectedSlide) {
clearInterval(nextSlideTimer);
$('#slideshow div').eq(index).fadeOut(1000);
$('#nav' + index).toggleClass('navselected');
index = selectedSlide;
$('#slideshow div').eq(index).fadeIn(1000);
$('#nav' + index).toggleClass('navselected');
nextSlideTimer = setInterval(nextSlide, 4000);
}
$("#nav0").click(function() { nav(0); });
$("#nav1").click(function() { nav(1); });
});
</script>
CSS
<style>
#slideshow { position: relative; width: 960px; height: 300px; padding: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.4);}
#slideshow div { position: absolute; top: 10px ; left: 10px; right: 10px; bottom: 10px; }
#slideshow a {display: block;width:960px;height:300px; }
#slideshow a:hover{background-position: center bottom;}
#slideshownav a.navselected{color:#eb910c;}
#slideshownav {text-align:center; padding-top:8px;padding-bottom:20px;}
#slideshownav a {padding-right:10px;color:#748090;font-size:50px; text-decoration: none; }
#slideshownav a:hover {cursor:pointer;}
</style>
HTML
<div id="slideshow">
<div>IMAGE 1</div>
<div>IMAGE 2</div>
</div>
<div id="slideshownav">
<a id="nav0" class="navselected">°</a>
<a id="nav1">°</a>
</div>
感謝兄弟,但正如我剛剛回復Mottie .. jQuery是打擊和希望我。在哪裏放置這個,就在最後}}; ? – Jorus
最後一個好友......在最後一個'});'之前添加它。 –
謝謝兄弟!標記爲有幫助。 – Jorus