轮播图和小轮播图

来源：互联网发布：flash cs6软件编辑：程序博客网时间：2024/06/08 00:58

IE9一下动画是没有的，毕竟是css3

<!DOCTYPE HTML><html><head><meta charset="utf-8"/><meta name="viewport" content="width=460,user-scalable=no" /><title>轮播图</title><style type="text/css">*{margin: 0;padding: 0;}html,body{width: 100%;height: 100%;font-family: "微软雅黑";}/*轮播图*/#carimg{width: 420px;margin: 0 auto;height: 380px;overflow: hidden;position: relative;padding: 0 20px;}ul{height: 100px;position: absolute;z-index: 2;left: 20px;top: 242px;transition: all 0.4s linear;}li{list-style: none;float: left;width: 140px;height: 100%;margin-left: 5px;opacity: 0.5;filter:Alpha(opacity=50);overflow: hidden;}li.active{opacity: 1;filter:Alpha(opacity=100);}li img{width: auto;height: 100%;}#carimg span{position: absolute;z-index: 3;background-color: black;display: inline-block;width: 20px;height: 100px;}#prev{left: 0;}#next{right: 0;}/*图片*/#imgwrap {width: 420px;height: 230px;overflow: hidden;border: 5px solid transparent;margin-bottom: 10px;border:1px solid transparent;}#imgwrap img{width: 100%;}span i{ float: left;margin-top: 45px;margin-left: 3px; width: 0; height: 0;content: ''; border-top: 10px solid transparent; border-bottom: 10px solid transparent;}span .left {border-right: 10px solid #fff;}span .right {border-left: 10px solid #fff;}</style></head><body><div id="carimg"><div id="imgwrap"><img src="http://img1.gtimg.com/autodongguan/pics/hv1/52/209/202/13188397.jpg" /></div><ul><li class="active"><img src="http://img1.gtimg.com/autodongguan/pics/hv1/52/209/202/13188397.jpg" /></li><li><img src="http://123.207.87.32/act/nissan/img/img0910/imgpc/jk2.jpg" /></li><li><img src="http://img1.gtimg.com/autoguangzhou/pics/hv1/32/217/203/13255442.png" /></li><li><img src="http://img1.gtimg.com/autodongguan/pics/hv1/73/136/199/12974728.jpg" /></li><li><img src="http://123.207.87.32/act/nissan/img/img0910/imgpc/jk1.jpg" /></li><li><img src="http://img1.gtimg.com/autoguangzhou/pics/hv1/114/133/204/13299129.jpg" /></li><li><img src="http://img1.gtimg.com/autoguangzhou/pics/hv1/115/133/204/13299130.jpg" /></li></ul><span id="prev"><i class="left"></i></span><span id="next"><i class="right"></i></span></div></body><script src="http://mat1.gtimg.com/tech/css/huiyan/jquery.min.js"></script><script type="text/javascript">$(function() {function Img(imgwrap,carimg1,carimg,next,prev){var n = 0;var nclick;var w = $('li').width() + 5;var l = $('li').length;carimg.width(l * w);//图片切换function img(){carimg1.eq(n).addClass('active').siblings().removeClass('active');var s = carimg.find('li.active img').attr('src');imgwrap.attr('src',s);}//点击获取carimg1.click(function() {//alert(1)n=$(this).index();img();if(n<=5 && n>1){var len = (n-1) * w;carimg.css('left', -len + 20);}else if(n==1){carimg.css('left', 20);}})//右按钮next.click(function() {if ( n < (l - 2) && n>0) {n++;var len = (n-1) * w;carimg.css('left', -len + 20);img();}else if(n==0 ){n++;img();}})//左按钮prev.click(function() {if (n > 1) {n--;var olen = parseInt($('ul').css('left') + 20);carimg.css('left', olen + w);img();}})}var imgwrap=$('#imgwrap img');var carimg1=$('#carimg ul li');var carimg=$('#carimg ul');var next=$('#next');var prev=$('#prev');Img(imgwrap,carimg1,carimg,next,prev);})</script></html>

效果图

阅读全文

0 0