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/

  • 相关阅读:
    java enum
    how to build a runable jar
    ZF报错解决方法·
    Apache配置本地测试多网站域名与虚拟主机
    PHP实现MVC开发: 一个简单的MVC
    收藏PHP常用函数
    数据库密码忘记…………找回方法
    php读取excel文件reader.php excel操作类使用
    积累的常用linux命令
    JS控制浏览器大小
  • 原文地址:https://www.cnblogs.com/puzi0315/p/2658444.html
Copyright © 2011-2022 走看看