jquery手写轮播功能
Posted shandayuan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery手写轮播功能相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小例子</title> <script type="text/javascript" src="js/jquery.js"></script> <style> @charset "utf-8"; /* CSS Document */ #main margin-top: 20px; * margin: 0; padding: 0; word-wrap: break-word; a text-decoration: none; a:link text-decoration: none; a:visited text-decoration: none; a:hover text-decoration: none; a:active text-decoration: none; a.underline:hover text-decoration: underline; a img border: none; body margin: 0px; padding: 0px; position: relative; body, td, div, a, li, form color: #391f0e; line-height: 20px; font-family: Arial, "Microsoft yahei" div, form, p, img, ul, ol, li, dl, dt, dd, button, input margin: 0px; padding: 0px; font-size: 12px; li list-style: none; /*tablefont-size: 13px;*/ .clear clear: both !important; width: 0px !important; height: 0px !important; line-height: 0px !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; float: none !important; position: static !important; background: none !important; /* For IE 6/7 (trigger hasLayout) */ .fl float: left; .fr float: right; .block display: block !important; .box width: 100%; margin: 0 auto; height: auto; .w width: 1000px; margin: 0 auto; /*通用样式结束*/ .a_a height: 500px; overflow: hidden; position: relative; .a_b height: 500px; width: 5000px; transition: width 1s, height 1s, transform 1s; -moz-transition: width 1s, height 1s, -moz-transform 1s; -webkit-transition: width 1s, height 1s, -webkit-transform 1s; -o-transition: width 1s, height 1s, -o-transform 1s; .a_c width: 1000px; height: 500px; .left background: url(../img/064.png) no-repeat; height: 60px; width: 60px; background-size: 100% 100%; position: absolute; top: 250px; left: 370px; .left:hover cursor: pointer; .right:hover cursor: pointer; .right background: url(../img/063.png) no-repeat; height: 60px; width: 60px; background-size: 100% 100%; position: absolute; top: 250px; left: 1500px; </style> </head> <body> <div class="box"> <div class="w a_a"> <div class="a_b"> <div class="a_c fl" style="background-color: gray;"></div> <div class="a_c fl" style="background-color: darkmagenta"></div> <div class="a_c fl" style="background-color: blue;"></div> <div class="a_c fl" style="background-color: green;"></div> <div class="a_c fl" style="background-color: paleturquoise;"></div> <div class="clear"></div> </div> </div> <div class="left"></div> <div class="right"></div> </div> <script> $(function() $(‘.left‘).click( function() var a = $(‘.a_b‘).attr(‘id‘).substr(1, 4); //substr 截取字符串 从索引1的位置开始截取 截取4个字符串 alert(a); if(a != 0) var e = a - 1000; $(‘.a_b‘).attr(‘id‘, -e); $(‘.a_b‘).css("transform", "translate(-" + e + "px)"); ) $(‘.right‘).click( function() var a = $(‘.a_b‘).attr(‘id‘); if(a != -4000) var e = a - 1000; $(‘.a_b‘).attr(‘id‘, e); $(‘.a_b‘).css("transform", "translate(" + e + "px)"); ) ) </script> </body> </html>
jquery 写tab切换：
$(function() $(‘.about-5-1>div‘).click( function() var i = $(this).index(); //定义变量i 为当前对象的索引。 $(this).parent().siblings(‘div‘).hide(); if(i == 0) $(this).parent().siblings(‘.about-5-2‘).show(); $(this).addClass("current").siblings().removeClass("current"); if(i == 1) $(this).parent().siblings(‘.about-5-3‘).show(); $(this).addClass("current").siblings().removeClass("current"); if(i == 2) $(this).parent().siblings(‘.about-5-4‘).show(); $(this).addClass("current").siblings().removeClass("current"); if(i == 3) $(this).parent().siblings(‘.about-5-5‘).show(); $(this).addClass("current").siblings().removeClass("current"); ) )
以上是关于jquery手写轮播功能的主要内容，如果未能解决你的问题，请参考以下文章