JQuery写的一个常见的banner

大致的布局如下:

<div class="banner" >
                <div class="pic">
                    <ul>
                        <li><img src="img/banner4.jpg" /></li>
                        <li><img src="img/banner1.png" /></li>
                        <li><img src="img/banner2.png" /></li>
                        <li><img src="img/banner3.jpg" /></li>
                        <li><img src="img/banner4.jpg" /></li>
                        <li><img src="img/banner1.png" /></li>
                    </ul>
                </div>
       <!--点播列表-->
                <div class="tab">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
        <!--banner 两边的按钮-->
                <div class="btn">
                    <div id="left"> < </div>
                    <div id="right"> > </div>
                </div>
            </div>

css样式如下:

.banner{width:100%;height:400px;position:relative;}
.banner .pic{width: 100%;height: 100%;overflow: hidden;}
.banner .pic ul{width: 1000%;height: 100%;margin-left: -100%;}
.banner .pic ul li{width: 10%;height: 100%;float: left;}
.banner .pic ul li img{width: 100%;height: 100%;}
.banner .tab{width: 136px;height: 3px;position: absolute;bottom: 20px;left: 50%;margin-left: -68px;}
.banner .tab ul li{width: 30px;height: 3px;float: left;margin: 0 2px;background: #5D5C60;}
.banner .tab ul li.on{background: #0DA1A4;}
.banner .btn div{width: 30px;height: 40px;background: rgba(0, 0, 0, 0.5);font-size:20px;text-align: center;line-height: 40px;color: #fff;position: absolute;top: 50%;margin-top: -20px;display: none;}
#left{left: 15px;}
#right{right: 15px;}

JS代码:

~function(){
   var banner = $(‘.banner‘);
   var picUl = $(‘.banner .pic ul‘);
   var tabLi = $(‘.banner .tab ul li‘);
   var btnDiv = $(‘.banner .btn div‘);
   var width = banner.width();
   var index = 0;
   var timer = null;
   var nowTime = 0;
   //底部Li列表添加on样式
   tabLi.eq(0).addClass(‘on‘);
   setAuto();
   tabLi.click(function(){
        index = $(this).index();
        tabLi.eq(index).addClass(‘on‘).siblings().removeClass(‘on‘);
        picUl.stop().animate({
            marginLeft:-width*(index+1)+‘px‘
        },1000);
   });
   btnDiv.click(function(){
        if (new Date() - nowTime >500) {
            nowTime = new Date();
            var i = $(this).index();
            i?index++:index--;
            change();
        }
   });
   function setAuto(){
       timer = setInterval(function(){
           index++;
           change();
       },5000);
   };
   banner.hover(function(){
       btnDiv.show(1000);
       clearInterval(timer);
   },setAuto).mouseleave(function(){
       btnDiv.hide(1000);
   });
   
   function change(){
       index >= tabLi.length?tabLi.eq(0).addClass(‘on‘).siblings().removeClass(‘on‘):tabLi.eq(index).addClass(‘on‘).siblings().removeClass(‘on‘);
       picUl.stop().animate({
           marginLeft:-width*(index+1)+‘px‘
       },1000,function(){
           if (index==4) {
               index = 0;
               picUl.css("marginLeft",-width+‘px‘);
           } else  if(index == -1){
               index = tabLi.length - 1;
               picUl.css("marginLeft",-width*(index+1)+‘px‘);
           }
       });
   }
}();

作为一个新手,用两天时间调试的banner图,感觉还是可以的~_~~_~

原文地址:https://www.cnblogs.com/duxingdexin/p/8969178.html

时间: 2024-10-17 19:16:52

JQuery写的一个常见的banner的相关文章

用jQuery写了一个模态框插件

用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").confrimModal("<font color=\"green\">成功! </font>", {type:"info", themeColor: "#008B8B"}, true); "alert

利用jquery写的一个TAB页切换效果

函数如下 [javascript] view plaincopy /** *切换效果 */ function switab(tab,con,tab_c_css,tab_n_css,no) { $(tab).each(function(i){ if(i == no) { $(this).addClass(tab_c_css); }else { $(this).removeClass(tab_c_css); $(this).addClass(tab_n_css); } }) if (con) { $

用jQuery写的一个翻页,并封装为插件,

1 *{ 2 margin:0; 3 padding: 0; 4 list-style: none; 5 text-decoration: none; 6 } 7 .page{ 8 width:500px; 9 margin:100px auto; 10 color: #ccc; 11 } 12 .page a{ 13 display: inline-block; 14 color: #428bca; 15 height: 25px; 16 line-height: 25px; 17 paddi

用jQuery写了一个模态框插件感觉挺好看的在博客园分享一下!

大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").confrimModal("<font color=\"green\">成功! </font>", {type:"info", themeColor: "#008B8B"}, true); "alert"框 $("d

用jquery写自己的form表单验证

这几天看了锋利的jquery,感觉很不错.特别是jquery强大的选择器.今天就利用jquery写了一个自己的form表单验证的小案例.当巩固下jquery.首先贴下代码,当然只是一个小案例. 思路:   1.<input type="text" Validate="Date" id="date"/>这里的 Validate:是我们需要验证的类型(属于日期类型),这里你也可以自己定义.id属性就不用说了.<input type=

wg_pagenation 1.0 自己写的一个分页插件_基于Jquery

前言: 现在这个分页插件也不少,感觉缺点什么,所以自己就写了一个,喜欢的人就拿去用......有bug和建议可以回复,我有空就修改和答复..... 感谢我的基友,刘总...他主要给本插件写配套主题css; 特点: 整合ajax可以异步和后台交互数据,定制化选项多.和Jquery的pagenation比较类似,但是功能更多,选择性更多. 当前版本:1.0 完成日期:20150815 效果图: White.css的效果图: default.css效果图: 上图上向下的箭头表示的是每一个可选择和更改的

自己写了一个无缝滚动的插件(jQuery)

效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img src="img/f1.jpg" alt="f1"/></li> 4 <li><img src="img/f2.jpg" alt="f2"/></li> 5 <li&g

自己在项目中写的一个Jquery插件和Jquery tab 功能

后台查询结果 PDFSearchResult实体类: [DataContract(Name = "PDFSearchResult")] public class PDFSearchResult { public PDFSearchResult(string title, string fileUrl) { Title = title; FileUrl = fileUrl; } [DataMember(Name = "title")] public string Ti

jQuery手写几个常见的滑动下拉菜单 分分秒秒学习JS

一般的企业网站再我们再实际工作中,有些特效,用jQuery来做,显得极其简单,除非一些大的公司,需要封装自己的类. 今天,我们讲解jQuery入门知识,来写几个简单jQuery滑动下拉菜单.感受一下jQuery的简单快速的神奇之处. 学完本章,可以书写最常见的下拉菜单写法. 案例1 效果如图所示: 在书写这个滑动的下拉菜单的时候,我们首先来认识下jQuery里面的滑动方法 :slideToggle() slideToggle(执行时间,运动方式,返回函数) 执行时间: 常用的是 "slow&qu