带停放的左右箭头顶部暂停jQuery切换

准备好需要用到的图标。

新建html文档。

书写hmtl代码。

 

   

     
• 
     
• 
     
• 
     
• 
   

 

 

   

 4

 

 

 

书写css代码。 { display: table; zoom: 1; position: relative; width: 100%; max-width: 640px; max-height: 360px; margin: 5px auto 12.5px; z-index: 90; text-align: left; font-size: 10px; text-shadow: none; -sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }* html  { width: 640px } .ws_images ul { position: relative; width: 10000%; height: 100%; left: 0; list-style: none; margin: 0; padding: 0; border-spacing: 0; overflow: visible; /*table-layout:fixed;*/ } .ws_images ul li { position: relative; width: 1%; height: 100%; line-height: 0; /*opera*/ overflow: hidden; float: left; /*font-size:0;*/ padding: 0 0 0 0 !important; margin: 0 0 0 0 !important; } .ws_images { position: relative; left: 0; top: 0; height: 100%; max-height: 360px; max-width: 640px; vertical-align: top; border: none; overflow: hidden; } .ws_images ul a { width: 100%; height: 100%; max-height: 360px; display: block; color: transparent; } img { max-width: none !important; } .ws_images .ws_list img,  .ws_images > div > img { width: 100%; border: none 0; max-width: none; padding: 0; margin: 0; } .ws_images > div > img { max-height: 360px; } .ws_images iframe { position: absolute; z-index: -1; } .ws-title > div { display: inline-block !important; } a { text-decoration: none; outline: none; border: none; } .ws_bullets { float: left; position: absolute; z-index: 70; } .ws_bullets div { position: relative; float: left; font-size: 0px; } .ws_bullets a { line-height: 0; } .ws_script { display: none; } sound,  object { position: absolute; } .ws_effect { position: static; width: 100%; height: 100%; } .ws_photoItem { border: 2em solid #fff; margin-left: -2em; margin-top: -2em; }%; width: 7em; height: 5em; margin-left: -3.5em; margin-top: -2.5em; }

书写并添加js代码。 

代码整体结构。

查看效果。