仿麦包包首页table轮换图jQuery

仿麦包包首页table轮换图jQuery
前几天,天外飞仙闲着无意打开麦包包，看到简洁的焦点图，觉得有意思，试试自己练手下。
刚开始，做的有些问题，里面有个样式，我是直接.bks的，不管如何都无法渲染该样式
在蓝色理想上发了帖子，很快有朋友帮忙改了
在该class前加个标签li.bks就可以实现
经过百度谷歌的帮助下，对css优先级有认识

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>仿麦包包首页图片切换效果jquery版本</title><meta name="keywords" content="jQuery切换,table切换,简洁轮换效果,自动切换" ><meta name="description" content="jQuery吧,Write Less, Do More,重注前端开发,web前端开发"><style type="text/css">body,div,ul,li,a,img,h1{margin:0;padding:0}img{border:none}ul,li{list-style-type:none}body{margin:20px auto;font:12px/1.5 tahoma,arial,\5b8b\4f53;color:#373737;background:#fff}.boxx{width:698px;height:338px;margin:0 auto;position:relative;border:1px #ccc solid}.boxx_con{width:100%;position:absolute;z-index:10}.boxx_title{width:250px;height:50px;position:absolute;top:313px;left:545px;z-index:100;}         .boxx_title li{width:15px;height:15px;float:left;margin-left:10px;display:inline;cursor:pointer;line-height:15px;text-align:center;background:#f7f6f2;color:#373737}li.bks{color:#fff;background:#ce2329;}<!--css优先级,慎用直接.bks--></style></head><body><h1><a href="http://jqueryba.com/" target="_blank" title="jQuery吧,前端开发,web前端,web前端开发,前端开发工程师,前端开发攻城师,设计,前端资源,html+CSS,JavaScript,Ajax,jQuery学习,html5,css3,浏览器兼容,网页布局制作">jQuery吧</a></h1><h2><a href="http://jqueryba.com/jquery/mbaobao/mbaobao.html" target="_blank">仿麦包包首页图片切换效果jquery版本</a></h2><div class="boxx"><ul class="boxx_con" id="boxx_con"><li><a href=""><img src="data:images/1.jpg"/></a></li><li style="display:none"><a href=""><img src="data:images/2.jpg"/></a></li><li style="display:none"><a href=""><img src="data:images/3.jpg"/></a></li><li style="display:none"><a href=""><img src="data:images/4.jpg"/></a></li><li style="display:none"><a href=""><img src="data:images/5.jpg"/></a></li></ul><ul class="boxx_title" id="boxx_title"><li class="bks">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){var p=0;var timeInterval=3000;var $bli=$("#boxx_con li");var $pli=$("#boxx_title li");$bli.hide();$($bli[0]).show();function play(){p<$bli.length-1?p++:p=0;$bli.eq(p).show().siblings().hide(); $pli.eq(p).addClass("bks").siblings().removeClass("bks");   }set = window.setInterval(play,timeInterval);$pli.mouseover(function(){window.clearInterval(set);p=$(this).index();$bli.eq(p).show().siblings().hide(); $pli.eq(p).addClass("bks").siblings().removeClass("bks"); set = window.setInterval(play,timeInterval);  });   })</script></body></html>

再次感谢帮助我的朋友 泥巴巴
在线效果DEMO

转载于:https://www.cnblogs.com/divcss/archive/2012/03/19/2406581.html

仿麦包包首页table轮换图jQuery相关推荐

仿麦包包首页table轮换图jQuery(转自www.jqueryba.com)
2019独角兽企业重金招聘Python工程师标准>>> 仿麦包包首页table轮换图jQuery 前几天,天外飞仙闲着无意打开麦包包,看到简洁的焦点图,觉得有意思,试试自己练手下. ...
仿麦包包首页tab轮换图jQuery
仿麦包包首页tab轮换图jQuery 前几天,天外飞仙闲着无意打开麦包包,看到简洁的焦点图,觉得有意思,试试自己练手下. 刚开始,做的有些问题,里面有个样式,我是直接.bks的,不管如何都无法渲染该样 ...
仿麦包包首页tab轮换图jQuery(转自www.jqueryba.com)
仿麦包包首页tab轮换图jQuery 前几天,天外飞仙闲着无意打开麦包包,看到简洁的焦点图,觉得有意思,试试自己练手下. 刚开始,做的有些问题,里面有个样式,我是直接.bks的,不管如何都无法渲染该样 ...
JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图
JQuery代码 <script type="text/javascript"> $(function() { var $banner = $('.banner'); ...
jQuery仿京东首页广告图片切换图片轮播
1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
jQuery仿麦包包商城图片滑动伸缩图片广告代码-20130701
1.效果及功能说明仿麦包包商城网站首页全屏图片上下滑动伸缩图片广告代码,设置固定时间图片滑动伸缩的图片广告代码 2.实现原理先获得显示div的宽度高度自由在将两个图片放到div里显示每次只显示一张 ...
高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下: http://www.demodashi.com/demo/12302.html 插件介绍这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公 ...
防仿百度图片背景色php,基于jQuery实现仿百度首页换肤背景图片切换代码_jquery...
不多说了,先给大家展示效果图,本文支持源码下载哦,需要的朋友可以直接下载使用,代码很简单哦- html代码: css代码: *{margin:0;padding:0} a{color:#fff; ma ...
游戏陪玩源码开发，仿某看书app首页Banner轮播+背景渐变
在游戏陪玩源码开发时,会设计到很多UI界面设计,其中首页Banner轮播就很重要,最近发现一个比较有意思的效果图,于是想自己操作实践下.效果图如下: 作者实现的效果: 1. 游戏陪玩源码开发,仿某看书 ...

仿麦包包首页table轮换图jQuery

仿麦包包首页table轮换图jQuery相关推荐

最新文章

热门文章