jQuery实现一个简单的轮播图

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>轮播图练习</title>
<link rel="stylesheet" href="css/css.css" rel="external nofollow" type="text/css"/>
</head>
<body>
<ul class="back">      <!-- 背景图片 -->
　　<li class="l1"></li>
　　<li class="l2"></li>
　　<li class="l3"></li>
　　<li class="l4"></li>
　　<li class="l5"></li>
</ul>
<ul class="point">     <!-- 控制按钮 -->
　　<li class="active"></li>
　　<li></li>
　　<li></li>
　　<li></li>
　　<li></li>
</ul>
<div class="btn">     <!-- 左右控制按钮 -->
　　<span class="prev"></span>
　　<span class="next"></span>
</div>
</body>
<script src="js/jquery-1.7.2.js"></script>
<script src="js/jq.js"></script>
</html>

css代码：

*{margin:0; padding: 0;}
ul li{list-style: none;}
.back{height: 400px; overflow: hidden; margin-top:100px;}
.back li{width: 100%; height: 400px; margin:0 auto;}
.back li.l1{background: red;}
.back li.l2{background: yellow;}
.back li.l3{background: blue;}
.back li.l4{background: black;}
.back li.l5{background: green;}
.point{text-align: center; margin-top: -30px;}
.point li{ width: 20px; height: 20px; border:2px solid #fff; border-radius: 10px; box-sizing:border-box; display: inline-block;}
.point li.active{background: #fff;}
.btn{ position: relative;}
.btn span{ display: inline-block; vertical-align: top; width: 100px; height: 100px; background: rgba(0,0,0,.5); position: absolute; top:-235px; cursor: pointer;}
.btn .prev{left: 0}
.btn .next{ right: 0;}

js代码：

$(function(){
　　function banner(a,b,c,d,e){         // a是背景图，b是active，c是背景对应按钮，d是上一页，e是下一页
　　　　index=0;
　　　　len=$(a).length-1;
　　　　function teb(index){
　　　　　　$(c).eq(index).addClass(b).siblings('').removeClass(b);
　　　　　　$(a).eq(index).fadeIn(300).addClass('curr').siblings('').fadeOut(300).removeClass('curr');
　　　　};
　　　　$(c).click(function(){
　　　　　　index=$(this).index();
　　　　　　teb(index);
　　　　});
　　　　$(d).click(function(){
　　　　　　index--;
　　　　　　if(index<0){
　　　　　　　　index=len;
　　　　　　};
　　　　　　teb(index);
　　　　});
　　　　$(e).click(function(){
　　　　　　index++;
　　　　　　if(index>len){
　　　　　　　　index=0;
　　　　　　};
　　　　　　teb(index);
　　　　});
　　　　function timeRun(){
　　　　　　time=setInterval(function(){
　　　　　　　　index++;
　　　　　　　　if(index>len){
　　　　　　　　　　index=0;
　　　　　　　　};
　　　　　　　　teb(index);
　　　　　　},3000);
　　　　};
　　　　timeRun();
　　};
　　banner('.back>li','active','.point>li','.prev','.next');
});

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 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无缝轮播图代码

    本文实例为大家分享了jQuery无缝轮播图的具体代码,供大家参考,具体内容如下 html 代码 <div class="banner"> <ul class="img"> <li><a href="#"><img src="image/1.jpg"></a></li> <li><a href="#">

  • jquery实现轮播图效果

    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写的左右轮播图特效

    最近不是很忙,练习写了一个轮播图效果,虽然效果跟功能上貌似是没问题,但是我认为在许多东西上面都有待改进,在前端这个职位上我还有很远的路要走,当然要学的东西还有很多,这里仅仅对自己最近研究js的一个记录,我相信以后能写出更好的 将jquery框架的链接跟图片替换就可以看到效果了 源代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

  • 原生js和jquery实现图片轮播淡入淡出效果

    原生js和jquery实现图片轮播淡入淡出效果

    图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的 简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后

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

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

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

  • 原生js和jquery实现图片轮播特效

    原生js和jquery实现图片轮播特效

    (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

  • jQuery图片轮播的具体实现

    jQuery图片轮播的具体实现

    效果如下: 先看一看html代码,以及对应的css代码: 复制代码 代码如下: <div id="scrollPics">    <ul class="slider" >        <li><img src="images/ads/1.gif"/></li>        <li><img src="images/ads/2.gif"/>&

  • jQuery焦点图轮播效果实现方法

    本文实例讲述了jQuery焦点图轮播效果实现方法.分享给大家供大家参考,具体如下: 前面一篇<JS实现焦点图轮播效果的方法详解>详细介绍了JS实现焦点图轮播效果的步骤,这里来分析一下jQuery的相关实现技巧. 核心代码如下: $(function(){ var $next=$(".right"); var $prev=$(".left"); var $list_num=$(".list-num a"); var $banner=$(

  • 基于JQuery的实现图片轮播效果(焦点图)

    基于JQuery的实现图片轮播效果(焦点图)

    完整的演示代码: JQuery实现图片轮播效果 [实例演示] 1 2 3 4 // = count) return; $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); $("#banner_info").unbind().click(function(){window.open($("#banner_list a&qu

随机推荐