<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
< html xmlns = "http://www.w3.org/1999/xhtml" > |
< head > |
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> |
< title >自动滚动的jQuery幻灯片代码</ title > |
< script src = "js/jquery-1.4.4.min.js" ></ script > |
< script src = "js/slides.min.jquery.js" ></ script > |
< script > |
$(function(){ |
$('#slides').slides({ |
preload: true, |
preloadImage: 'img/loading.gif', |
play: 5000, |
pause: 2500, |
hoverPause: true, |
animationStart: function(){ |
$('.caption').animate({ |
bottom:-35 |
},100); |
}, |
animationComplete: function(current){ |
$('.caption').animate({ |
bottom:0 |
},200); |
if (window.console && console.log) { |
// example return of current slide number |
console.log(current); |
}; |
} |
}); |
}); |
</ script > |
< link rel = "stylesheet" href = "css/global.css" > |
</ head > |
< body > |
< div id = "container" > |
< div id = "example" > < img src = "img/new-ribbon.png" width = "112" height = "112" alt = "New Ribbon" id = "ribbon" > |
< div id = "slides" > |
< div class = "slides_container" > |
< div > < a href = "http://yuncode.net" title = "145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target = "_blank" >< img src = "img/slide-1.jpg" width = "570" height = "270" alt = "Slide 1" ></ a > |
< div class = "caption" style = "bottom:0" > |
< p >Happy Bokeh Thursday!</ p > |
</ div > |
</ div > |
< div > < a href = "http://yuncode.net" title = "Taxi | Flickr - Photo Sharing!" target = "_blank" >< img src = "img/slide-2.jpg" width = "570" height = "270" alt = "Slide 2" ></ a > |
< div class = "caption" > |
< p >Taxi</ p > |
</ div > |
</ div > |
< div > < a href = "http://yuncode.net" title = "Happy Bokeh raining Day | Flickr - Photo Sharing!" target = "_blank" >< img src = "img/slide-3.jpg" width = "570" height = "270" alt = "Slide 3" ></ a > |
< div class = "caption" > |
< p >Happy Bokeh raining Day</ p > |
</ div > |
</ div > |
< div > < a href = "http://yuncode.net" title = "We Eat Light | Flickr - Photo Sharing!" target = "_blank" >< img src = "img/slide-4.jpg" width = "570" height = "270" alt = "Slide 4" ></ a > |
< div class = "caption" > |
< p >We Eat Light</ p > |
</ div > |
</ div > |
< div > < a href = "http://www.16sucai.cn/" title = "“I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.” | Flickr - Photo Sharing!" target = "_blank" >< img src = "img/slide-5.jpg" width = "570" height = "270" alt = "Slide 5" ></ a > |
< div class = "caption" > |
< p >“I must go down to the sea again, to the lonely sea and the sky...”</ p > |
</ div > |
</ div > |
< div > < a href = "http://yuncode.net" title = "twelve.inch | Flickr - Photo Sharing!" target = "_blank" >< img src = "img/slide-6.jpg" width = "570" height = "270" alt = "Slide 6" ></ a > |
< div class = "caption" > |
< p >16sucai.com</ p > |
</ div > |
</ div > |
< div > < a href = "http://yuncode.net" title = "Save my love for loneliness | Flickr - Photo Sharing!" target = "_blank" >< img src = "img/slide-7.jpg" width = "570" height = "270" alt = "Slide 7" ></ a > |
< div class = "caption" > |
< p >Save my love for loneliness</ p > |
</ div > |
</ div > |
</ div > |
< a href = "#" class = "prev" >< img src = "img/arrow-prev.png" width = "24" height = "43" alt = "Arrow Prev" ></ a > < a href = "#" class = "next" >< img src = "img/arrow-next.png" width = "24" height = "43" alt = "Arrow Next" ></ a > </ div > |
< img src = "img/example-frame.png" width = "739" height = "341" alt = "Example Frame" id = "frame" > </ div > |
< div id = "footer" > |
< p >来源:< a href = "http://slidesjs.com" target = "_blank" >slidesjs</ a ></ p > |
< p ></ p > |
< p >自动滚动的jQuery幻灯片代码,可左右翻页,并有导航按钮</ p > |
< p ></ p > |
</ div > |
</ div > |
</ body > |
</ html > |
初级程序员
by: 学代码累成狗 发表于:2017-04-21 09:29:08 顶(0) | 踩(0) 回复
学习
回复评论