jQuery实现图片轮播效果代码

整理以前用jQuery实现的图片轮播效果。

1. 不做操作时,自动轮播
 2. 鼠标悬浮在图片上时,停止自动轮播,隐藏在图片左右的箭头会显示出来
 3. 手动轮播1:鼠标指向图片底部的小标按钮,可以切换对应的图片
 4. 手动轮播2:点击左右箭头也可以切换图片

效果图:(PS:用软件捕捉的,不太会弄,感觉图片都失真了)

jQuery实现图片轮播效果代码

下面是代码区域:

**inde.html部分代码**

<div class="box">
 <ul class="img">
  <li class="photo"><a href="#"><img src="images/1.jpg" alt=""/></a></li>
  <li class="photo"><a href="#"><img src="images/2.jpg" alt=""/></a></li>
  <li class="photo"><a href="#"><img src="images/3.jpg" alt=""/></a></li>
  <li class="photo"><a href="#"><img src="images/4.jpg" alt=""/></a></li>
  <li class="photo"><a href="#"><img src="images/5.jpg" alt=""/></a></li>
  <li class="photo"><a href="#"><img src="images/6.jpg" alt=""/></a></li>
  <li class="photo"><a href="#"><img src="images/7.jpg" alt=""/></a></li>
 </ul>
 <div>
  <span class="jt" id="jtLeft"><</span>
  <span class="jt" id="jtRight">></span>
 </div>
 <div class="numList"></div>
</div>

**reset.css代码**

.box{
 padding:0;
 width: 800px;
 height: 500px;
 margin: 0 auto;
 position:relative;
}
ul.img{
 padding:0;
 margin: 0 auto;
}
ul.img .photo{
 list-style: none;
 position: absolute;
 display: none;
}
img{
 width: 800px;
 height: 500px;
}
.box .img .active{
 display: block;
}

.jt{
 width: 40px;
 height: 50px;
 background-color: rgba(0,0,0,0.5);
 position: absolute;
 top:50%;
 margin-top: -25px;
 line-height: 50px;
 font-size: 30px;
 color: white;
 font-weight: 800;
 text-align: center;
 display: none;
}
#jtRight{
 right: 0;
}

.numList{
 font-size: 0;
 position: absolute;
 bottom:10px;
 left: 50%;
 margin-left:-70px;
}
.numList .num{
 background-color: black;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 color: white;
 text-align: center;
 font-size: 14px;
 display: inline-block;
}
.numList .check{
 background-color: red;
}

**main.js代码**

$(function(){
 /*定义全局变量,用来记录表示显示的图片的下标*/
 var i=0;

 /*按图片的数量添加下标*/
 var size=$(".photo").size();
 for (var j=1;j<=size;j++){
  var span=$("<span class='num'>"+j+"</span>");
  $(".numList").append(span);
 }
 /*默认选中第一个下标和显示第一张图片*/
 $(".photo:eq(0)").addClass("active");
 $(".num:eq(0)").addClass("check");

 /*手动轮播*/
 var HandleImgChange=function(){
  $(".num").each(function(){
   $(this).mouseover(function(){
    $(this).siblings().removeClass("check");
    $(this).addClass("check");

    /*获得选择的下标值*/
    i=$(this).index();
    $(".photo").hide();
    $(".photo").eq(i).show();
   });
  });
 };

 /*显示下一张图*/
 var move=function(){
  i++;
  if(i>size-1){
   i=0;
  }
  $(".num").eq(i).addClass("check").siblings().removeClass("check");
  $(".photo").eq(i).show().siblings().hide();
 };

 /*自动轮播*/
 var AutoImgChange=function(){
  var t=setInterval(move,1000);
  $(".box").hover(function(){
   $(this).css({"cursor":"pointer"});
   $(".jt").css({"display":"block"});
   clearInterval(t);
  },function(){
   $(".jt").css({"display":"none"});
   t=setInterval(move,1000);
  })
 };

 /*设置左右箭头点击事件*/
 var jtL=function(){
  $("#jtLeft").click(function(){
   i--;
   if(i<0){
    i=size-1;
   }
   $(".num").eq(i).addClass("check").siblings().removeClass("check");
   $(".photo").eq(i).show().siblings().hide();
  })
 };
 var jtR=function(){
  $("#jtRight").click(function(){
   move();
  })
 };

 HandleImgChange();
 AutoImgChange();
 jtR();
 jtL();
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2016-09-25

用jQuery实现优酷首页轮播图

大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 思路 思路其实非常简单,就是当点击图片下面的圆点或者图片两边的箭头时,让想要看到的图片走到它的位置,然后当前的图片和想要看到的图片按照一个方向运动就可以了 例如:我们点击第五个小圆点,让第五个图片跑到当前图片的后面,然后一起向左运动 当然了,如果你想要看前面的图片,让图片先跑到当前图片的左边,然后和当前图片一起向右运动 基本结构与样式 <div class="lunbo"> &

jquery 实现轮播图详解及实例代码

轮播图: 接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较.轮播图的效果可以点击如下链接查看:http://sandbox.runjs.cn/show/t07kscph jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <hea

jQuery自适应轮播图插件Swiper用法示例

本文实例讲述了jQuery自适应轮播图插件Swiper用法.分享给大家供大家参考,具体如下: 运行效果截图如下: 示例代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca

jQuery简单自定义图片轮播插件及用法示例

本文实例讲述了jQuery简单自定义图片轮播插件及用法.分享给大家供大家参考,具体如下: 经常使用别人的插件,现在自己写一个,纪念一下. jQuery.banner.js: /* * banner 0.1 * 使用banner 实现图片定时切换 鼠标经过停止动画 * 鼠标离开,继续动画 */ ;(function($){ $.fn.banner =function(options){ //各种属性和参数 var defaults ={ picWidth:"1000", picHeigh

原生Javascript和jQuery做轮播图简单例子

接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较. jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮

jQuery实现的图片轮播效果完整示例

本文实例讲述了jQuery实现的图片轮播效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style type="text/css"> *{ padding: 0; margin: 0;} li{ list-

jquery实现轮播图效果

效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slider</title> <style type="text/css"> *{ margin: 0; padding: 0; } #slideshow{ position: relative; wi

jQuery实现圣诞节礼物传送(花式轮播)

大致介绍 下午看到了一个送圣诞礼物的小动画,正好要快到圣诞节了,就动手模仿并改进了一些小问题 原地址:花式轮播----圣诞礼物传送 思路:动画中一共有五个礼物,他们平均分布在屏幕中,设置最外边的两个礼物旋转一定的角度并隐藏,动画开始,每个礼物向右移动一定的位置,然后再把第五个礼物添加到第一个礼物之前,这样这五个礼物就重新排列了,在写jQ时只管礼物位置的变化就行了,因为礼物的旋转和隐藏在样式中都已经设置好了,某个礼物如果成为第一个礼物就会自动隐藏旋转 基本结构 代码: <div class="

jquery实现左右无缝轮播图

本文实例为大家分享了jquery无缝轮播图的实现代码,供大家参考,具体内容如下 <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{p

jQuery实现大图轮播

css样式: *{ margin: 0; padding: 0; } ul{ list-style:none; } .slideShow{ width: 620px; height: 700px; /*其实就是图片的高度*/ border: 1px #eeeeee solid; margin: 100px auto; position: relative; overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/ } .slideShow ul{ width: 2500px;

jQuery的图片轮播插件PgwSlideshow使用详解

0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键实现图片切换:下方为要轮播的所有图片的缩略图展示,可直接单击缩略图快速切换图片. PgwSlideshow主要有以下特点: •体验度很好的响应式设计 •支持桌面及移动设备 •身形矫健,压缩后的文件只有不到4KB •你可以自定义或者直接修改基本的css样式来给你想要的轮播插件美个容 PgwSlides

JavaScript实现大图轮播效果

本文实例为大家分享了js图片轮播效果的具体代码,供大家参考,具体内容如下 <head> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>大图轮播</title> <style type="text/css"> * { margin: 0px; padding

使用JQuery实现图片轮播效果的实例(推荐)

[效果如图] [原理简述] 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片 4,设置setInterval,定时执行切换函数 [代码说明] filter(":visible") :获取所有可见的元素 unbind():从匹配的元素中删除绑定的事件 siblings:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元

利用JS做网页特效_大图轮播(实例讲解)

废话不多说,直接上代码: <style> * { margin: 0px; padding: 0px; } .stage { width: 500px; height: 300px; border: 5px solid black; margin: 200px; position: relative; overflow: hidden; } .to-left, .to-right { position: absolute; top: 0px; width: 50px; height: 300p

jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

本文实例讲述了jQuery实现图片轮播效果代码.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

jQuery焦点图轮播特效代码分享(3款)

本文实例讲述了jQuery焦点图轮播特效代码.分享给大家供大家参考.具体如下: jQuery cxSlide实现的三款多功能大气焦点图轮播特效源码,是一段拥有三种不同风格和效果的焦点图轮播代码,其中有两款最有意思,一款是在将焦点图图片分成了四块,每个图片都连接到不同的地址,并且还拥有鼠标悬浮内图时,其它图片都变暗了的效果,另外一款是,带有带缩略图和文字描述效果的焦点图轮播代码. 运行效果图: ----------------------查看效果 源码下载---------------------

jQuery实现图片轮播特效代码分享

本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: jquery图片轮播插件PgwSlider是一款非常简单的jquery插件,它可以帮你快速创建一个垂直轮播图. 运行效果图: 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link href="css/pgwslider.min.css" rel="stylesheet"> (2)js代码: <script sr

jQuery焦点图轮播插件KinSlideshow用法分析

本文实例讲述了jQuery焦点图轮播插件KinSlideshow用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

jQuery超精致图片轮播幻灯片特效代码分享

本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现超精致图片轮播幻灯片特效代码,实现过程很简单. 运行效果图:                               -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link href="styles/97zzw.css"