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 相关文章推荐
清空上传控件input file的值
Jul 03 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
Vue组件简易模拟实现购物车
Dec 21 Vue.js
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 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 Memcached应用实现代码
2010/02/08 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
import的本质解析
2017/10/30 Python
python实现学生管理系统
2018/01/11 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
Python3读写ini配置文件的示例
2020/11/06 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
中专自我鉴定范文
2013/10/16 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js
mysql序号rownum行号实现方式
2022/12/24 MySQL