欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

DIVCSS5整理比较实用的DIV+CSS布局的jQuery焦点幻灯片特效,幻灯片图片左右滚动,同时可以点击向左向右焦点让幻灯片向左向右滚动。本JS幻灯片特效具有任意选择的焦点选择要看广告幻灯片图片。

css div切换式幻灯片特效效果截图
JQ+CSS+DIV幻灯片特效焦点切换式幻灯片特效效果截图

本JQ幻灯片CSS特效特点:
1、图片可以任意替换,增减
2、可以点击左右控制滚动方向
3、适合SEO优化,纯DIV CSS布局幻灯片

幻灯片特效HTML部分代码展示:

  1. <div id="focus"> 
  2.         <ul> 
  3.             <li><a href="#" target="_blank"><img src="img/01.jpg" alt="CSS" /></a></li> 
  4.             <li><a href="#" target="_blank"><img src="img/02.jpg" alt="DIV CSS" /></a></li> 
  5.             <li><a href="#" target="_blank"><img src="img/03.jpg" alt="DIV+CSS" /></a></li> 
  6.             <li><a href="#" target="_blank"><img src="img/04.jpg" alt="HTML" /></a></li> 
  7.             <li><a href="#" target="_blank"><img src="img/05.jpg" alt="jquery商城焦点图展示" /></a></li> 
  8.         </ul> 
  9.     </div>   

幻灯片使用UL LI布局,简单实用,方便程序循环调用数据。

使用方法:
1、特效对于CSS代码拷贝入你的项目的CSS
2、HTML代码对应拷贝使用
3、JS代码拷贝入HTML 源代码中,同时jQuery文件引人HTML
4、根据你的项目,修改图片高度宽度大小、CSS对应修改即可

在线演示:查看案例

DIV幻灯片特效打包下载:

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css-texiao/texiao637.shtml