您的位置:首页 > 网页特效 > 【 返回上一页

JQ+CSS幻灯片左右自动滚动带数字与左右点击焦点幻灯片特效

jquery div css布局幻灯片特效,自带数字1 2 3左右滚动幻灯片,可点击左边或右边箭头按钮控制左右滚动,自带数字无需添加,并且幻灯片焦点特效使用ul li布局,利用搜索引擎优化布局特效。


焦点左右滚动JQ CSS幻灯片特效效果截图

幻灯片特点:幻灯片采用JQ开发,兼容各大浏览器,大网站也在使用,同时焦点数字随图片增加而增加,减少而减少无效手动或程序添加数字而自动数字焦点,同时左右具有可点击焦点半透明按钮图片,可控制图片左滚动与右滚动切换幻灯片查看幻灯片图片内容。

幻灯片HTML div部分代码:

  1. <div class="focus" id="focus001">
  2.     <ul>
  3.         <li><a href="http://www.thinkcss.com/" target="_blank"><img src="img/01.jpg" alt="jquery特效" /></a></li>
  4.         <li><a href="http://www.thinkcss.com/" target="_blank"><img src="img/02.jpg" alt="ThinkCSS" /></a></li>
  5.         <li><a href="#" target="_blank"><img src="img/03.jpg" alt="点击左右滚动jquery焦点图特效" /></a></li>
  6.     </ul>
  7. </div> 

特效采用ul li列表布局,方便做程序。

使用说明:根据需要可以跟换可点击左右按钮图标,同时修改CSS对应宽度 高度。自带显示数字1 2 3 4背景效果依然也可以通过CSS控制设置需要样式,包含幻灯片广告图片宽度高度均可根据需求修改设置。

在线演示:

查看案例

完整特效DIV+CSS+JQ文件打包下载:

相关标签: 幻灯片 滚动 左右滚动 焦点 数字
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/texiao/735.shtml

日期:2014-07-05 23:12:05 来源:网络整理 作者:ThinkCSS

热门点击