js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码


Posted in Javascript onSeptember 02, 2015

今天来分享一下鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码。

最后的效果如下:

 js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

 js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

Html代码部分:

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>图片轮播效果制作_赵一鸣随笔博客</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/style.js"></script>
 </head>
 <body>
   <div class="banner">
     <ul class="pic">
       <li>
          <a href="#"><img src="images/1.jpg" alt="美女" width="350" height="495"></a>
       </li>
       <li>
          <a href="#"><img src="images/2.jpg" alt="美女" width="350" height="495"></a>
       </li>
       <li>
          <a href="#"><img src="images/3.jpg" alt="美女" width="350" height="495"></a>
       </li>
       <li>
          <a href="#"><img src="images/4.jpg" alt="美女" width="350" height="495"></a>
       </li>
       <li>
          <a href="#"><img src="images/5.jpg" alt="美女" width="350" height="495"></a>
       </li>
     </ul>
     <ul class="anniu">
       <li class="on"></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
     </ul>
     <ul class="lr">
       <li class="pre"><a href="#"> < </a></li>
       <li class="next"><a href="#"> > </a></li>
     </ul>
   </div>
 </body>
</html>

Css代码部分:

*{margin:0px;padding:0px}
li{list-style:none}
a{text-decoration:none}
img{border:0px}
.banner{width:350px;height:495px;margin:100px auto;position:relative;overflow:hidden}
.banner .pic{width:9999px;height:495px}
.banner .pic li{width:350px;height:495px;float:left}
.banner .anniu{width:100px;height:16px;position:absolute;left:165px;top:470px}
.banner .anniu li{width:16px;height:16px;background:white;float:left;margin:2px;display:inline;
cursor:pointer;border-radius:100%}
.banner .anniu li.on{background:red}
.banner .lr{width:350px;height:50px;position:absolute;top:250px;display:none}
.banner .lr a{color:white}
.banner .lr .pre{width:20px;height:50px;float:left;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}
.banner .lr .next{width:20px;height:50px;float:right;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}

Javascript代码部分:

$(function(){
   //鼠标滑过banner,左右按钮进行显示和隐藏
   $(".banner").hover(function(){
     $(".lr").show();
   },function(){
     $(".lr").hide();
   });
   //点击下面的小按钮,图片进行左右切换效果
   $(".anniu li").click(function(){
     $(this).addClass("on").siblings().removeClass("on");
     var num=$(this).index();
     $(".pic").animate({marginLeft:-350*num},"slow");
   });
   //图片自动轮播效果
   var a=0;
   var automatic=setInterval(function(){
     a++;
     a=a%5;
     $(".pic").animate({marginLeft:-350*a},"slow");
     $(".anniu li").eq(a).addClass("on").siblings().removeClass("on");
   },6000);
   //点击左右按钮,图片进行切换效果
   $(".pre").click(function(){
     a--;
     a=(a+5)%5;
     $(".pic").animate({marginLeft:-350*a},"slow");
     $(".anniu li").eq(a).addClass("on").siblings().removeClass("on");
   });
   $(".next").click(function(){
     a++;
     a=a%5;
     $(".pic").animate({marginLeft:-350*a},"slow");
     $(".anniu li").eq(a).addClass("on").siblings().removeClass("on");
   });
});
Javascript 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
解决Vue项目中tff报错的问题
Oct 21 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 #Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 #Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 #Javascript
JavaScript对象学习小结
Sep 02 #Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 #Javascript
jquery实现华丽的可折角广告代码
Sep 02 #Javascript
javascript学习总结之js使用技巧
Sep 02 #Javascript
You might like
ASP和PHP都是可以删除自身的
2007/04/09 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
js实现下一页页码效果
2017/03/07 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
十个Python程序员易犯的错误
2015/12/15 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
python中的闭包函数
2018/02/09 Python
python学习入门细节知识点
2018/03/29 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
python 生成器需注意的小问题
2020/09/29 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
JPA面试常见问题
2016/11/14 面试题
大专学生推荐信范文
2013/11/19 职场文书
计算机专业毕业生求职信分享
2013/12/24 职场文书
体育活动总结范文
2014/05/04 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL