Jquery实现图片轮播

来源：互联网发布：瑜伽约课软件编辑：程序博客网时间：2024/06/07 03:22

这篇文章借鉴与脚本之家。这篇文章是最接近源码的，特意转载过来以作参考。

首先是初始化部分：

将除了第一张轮播图片意外的图片都隐藏，并且隐藏向前、向后按钮，使第一个索引按钮处于激活状态。

事件部分：

通过jquery的hover()绑定鼠标上悬以及离开时的事件处理， jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、轮播控制：pre(), next(), play(), start()开始自动轮播，stop()停止自动轮播。

下面是整体的代码：

<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery轮播效果图 </title> <script type="text/javascript" src="scripts/jquery-1.9.1.js"></script> <style type="text/css">  * {  padding: 0px;  margin: 0px;  }  a {  text-decoration: none;  }  ul {  list-style: outside none none;  }  .slider, .slider-panel img, .slider-extra {  width: 650px;  height: 413px;  }  .slider {  text-align: center;  margin: 30px auto;  position: relative;  }  .slider-panel, .slider-nav, .slider-pre, .slider-next {  position: absolute;  z-index: 8;  }  .slider-panel {  position: absolute;  }  .slider-panel img {  border: none;  }  .slider-extra {  position: relative;  }  .slider-nav {  margin-left: -51px;  position: absolute;  left: 50%;  bottom: 4px;  }  .slider-nav li {  background: #3e3e3e;  border-radius: 50%;  color: #fff;  cursor: pointer;  margin: 0 2px;  overflow: hidden;  text-align: center;  display: inline-block;  height: 18px;  line-height: 18px;  width: 18px;  }  .slider-nav .slider-item-selected {  background: blue;  }  .slider-page a{  background: rgba(0, 0, 0, 0.2);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);  color: #fff;  text-align: center;  display: block;  font-family: "simsun";  font-size: 22px;  width: 28px;  height: 62px;  line-height: 62px;  margin-top: -31px;  position: absolute;  top: 50%;  }  .slider-page a:HOVER {  background: rgba(0, 0, 0, 0.4);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);  }  .slider-next {  left: 100%;  margin-left: -28px;  } </style> <script type="text/javascript">  $(document).ready(function() {  var length,   currentIndex = 0,   interval,   hasStarted = false, //是否已经开始轮播   t = 3000; //轮播时间间隔  length = $('.slider-panel').length;  //将除了第一张图片隐藏  $('.slider-panel:not(:first)').hide();  //将第一个slider-item设为激活状态  $('.slider-item:first').addClass('slider-item-selected');  //隐藏向前、向后翻按钮  $('.slider-page').hide();  //鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动  $('.slider-panel, .slider-pre, .slider-next').hover(function() {   stop();   $('.slider-page').show();  }, function() {   $('.slider-page').hide();   start();  });  $('.slider-item').hover(function(e) {   stop();   var preIndex = $(".slider-item").filter(".slider-item-selected").index();   currentIndex = $(this).index();   play(preIndex, currentIndex);  }, function() {   start();  });  $('.slider-pre').unbind('click');  $('.slider-pre').bind('click', function() {   pre();  });  $('.slider-next').unbind('click');  $('.slider-next').bind('click', function() {   next();  });  /**   * 向前翻页   */ function pre() {   var preIndex = currentIndex;   currentIndex = (--currentIndex + length) % length;   play(preIndex, currentIndex);  }  /**   * 向后翻页   */ function next() {   var preIndex = currentIndex;   currentIndex = ++currentIndex % length;   play(preIndex, currentIndex);  }  /**   * 从preIndex页翻到currentIndex页   * preIndex 整数，翻页的起始页   * currentIndex 整数，翻到的那页   */ function play(preIndex, currentIndex) {   $('.slider-panel').eq(preIndex).fadeOut(500)   .parent().children().eq(currentIndex).fadeIn(1000);   $('.slider-item').removeClass('slider-item-selected');   $('.slider-item').eq(currentIndex).addClass('slider-item-selected');  }  /**   * 开始轮播   */ function start() {   if(!hasStarted) {   hasStarted = true;   interval = setInterval(next, t);   }  }  /**   * 停止轮播   */ function stop() {   clearInterval(interval);   hasStarted = false;  }  //开始轮播  start();  }); </script> </head> <body>  <div class="slider">  <ul class="slider-main">   <li class="slider-panel">   <a href="http://www.jb51.net" target="_blank"><img alt="关注脚本之家" title="关注脚本之家" src="images/1.jpg"></a>   </li>   <li class="slider-panel">   <a href="http://www.jb51.net" target="_blank"><img alt="关注脚本之家" title="关注脚本之家" src="images/2.jpg"></a>   </li>   <li class="slider-panel">   <a href="http://www.jb51.net" target="_blank"><img alt="关注脚本之家" title="关注脚本之家" src="images/3.jpg"></a>   </li>   <li class="slider-panel">   <a href="http://www.jb51.net" target="_blank"><img alt="关注脚本之家" title="关注脚本之家" src="images/4.jpg"></a>   </li>  </ul>  <div class="slider-extra">   <ul class="slider-nav">   <li class="slider-item">1</li>   <li class="slider-item">2</li>   <li class="slider-item">3</li>   <li class="slider-item">4</li>   </ul>   <div class="slider-page">   <a class="slider-pre" href="javascript:;;"><</a>   <a class="slider-next" href="javascript:;;">></a>   </div>  </div>  </div> </body> </html>

图片的大小和显示的位置、页码小图标的位置和样式，这些都需要根据实际需要进行调整。

阅读全文

0 0