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 相关文章推荐
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
javascript操作数组详解
Dec 17 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
redux处理异步action解决方案
Mar 22 Javascript
详解JavaScript匿名函数和闭包
Jul 10 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
基于mysql的论坛(3)
2006/10/09 PHP
PHP安全配置
2006/12/06 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
ArrayList类(增强版)
2007/04/04 Javascript
javascript 特殊字符串
2009/02/25 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
原生js实现放大镜
2017/02/20 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
简单说说angular.json文件的使用
2018/10/29 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
Python如何telnet到网络设备
2021/02/18 Python
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
文科教师毕业的自我评价
2014/01/16 职场文书
英文商务邀请信
2014/01/22 职场文书
同志主要表现材料
2014/08/21 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS