|
|
| Line 801: |
Line 801: |
| | } | | } |
| | </style> | | </style> |
| - | /* -----------------------------------------------------------------Image Slider Start-- */
| |
| - | <style>
| |
| - |
| |
| - | #slider {
| |
| - | position: relative;
| |
| - | overflow: hidden;
| |
| - | margin: 20px auto 0 auto;
| |
| - | border-radius: 4px;
| |
| - | }
| |
| - |
| |
| - | #slider ul {
| |
| - | position: relative;
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | height: 200px;
| |
| - | list-style: none;
| |
| - | }
| |
| - |
| |
| - | #slider ul li {
| |
| - | position: relative;
| |
| - | display: block;
| |
| - | float: left;
| |
| - | margin: auto;
| |
| - | padding: 0;
| |
| - | width: 600px;
| |
| - | height: 300px;
| |
| - | background: rgba(0,0,0,0);
| |
| - | text-align: center;
| |
| - | line-height: 300px;
| |
| - | }
| |
| - |
| |
| - | #slider ul li img {
| |
| - | position: relative;
| |
| - | display: block;
| |
| - | float: center;
| |
| - | margin: auto;
| |
| - | padding: 0;
| |
| - | max-width: 600px;
| |
| - | max-height: 300px;
| |
| - | text-align: center;
| |
| - | line-height: 300px;
| |
| - | }
| |
| - |
| |
| - | a.control_prev, a.control_next {
| |
| - | position: absolute;
| |
| - | top: 40%;
| |
| - | z-index: 999;
| |
| - | display: block;
| |
| - | padding: 2% 1%;
| |
| - | width: auto;
| |
| - | height: auto;
| |
| - | background: #2a2a2a;
| |
| - | color: #fff;
| |
| - | text-decoration: none;
| |
| - | font-weight: 600;
| |
| - | font-size: 18px;
| |
| - | opacity: 0.8;
| |
| - | cursor: pointer;
| |
| - | }
| |
| - |
| |
| - | a.control_prev:hover, a.control_next:hover {
| |
| - | opacity: 1;
| |
| - | -webkit-transition: all 0.2s ease;
| |
| - | }
| |
| - |
| |
| - | a.control_prev {
| |
| - | border-radius: 0 2px 2px 0;
| |
| - | }
| |
| - |
| |
| - | a.control_next {
| |
| - | right: 0;
| |
| - | border-radius: 2px 0 0 2px;
| |
| - | }
| |
| - |
| |
| - | </style>
| |
| - | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
| |
| - | <script type='text/javascript'>
| |
| - |
| |
| - | jQuery(document).ready(function ($) {
| |
| - |
| |
| - | $('#checkbox').change(function(){
| |
| - | setInterval(function () {
| |
| - | moveRight();
| |
| - | }, 3000);
| |
| - | });
| |
| - |
| |
| - | var slideCount = $('#slider ul li').length;
| |
| - | var slideWidth = $('#slider ul li').width();
| |
| - | var slideHeight = $('#slider ul li').height();
| |
| - | var sliderUlWidth = slideCount * slideWidth;
| |
| - |
| |
| - | $('#slider').css({ width: slideWidth, height: slideHeight });
| |
| - |
| |
| - | $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
| |
| - |
| |
| - | $('#slider ul li:last-child').prependTo('#slider ul');
| |
| - |
| |
| - | function moveLeft() {
| |
| - | $('#slider ul').animate({
| |
| - | left: + slideWidth
| |
| - | }, 200, function () {
| |
| - | $('#slider ul li:last-child').prependTo('#slider ul');
| |
| - | $('#slider ul').css('left', '');
| |
| - | });
| |
| - | };
| |
| - |
| |
| - | function moveRight() {
| |
| - | $('#slider ul').animate({
| |
| - | left: - slideWidth
| |
| - | }, 200, function () {
| |
| - | $('#slider ul li:first-child').appendTo('#slider ul');
| |
| - | $('#slider ul').css('left', '');
| |
| - | });
| |
| - | };
| |
| - |
| |
| - | $('a.control_prev').click(function () {
| |
| - | moveLeft();
| |
| - | });
| |
| - |
| |
| - | $('a.control_next').click(function () {
| |
| - | moveRight();
| |
| - | });
| |
| - |
| |
| - | });
| |
| - | </script>
| |
| - | /*-----------------------------------------------------------------Image Silder End--*/
| |
| - |
| |
| - |
| |
| - |
| |
| | | | |
| | </head> | | </head> |
"
