漂亮的图片切换 -尊龙游戏旗舰厅官网
前几天看到一个朋友分享的仿京东的图片切换样式，觉得很好，不过仔细研究后发现代码比较繁琐，经过改良之后觉得用起来会比较方便，看着也简洁了许多。
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仿京东通过商品标题切换背景图片特效 - js代码网title> <link rel="stylesheet" href="style/style.css" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js">script> <script type="text/javascript" src="js/floor.js">script> head> <body> <center><br><div class="fr"><ul class="frimg"><li><img src="image/1.jpg" />li><li><img src="image/2.jpg" />li><li><img src="image/3.jpg" />li><li><img src="image/4.jpg" />li><li><img src="image/5.jpg" />li>ul><ul class="frtext"><li class="hover"><span class="fcs1"> 美丽伊人 <s>s>span>li><li><span class="fcs2">天使翅膀<s>s>span>li><li><span class="fcs3">完美心情<s>s>span>li><li><span class="fcs4">迷人芬芳<s>s>span>li><li><span class="fcs5">靓丽如花<s>s>span>li>ul>div>div>center> <div style="text-align:center;clear:both"><br>div> body> html>这里，只需要一个div,套两个ul就可以了，然后设置两个ul的position: absolute，外层的div为position: relative;这样两个ul就都定位在这个叫.fr的div上了。
/*@charset "utf-8";*/*{margin:0;padding: 0}body{font-famliy:"微软雅黑";} li{list-style: none;} .fr{width: 350px;height: 425px;margin-right: 10px;position: relative;overflow: hidden;} //这里设置的是外层div的高宽，同时这也是一长图片的高宽，超过的就隐藏 .frimg{width:1750px;height:425px;position: absolute;left: 0px;} //这里是第一个ul的样式，需要说明的是，width需要设置成图片的宽度*张数，如果设置小了，后面的图片就没法显示了 .frimg li{float:left;} //图片层只要设置一下左浮动就可以了 .frtext{width:350px;position: absolute ;left:0;top:275px;} //这是第二个ul的样式，主要就是要和图片的底部对齐，用top就可以了 .frtext li{height: 30px;position: relative;overflow: hidden; opacity: 0.4;}//上边设置了每个li是30px,此处设置了opacity是因为想要不影响底层图片的美观 .frtext li.hover{opacity:1;} //当然，如果选中的话就设置其为不透明的 .frtext li span{width: 350px;height: 30px;display: block;position: absolute;left:-30px; color:#ffffff;line-height:27px;font-size:16px; font-weight:800}//此处就是切换条的高宽和文字样式了 .frtext li span s{width: 5px;height: 9px;position: absolute;top:10px;right: 15px;cursor: pointer;overflow: hidden;background: -107px -20px;opacity: 0;} .frtext li.hover span s{opacity: 1;} //这是右侧那个小尖括号的样式，hover的时候显示，否则就不显示 .fcs1{background:#87b6a7;} .fcs2{background:#ffa042;} .fcs3{background:#c093cc;} .fcs4{background:#9ea7d6;} .fcs5{background:#93ae60;}接下来调用js
$(function(){$(".frtext li.hover").find("span").css({left:0});//这段脚本的意思是当鼠标悬浮在哪个切换条的时候，那个切换条就left:0 ,本来的样式是-30$(".frtext li").mouseover(function(){if($(this).hasclass("hover")){return};//此处是说当鼠标悬浮在进度条的那个类上的时候，首先查找这个类hover类，如果是就返回，如果不是执行以下代码var toleft=$(this).index()*350*(-1) "px"; //声明一个变量toleft，将当前li的指数乘以350再乘以-1，得出的数赋值给这个变量$(this).addclass("hover").find("span").stop().animate({left:0,opacity: 1},500);//此处的意思是找到当前li之后添加hover类，并且添加后面的动画，使切换条向右滚动$(this).siblings().removeclass("hover").find("span").stop().animate({left:"-30px",opacity: 0.5},600);//此时还需要把之前的hover类去掉，并且还原样式//图片显示$(this).parent().prev(".frimg").stop().animate({left:toleft},400); //最后需要找到这个li的父级的前一层中为.frimg的类，让它的图片向左移动toleft})})
效果图如下：
转载于:https://www.cnblogs.com/zmseo/p/4136865.html
总结
- 上一篇： php中如何给日期加上一个月 加一周 加
- 下一篇：