这篇文章主要帮助大家轻松实现 javascript 图片轮播特效,点击标签还可以实现图片切换,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
还是先来看一看效果图:
具体代码:
一、html 代码分析
- <body>
- <div class="dota">
- <ul id="content">
- <li>
- <a href="#">
- <img src="images/1.jpg" />
- </a>
- </li>
- <li>
- <a href="#">
- <img src="images/2.jpg" />
- </a>
- </li>
- <li>
- <a href="#">
- <img src="images/3.jpg" />
- </a>
- </li>
- <li>
- <a href="#">
- <img src="images/4.jpg" />
- </a>
- </li>
- <li>
- <a href="#">
- <img src="images/5.jpg" />
- </a>
- </li>
- </ul>
- <ul id="indicator">
- <li class="current">
- <a href="#">
- A版是一款手机DOTA应用,它涵盖了
- </a>
- </li>
- <li>
- <a href="#">
- A版是一款手机应用,它涵盖了
- </a>
- </li>
- <li>
- <a href="#">
- A版是一款手机应用,它涵盖了
- </a>
- </li>
- <li>
- <a href="#">
- A版是一款手机应用,它涵盖了
- </a>
- </li>
- <li>
- <a href="#">
- A版是一款手机应用,它涵盖了
- </a>
- </li>
- </ul>
- </div>
- </body>
此效果的层次结构比较清楚: 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) 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 代码
- <script type="text/javascript">
- $(function() {
- var nowImage = 0;
- /* 为定时动画服务 */
- $(".dota #content li").first().clone().appendTo($(".dota #content"));
- var timer = setInterval(autoAnimate, 1500);
- $(".dota").mouseenter(function() {
- clearInterval(timer);
- }).mouseleave(function() {
- timer = setInterval(autoAnimate, 1500);
- });;
- $(".dota #indicator li").mouseenter(function() {
- $(this).addClass("current").siblings().removeClass("current");
- nowImage = $(this).index();
- /*stop() 可以立刻清楚以前的动画,防止动画叠加*/
- $(".dota #content").stop().animate({
- "top": -230 * nowImage
- },
- 1000);
- });
- function autoAnimate() {
- if (nowImage == 4) {
- nowImage = 0;
- $(".dota #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current");
- $(".dota #content").stop().animate({
- "top": -230 * 5
- },
- 1000,
- function() {
- $(".dota #content").css("top", 0);
- });
- } else {
- nowImage++;
- $(".dota #content").stop().animate({
- "top": -230 * nowImage
- },
- 1000);
- $(".dota #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current");
- }
- }
- });
- </script>
来源: http://www.phperz.com/article/17/0407/267590.html