轻松实现javascript图片轮播特效

这篇文章主要帮助大家轻松实现javascript图片轮播特效,点击标签还可以实现图片切换,感兴趣的小伙伴们可以参考一下 …

这篇文章主要帮助大家轻松实现javascript图片轮播特效,点击标签还可以实现图片切换,感兴趣的小伙伴们可以参考一下

本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下

还是先来看一看效果图:

具体代码:

一、HTML代码分析

  
    
    
 
  • A版是一款手机DOTA应用,它涵盖了
  • A版是一款手机应用,它涵盖了
  • A版是一款手机应用,它涵盖了
  • A版是一款手机应用,它涵盖了
  • A版是一款手机应用,它涵盖了

此效果的层次结构比较清楚:
1. class为data的div是最外层的容器,可以用来控制整个效果图显示的位置。

2. id为content的ul用来存放左侧滚动的图片。

3. id为indicator的ul用来显示右侧的指示栏。

二、CSS代码

 *{margin: 0; padding: 0;} img{ border:0; } .dota{ width:570px; height: 230px; margin:100px auto; position: relative; overflow: hidden; } .dota #content{ float: left; list-style: none; position: absolute; width:380px; height:230px; } .dota #content img{ width:380px; height:230px; } .dota #indicator{ float: right; list-style: none; width:180px; height:220px; padding: 5px; background-color: #100F13; } .dota #indicator li{ width: 180px; height: 44px; background: url(images/anniu.png-600) 0 -44px; } .dota #indicator li.current{ background-position: 0 0; } .dota #indicator li a{ display: block; width: 160px; height: 34px; padding: 5px 0 5px 25px; } .dota #indicator li a:link , .dota #indicator li a:visited{ text-decoration: none; color: #686477; font: 12px/145% "宋体"; } 

这里,我对indicator中li的代码进行说明:
.dota #indicator li中的css代码就是设置右侧指示栏中的每一项,注意到,这里使用了background属性,也就是说li的背景是一张图片。准备好的图片如下:

这张准备好的图片大小为 180 * 88, 而.dota #indicator li中的background属性设置的position属性大小为 0 -44px, 即截取的图片的下半部分;所以indicator中所有的背景图片显示的是下半部分比较暗的部分; 而.dota #indicator li.current 的position属性大小为 0 0,所以默认情况下indicator的第一个显示高亮,其余的显示为暗黑的那部分。然后通过JQuery代码控制current属性作用在 “谁” 身上来切换选中状态。

三、JQuery代码

 

以上就是轻松实现javascript图片轮播特效的详细代码,希望对大家的学习有所帮助。

以上就是轻松实现javascript图片轮播特效的详细内容,更多请关注www.cfluntan.cn其它相关文章!

为您推荐

返回顶部