这篇文章主要介绍了 js 实现使用鼠标拖拽切换图片的方法, 涉及 javascript 操作图片实现轮播效果的相关技巧, 非常具有实用价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 js 实现使用鼠标拖拽切换图片的方法。分享给大家供大家参考。具体实现方法如下:
- <script type="text/javascript" src="js/jquery.min.js">
- </script>
- <style type="text/CSS">
- *{margin:0;padding:0;} .m-slider{width:600px;margin:0 auto 10px !important;}
- #slider{width:100%; overflow:hidden;} .m-slider .cnt{position:relative;left:0;width:2000%;}
- .m-slider .cnt li{float:left;width:5%; height: 450px; overflow: hidden;
- } .m-slider .cnt img{ display:block;width:100%;height:450px; vertical-align:top;
- } .m-slider .cnt p{margin:10px 0;} .m-slider .icons{text-align:center;color:#000;
- position: relative; z-index: 999; margin-top: -20px; } .m-slider .icons
- span{ background: #fff; border-radius: 5px; box-shadow: 0 0 2px #b0b0b0
- inset; display: inline-block; height: 10px; margin: 0 5px; overflow: hidden;
- text-indent: -99em; width: 10px; } .m-slider .icons .curr{ background:#f80;
- box-shadow: 0 0 2px #f60 inset }
- </style>
- <div class="m-slider">
- <div id="slider">
- <ul id="m-slider" class="cnt">
- <li>
- <a href="#1">
- <img src="images/mofe.jpg" alt="" />
- </a>
- </li>
- <li>
- <a href="#2">
- <img src="images/9hll.jpg" alt="" />
- </a>
- </li>
- <li>
- <a href="#3">
- <img src="images/p2bb.jpg" alt="" />
- </a>
- </li>
- <li>
- <a href="#4">
- <img src="images/3srp.jpg" alt="" />
- </a>
- </li>
- <li>
- <a href="#1">
- <img src="images/ft9s.jpg" alt="" />
- </a>
- </li>
- </ul>
- </div>
- <div id="icons" class="icons">
- <span class="curr">
- 1
- </span>
- <span>
- 2
- </span>
- <span>
- 3
- </span>
- <span>
- 4
- </span>
- <span>
- 5
- </span>
- </div>
- </div>
- <script type="text/javascript">
- jQuery(document).ready(function($) {
- var $slider = $('#m-slider');
- var $icons = $('#icons');
- var $li = $slider.children('li');
- var WIDTH = $li.width();
- var SIZE = $li.size();
- $slider.append($li.first().clone());
- //console.log(WIDTH + '-' + SIZE);
- var ox, mx, ux, sumx, scroll, i = 0,
- bool = false,
- staut = true;
- $li.find('a').click(function() {
- //阻止轮播元素的默认点击事件
- return false;
- });
- $slider.mousedown(function(e) {
- //鼠标左键轮播区域
- if (e.target.tagName == 'IMG' && e.button == 0) {
- //左键图片
- staut = true;
- //初始化拖拽,状态为true,可以触发点击事件
- sumx = 0;
- //初始化鼠标偏移为0
- bool = true;
- //记录左键状态
- ox = e.pageX;
- //记录鼠标初始坐标
- scroll = $slider.parent().scrollLeft();
- //记录初始轮播水平滚动偏移
- e.preventDefault();
- //阻止鼠标点击默认事件
- }
- });
- $slider.mousemove(function(e) {
- //鼠标在轮播区域移动
- if (bool) { //左键状态
- staut = false;
- //已经拖拽,状态为false,不再触发点击事件
- mx = e.pageX;
- //记录鼠标实时坐标
- sumx = ox - mx;
- //记录鼠标坐标偏移
- $slider.parent().scrollLeft(scroll + sumx);
- }
- });
- $slider.mouseout(function(e) {
- //鼠标离开轮播区域
- if (bool) {
- //左键状态
- staut = true;
- //已经拖拽,但是离开了轮播区域,
- //状态为true,可以触发点击事件
- bool = false; //释放左键状态
- sumx > 0 && i < SIZE && i++; //下一个
- sumx < 0 && i > 0 && i--; //上一个
- $slider.parent().stop().animate({
- scrollLeft: i * WIDTH
- },
- 300,
- function() {
- if (i == SIZE) {
- i = 0;
- $slider.parent().scrollLeft(0);
- }
- $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr');
- }); //完成拖拽
- }
- });
- $slider.mouseup(function(e) {
- //鼠标释放,完成click事件
- bool = false;
- //释放左键状态
- if (staut && e.button == 0) {
- //没有拖拽或者拖拽失效,且是左键,触发点击事件
- window.location.href = $(e.target).parent().attr('href');
- //触发点击事件
- } else if (!staut && e.button == 0) {
- //成功拖拽,且是左键
- sumx > 0 && i < SIZE && i++; //下一个
- sumx < 0 && i > 0 && i--; //上一个
- $slider.parent().stop().animate({
- scrollLeft: i * WIDTH
- },
- 300,
- function() {
- if (i == SIZE) {
- //最后一个
- i = 0;
- $slider.parent().scrollLeft(0); //归位
- }
- $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr');
- }); //完成拖拽
- }
- });
- function setSlider() {
- i < SIZE && i++; //下一个
- $slider.parent().stop().animate({
- scrollLeft: i * WIDTH
- },
- 300,
- function() {
- if (i == SIZE) { //最后一个
- i = 0;
- $slider.parent().scrollLeft(0);
- }
- $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr');
- }); //完成拖拽
- }
- var timer = setInterval(function() {
- setSlider();
- },
- 3000);
- $slider.hover(function() {
- if (timer) {
- clearInterval(timer);
- timer = null;
- }
- },
- function() {
- timer = setInterval(function() {
- setSlider();
- },
- 3000);
- });
- $(window).resize(function() {
- WIDTH = $li.width();
- $slider.parent().scrollLeft(i * WIDTH); //归位
- //console.log(WIDTH + '-' + i);
- });
- });
- </script>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: