这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 javascript 实现列表切换效果的相关资料, 需要的朋友可以参考下
IE 兼容性没处理,确切的说不太会,还望指点一二
思路:
1、js 获取要给定点击事件的按钮组对象,如 btns=document.xxx(), 遍历过程绑定事件之前先取得当前对象的下标 eg:btns[i].index=i;
2、匹配 index 为将要显示的 DOM 对象
3、点击过程中要切换 class,先判断是否含有指定 class,有就删除,没有就添加指定 class。注: if(!null) 为真.
4、onmouseover 同理
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <link rel="stylesheet" href="CSS/index.css">
- <script src="js/index-banner.js">
- </script>
- </head>
- <body>
- <h3>
- javascript切换效果
- </h3>
- <section>
- <div class="baner_parent">
- <div class="will_left btn_left">
- <ul>
- <li data-i="0" class="selected js_btn">
- <img src="img/Ferrari.png">
- <span>
- 法拉利
- </span>
- </li>
- <li data-i="1" class="js_btn">
- <img src="img/Mercedes1.png">
- <span>
- 奔驰
- </span>
- </li>
- <li data-i="2" class="js_btn">
- <img src="img/BMW.png">
- <span>
- 宝马
- </span>
- </li>
- <li data-i="3" class="js_btn">
- <img src="img/Audi.png">
- <span>
- 奥迪
- </span>
- </li>
- </ul>
- </div>
- <div class="will_left banner_right">
- <!--法拉利-->
- <div class="banner_lists">
- <img src="img/ferrari01.jpg" alt="">
- <ul>
- <li class="will_left btn selected">
- 法拉利1
- </li>
- <li class="will_left btn">
- 法拉利2
- </li>
- <li class="will_left btn">
- 法拉利3
- </li>
- <li class="will_left btn">
- 法拉利4
- </li>
- </ul>
- </div>
- <!--奔驰-->
- <div class="banner_lists">
- <img src="img/benchi01.jpg" alt="">
- <ul>
- <li class="will_left btn selected">
- 奔驰1
- </li>
- <li class="will_left btn">
- 奔驰2
- </li>
- <li class="will_left btn">
- 奔驰3
- </li>
- <li class="will_left btn">
- 奔驰4
- </li>
- </ul>
- </div>
- <!--宝马-->
- <div class="banner_lists">
- <img src="img/baoma01.jpg" alt="">
- <ul>
- <li class="will_left btn selected">
- 宝马1
- </li>
- <li class="will_left btn">
- 宝马2
- </li>
- <li class="will_left btn">
- 宝马3
- </li>
- <li class="will_left btn">
- 宝马4
- </li>
- </ul>
- </div>
- <!--奥迪-->
- <div class="banner_lists">
- <img src="img/aodi01.jpg" alt="">
- <ul>
- <li class="will_left btn selected">
- 奥迪1
- </li>
- <li class="will_left btn">
- 奥迪2
- </li>
- <li class="will_left btn">
- 奥迪3
- </li>
- <li class="will_left btn">
- 奥迪4
- </li>
- </ul>
- </div>
- </div>
- </div>
- </section>
- </body>
- </html>
CSS
- *{
- list-style: none;
- border:none;
- text-decoration: none;
- margin:0;
- padding:0;
- box-sizing: border-box;
- }
- h3{
- text-align: center;
- color: dimgrey;
- }
- .baner_parent{
- width: 1000px;
- margin:0 auto;
- }
- .will_left{
- float: left;
- }
- .will_right{
- float: right;
- }
- .btn_left ul li{
- text-align: center;
- width: 160px;
- height:98px;
- background-color: darkgrey;
- padding: 13px 0;
- cursor: pointer;
- -webkit-transition:all .5s ease-out;
- -moz-transition:all .5s ease-out;
- -o-transition:all .5s ease-out;
- -ms-transition:all .5s ease-out;
- transition:all .5s ease-out;
- }
- .btn_left ul li.selected{
- background-color: cornflowerblue;
- }
- .btn_left ul li:not(:nth-child(4)){
- border-bottom: 1px solid dimgrey;
- }
- .btn_left ul li img{
- width: 50px;
- height: 50px;
- }
- .btn_left ul li span{
- display:block;
- }
- .banner_right,.banner_lists img{
- width: 800px;
- height: 391px;
- position: relative;
- }
- .banner_lists{
- position: absolute;
- height: 391px;
- }
- .banner_lists:not(:nth-child(1)){
- display: none;
- }
- .banner_lists ul{
- overflow: hidden;
- position: absolute;
- bottom: 0;
- left: 0;
- }
- .btn{
- height: 33px;
- width: 200px;
- border-right: 1px solid #000;
- margin-top: -3px;
- text-align: center;
- line-height: 33px;
- background-color: darkgrey;
- opacity: .8;
- cursor: pointer;
- -webkit-transition:all .5s ease-out;
- -moz-transition:all .5s ease-out;
- -o-transition:all .5s ease-out;
- -ms-transition:all .5s ease-out;
- transition:all .5s ease-out;
- }
- .btn:hover,.btn.selected{
- background-color: cornflowerblue;
- }
JS
- /**
- * Created by Administrator on 2016/4/30 0030.
- * blog:wjf444128852.github.io
- * 不支持IE
- */
- window.onload=function(){
- var arrFR = ['img/ferrari01.jpg','img/ferrari02.jpg','img/ferrari03.jpg','img/ferrari04.jpg'];
- var arrBC = ['img/benchi01.jpg','img/benchi02.jpg','img/benchi03.jpg','img/benchi04.jpg'];
- var arrBM = ['img/baoma01.jpg','img/baoma02.jpg','img/baoma03.jpg','img/baoma04.jpg'];
- var arrAD = ['img/aodi01.jpg','img/aodi02.jpg','img/aodi03.jpg','img/aodi04.jpg'];
- var array = [arrFR,arrBC,arrBM,arrAD];
- var btns=document.getElementsByClassName('js_btn');
- var divList=document.getElementsByClassName('banner_lists');
- // 品牌切换
- for(var i=0;i<btns.length;i++){
- btns[i].index=i;
- btns[i].onclick=showItems;
- }
- //ClassName切换,是否含有指定class
- function hasClass(elem,cls){
- return elem.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
- }
- // 没有就追加指定class
- function addClass(elem,cls){
- if(!hasClass(elem,cls)){
- elem.className+=" "+cls;
- }
- }
- // 有就移除指定class
- function removeClass(elem,cls){
- if(hasClass(elem,cls)){
- var reg=new RegExp('(\\s|^)'+cls+'(\\s|$)');
- elem.className=elem.className.replace(reg,"");
- }
- }
- //ClassName切换,移除所有
- function removeAll(obj){
- for (var i = 0; i < obj.length; i++) {
- removeClass(obj[i],"selected");
- }
- }
- // DIV显示切换
- function showItems(){
- removeAll(btns);
- addClass(this,"selected");
- for (var s = 0; s< divList.length; s++) {
- divList[s].style.display="none";
- divList[this.index].style.display="block";
- }
- willHover(this.index);
- }
- // 右边切换按钮效果
- function willHover(sum){
- var hoverbtns=divList[sum].getElementsByClassName('btn');
- var img=divList[sum].getElementsByTagName('img')[0];
- for (var i = 0; i < hoverbtns.length; i++) {
- hoverbtns[i].index=i;
- hoverbtns[i].onmouseover=function(){
- removeAll(hoverbtns);
- addClass(this,"selected");
- var imgSrc=array[sum][this.index];
- img.src=array[sum][this.index];
- }
- }
- }
- // 默认第一次可以切换
- willHover(0);
- };
来源: http://www.phperz.com/article/17/0408/266056.html