zoukankan      html  css  js  c++  java
  • jquery+js 图片切换和自动切换

    <div id="bannerdv">
    <div id="bannerpic">
    <a href="#"><img src="images/banner_1.jpg" style="text-align:center" /></a>
    <a href="#"><img src="images/banner_2.jpg" style="text-align:center" /></a>
    <a href="#"><img src="images/banner_3.jpg" style="text-align:center" /></a>
    <a href="#"><img src="images/banner_4.jpg" style="text-align:center" /></a>
    </div>
    <div id="bannerwenzi">
    <div class="bwenzishow">
    河池手机网隆重开业</div>
    <div>
    您身边的省钱专家</div>
    <div>0
    元购机大优惠</div>
    <div style="248px;">
    您信赖的商城</div>
    </div>
    </div>
    <script type="text/javascript">
    $(function(){
    $("#bannerwenzi").each(function(){
    $("#bannerdv a:eq(0)").show();
    $("#bannerwenzi div").click(function(){ //
    点击按钮让图片切换
    $(this).addClass("bwenzishow").siblings("div").removeClass("bwenzishow");
    $("#bannerpic a:eq("+$(this).index()+")").show().siblings("a").hide();
    });

    });
    xx=0; 
    function setTab() {   //
    自动切换函数
    $("#bannerwenzi div:eq("+xx+")").addClass("bwenzishow").siblings("div").removeClass("bwenzishow");
    $("#bannerpic a:eq("+xx+")").show().siblings("a").hide();

    xx+=1;
    if(xx>3) xx=0;

    }
    timerID=setInterval(setTab,2000); //
    每个2秒钟执行一次setTab方法,注意写法
    $("#bannerpic").mousemove(function(){ //
    鼠标移上去,将自动执行的方法取消掉
    clearInterval(timerID);

    }).mouseout(function(){
    timerID=setInterval(setTab,2000);
    }); 
    });
    </script>

    作者:沐雪
    文章均系作者原创或翻译,如有错误不妥之处,欢迎各位批评指正。本文版权归作者和博客园共有,如需转载恳请注明。
    如果您觉得阅读这篇博客让你有所收获,请点击右下方【推荐】
    找一找教程网-随时随地学软件编程 http://www.zyiz.net/

  • 相关阅读:
    centos升级glibc(升级到 2.17版)
    访问zabbix首页无法正常登陆
    解决zbx的web界面zabbix服务器端运行中 显示为不(启动命令)
    4. 日期
    3. 页面滚动条位置恢复
    2. 添加版本号
    1. webpack 复制文件
    4. git log的常见用法
    3. git获取历史版本
    2. Git-命令行-删除本地和远程分支
  • 原文地址:https://www.cnblogs.com/puzi0315/p/2658444.html
Copyright © 2011-2022 走看看