网络营销电子商务研究中心  
USA Web Hosting Direct
Go Back   网络营销电子商务研究中心 > 网站设计 > Javascript/Jquery
User Name
Password
 
FAQ Members List Calendar 域名注册 PHP Mark Forums Read

Reply
 
Thread Tools Display Modes
  #1   IP: 199.115.98.60
Old 2017-10-25, 02:01 AM
Kennan Kennan is offline
初级会员
 
Join Date: 2005-03-08
Posts: 2
Kennan 现在声名狼藉
Default Simple Auto-Playing Slideshow, using jQuery

HTML
Wrapper with div's as the "slides", which can contain any content.

Code:
<div id="slideshow">
   <div>
     <img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
   </div>
   <div>
     <img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
   </div>
   <div>
     Pretty cool eh? This slide is proof the content can be anything.
   </div>
</div>
CSS
Slides need to be absolutely positioned within the wrapper. This has a tiny bit of extra pizazz:
Code:
#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    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; 
}
jQuery JavaScript
Run after DOM is ready.
Code:
$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);
Reply With Quote
  #2   IP: 199.115.98.60
Old 2017-10-25, 02:02 AM
Kennan Kennan is offline
初级会员
 
Join Date: 2005-03-08
Posts: 2
Kennan 现在声名狼藉
Default

Works under jquery-1.12.4.min.js
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are Off
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
ZenCart auto facebook插件 配置使用 topvip ZenCart 0 2012-12-21 07:24 PM
CMS Made Simple的几点技巧 yahoo Blog(博客)/Wiki(维客)/RSS/Cms 0 2008-02-13 10:08 AM

Prescription-glasses.com offers prescription glasses online at discount prices.
所有时间均为 +8. 现在的时间是 01:24 AM, Free Patent & Patent Ideas