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 相关文章推荐
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
vuex实现简易计数器
Oct 27 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
VUE实现图片验证码功能
Nov 18 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
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
深入php数据采集的详解
2013/06/02 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
详解php实现页面静态化原理
2017/06/21 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
Knockoutjs的环境搭建教程
2012/11/26 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
举例讲解Python常用模块
2019/03/08 Python
python Pillow图像处理方法汇总
2019/10/16 Python
Python requests接口测试实现代码
2020/09/08 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
工业设计专业推荐信
2013/10/29 职场文书
励志演讲稿800字
2014/08/21 职场文书
2014年消防工作总结
2014/11/21 职场文书
python实现Nao机器人的单目测距
2021/09/04 Python
Python实现对齐打印 format函数的用法
2022/04/28 Python