1
我创建了一个简单的淡入淡出滑块并使其工作。 我想将子弹导航圈动态地合并到滑块并链接到动态滑块中的图像,但我发现这太难了。 现在我已经手动放置子弹导航圈如何将子弹导航添加到滑块
有人可以帮我吗? 三江源
这里是我的小提琴http://jsfiddle.net/kingkhan/f5zBy/60/
HTML
<div id="quickslider">
<div class="quickslider">
<img id="1" src="http://placehold.it/990x400/c84265/ffffff&text=one" alt="placeholder image">
<img id="2" src="http://placehold.it/990x400/000000/ffffff&text=two" alt="placeholder image">
<img id="3" src="http://placehold.it/990x400/636363/ffffff&text=three" alt="placeholder image">
<img id="4" src="http://placehold.it/990x400/CCCCCC/ffffff&text=four" alt="placeholder image">
</div><!--quickslider-->
<div class="nav-thumbs">
<ul>
<li><a href="#" class="1">1</a></li>
<li><a href="#" class="2">2</a></li>
<li><a href="#" class="3">3</a></li>
<li><a href="#" class="4">4</a></li>
</ul>
</div>
<div class="quickslider-nav">
<a href="#" class="left">Prev</a>
<a href="#" class="right" onclick="next(); return false;">Next</a>
</div>
</div><!--quickslider-->
CSS
#quickslider{width:990px; margin:0 auto; position: relative;}
.quickslider{position: relative; float: left; display: block; width: 990px; height:400px;}
.quickslider img{display: none; margin: 0; padding: 0; position: absolute;}
.nav-thumbs{position: absolute; clear:both; bottom:15px; left:42%;}
.nav-thumbs ul{list-style-type: none;}
.nav-thumbs ul li{float:left; margin-top:20px;}
.nav-thumbs ul li a{
display:block;
width:10px;
height:10px;
float: left;
margin:0 5px;
background-color: #fff;
text-indent: -9999px;
border-radius: 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.nav-thumbs ul li a:hover, .nav-thumbs ul li a.active{background-color: #a89d8a !important;}
.active{background-color: #a89d8a !important;}
.quickslider-nav{position:relative; clear:both; color:#000;}
.quickslider-nav a{text-decoration: none;}
.quickslider-nav .left{float: left; background-color: #fff; padding:5px 10px;}
.quickslider-nav .right{float: right; background-color: #fff; padding:5px 10px;}
.quickslider-nav .left:hover, .quickslider-nav .right:hover{background-color: #000; color:#fff;}
的jQuery 1.9.1
sliderInt = 1; //slider default on load
sliderNext = 2; //next image in order
$(document).ready(function(){
$('.quickslider > img#1').fadeIn(300); // initially load first slider on load
$('.nav-thumbs a:first').addClass('active'); // add active class to first dot
startSlider();
$('.left').click(function(){
prev();
$('.nav-thumbs a').removeClass('active');
});
$('.right').click(function(){
next();
$('.nav-thumbs a').removeClass('active');
});
});
function startSlider(){
count = $('.quickslider > img').size(); //variable to count all the list items or img
loop = setInterval(function(){
if(sliderNext>count){
sliderNext = 1; // set to beginning after completion of slides list
sliderInt = 1; // set the Integer number back to 1 also
}
$('.quickslider > img').fadeOut(300); // fadeout all images
$('.quickslider > img#'+sliderNext).fadeIn(300); // use sliderNext to calculate the next slider id
sliderInt = sliderNext; // update so that the current slide = 2 as set globally
sliderNext = sliderNext + 1; // calculate the next image
}, 3000); // after milliseconds loop
}
//previous function
function prev(){
//calculate the slide which comes before the current slide
newSlide = sliderInt - 1; // current slide minus 1 added to variable called newSlide
showSlide(newSlide); // pass information from newSlide above to function showSlide
}
function next(){
//calculate the slide which comes after the current slide
newSlide = sliderInt + 1; // current slide plus 1 added to variable called newSlide
showSlide(newSlide); // pass information from newSlide above to function showSlide
}
function stopLoop(){
window.clearInterval(loop); //clear interval of loop so that it does not skip images when in between intervals, ie. the 300 miliseconds just about to complete, and clicking on next will make it seem as though the you have clicked through two images
}
function showSlide(id){ // id is the variable name of what we will be calling which will be passed
stopLoop(); // call function that we have declared above so that the interval is cleared and restarted
if(id > count){
id = 1; // if id = more than the count of images then set back to 1
}else if(id < 1){
id = count; // if id = less than count of list then set back to 4 or whatever number of images
}
$('.quickslider > img').fadeOut(300); // fadeout all images
$('.quickslider > img#'+id).fadeIn(300); // use sliderNext to calculate the next slider id
$('.nav-thumbs > a#'+id).addClass('active');
sliderInt = id; // update so that the current slide = 2 as set globally
sliderNext = id + 1; // calculate the next image
startSlider(); // start the slider process again, as it was stopped before
}
$('.quickslider > img').hover(function(){
stopLoop(); // stops the loop when image is hovered over
},
function(){
startSlider(); // starts where the loop left off
});
如何通过单击next和prev来更改子弹导航的状态? – Hasan
我会在'showSlide'函数中做到这一点。获取'''数据幻灯片'属性与'id'相同的'a'。从所有'a'元素中删除活动类并将其添加到前面提到的那个元素中。 –
谢谢,我会给你一个去.. – Hasan