JQ幻灯片左右自动滚动带数字与左右点击焦点幻灯片特效-会学html CSS

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

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

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

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

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

幻灯片HTML div部分代码:

  1. <div class="focus" id="focus001">
  2.     <ul>
  3.         <li><a href="//www.html8.com.cn/" target="_blank"><img src="img/01.jpg" alt="jquery特效" /></a></li>
  4.         <li><a href="//www.html8.com.cn/" target="_blank"><img src="img/02.jpg" alt="HTML8" /></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文件打包下载:

更新